Bootdey

event blocks

Ready-to-use event blocks using Tailwind utility classes. No dependencies, no setup—just grab the code and ship.

Preview HTML

HTML code

This is the html code used to create this tailwind snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Event Blocks</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-600 font-sans text-sm leading-relaxed mt-5">

  <div class="max-w-6xl mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- Card -->
      <div class="bg-white overflow-hidden rounded-md">
        <div class="grid grid-cols-5 h-full">
          <div class="col-span-2 relative h-[240px] overflow-hidden">
            <img
              src="https://www.bootdey.com/image/400x400/FFB6C1/000000"
              alt=""
              class="absolute top-0 left-0 h-full w-auto object-cover"
            />
          </div>

          <div class="col-span-3 p-4 flex flex-col justify-center relative">
            <button
              type="button"
              class="absolute top-4 right-4 bg-blue-600 hover:bg-blue-700 transition text-white text-xs px-3 py-1.5 rounded"
            >
              Register
            </button>

            <p class="mb-1">
              <span class="text-lg font-semibold mr-1">16</span>Aug
            </p>

            <p class="font-bold uppercase mb-2">
              Event Invitation
            </p>

            <p>
              Donec posuere neque in elit luctus tempor consequat enim egestas.
              Nulla dictum egestas leo at lobortis.
            </p>
          </div>
        </div>
      </div>
      <!-- End Card -->

      <!-- Card -->
      <div class="bg-white overflow-hidden rounded-md">
        <div class="grid grid-cols-5 h-full">
          <div class="col-span-2 relative h-[240px] overflow-hidden">
            <img
              src="https://www.bootdey.com/image/400x400/87CEFA/000000"
              alt=""
              class="absolute top-0 left-0 h-full w-auto object-cover"
            />
          </div>

          <div class="col-span-3 p-4 flex flex-col justify-center relative">
            <button
              type="button"
              class="absolute top-4 right-4 bg-blue-600 hover:bg-blue-700 transition text-white text-xs px-3 py-1.5 rounded"
            >
              Register
            </button>

            <p class="mb-1">
              <span class="text-lg font-semibold mr-1">16</span>Aug
            </p>

            <p class="font-bold uppercase mb-2">
              Event Invitation
            </p>

            <p>
              Donec posuere neque in elit luctus tempor consequat enim egestas.
              Nulla dictum egestas leo at lobortis.
            </p>
          </div>
        </div>
      </div>
      <!-- End Card -->

    </div>
  </div>

</body>
</html>