Elegant Cards

Useful Tailwind classes for creating several types of cards. Ranging from simple text to more complex cards with animations and video.

This tailwind example is contributed by Nick Girga, on 02-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Card

Author Nick Girga

Tailwind v3.4 1.1k 5

Fork Fullscreen

<div class="flex flex-col items-center gap-8 my-8">

<div class="card">
    <h1 class="relative text-xl font-bold ml-8 mt-4 mb-2">Favorite Food</h1>
    <h2 class="relative text-base mx-6">A criminal amount of ground beef and rice 💪🏽</h2>
  </div>

<div class="card h-[52mm]">
    <h1 class="relative text-xl font-bold ml-8 mt-4 mb-2">Premium Tier</h1>
    <h2 class="relative text-base mx-6">Remove ads, unlock all features, instant support, and more.</h2>
    <div class="flex flex-row gap-2 justify-self-end m-4">
      <button class="btn hover:bg-[var(--color-base)] active:bg-[var(--color-base-darker)]">More Info</button>
      <button class="btn btn-primary">Pay</button>
    </div>
  </div>

<a class="card h-[76mm]"
    href="https://unsplash.com/photos/aerial-view-of-village-on-mountain-cliff-during-orange-sunset-cYrMQA7a3Wc"
    target="_blank"
    rel="noreferrer noopener">
    <img class="rounded-2xl"
      src="https://images.unsplash.com/photo-1499678329028-101435549a4e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Italy"
    />
    <h1 class="relative text-xl font-bold mt-4 mb-2 ml-8">Italy</h1>
    <h2 class="relative text-base mx-6">A very pretty picture that was taken in Italy.</h2>
  </a>

<a class="group card h-[42mm] relative"
    href="https://unsplash.com/photos/green-trees-covered-island-cB4Uqoc9D9k"
    target="_blank"
    rel="noreferrer noopener">
    <img class="rounded-2xl sm:group-hover:scale-[110%] transition duration-800"
      src="https://images.unsplash.com/photo-1504019347908-b45f9b0b8dd5?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Spain"
    />
    <div class="w-full h-full absolute bottom-0 left-0 right-0 top-0 rounded-[20px] bg-black/25 transition duration-800 opacity-100 sm:opacity-0 sm:group-hover:opacity-100">
      <h1 class="text-2xl font-bold text-white absolute mt-[24mm] mx-[24px]">
        Spain
      </h1>
      <h2 class="text-md font-bold text-white absolute mt-[32mm] mx-[24px] opacity-75">
        Beautiful water in Spain
      </h2>
    </div>
  </a>

<div class="card h-[75mm]">
    <video controls autoplay muted class="w-full rounded-2xl">
      <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
      Your web browser does not natively support video playback.
    </video>
    <h1 class="relative text-xl font-bold mt-4 mb-2 ml-8">Big Buck Bunny</h1>
    <h2 class="relative text-base mx-6">That bunny is very upset with that squirrel for hurting those butterflies.</h2>
  </div>

<a class="group card h-[89mm]"
    href="https://unsplash.com/photos/round-white-watch-with-white-band-2cFZ_FB08UM"
    target="_blank"
    rel="noreferrer noopener">
    <div class="flex rounded-2xl h-[42mm] overflow-hidden">
      <img class="w-full sm:group-hover:scale-[120%] transition duration-800"
        src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=1699&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Smartwatch"
      />
    </div>
    <h1 class="relative text-xl font-bold mt-4 mb-2 ml-8">Smartwatch</h1>
    <h2 class="relative text-base mx-6">It's got the time and notifications and stuff I guess.</h2>
    <div class="flex flex-row gap-2 ml-4 mt-4">
      <span class="badge badge-primary">Hardware</span>
      <span class="badge badge-secondary">Watch</span>
      <span class="badge bg-[var(--color-base)]">Fake</span>
    </div>
  </a>

</div>

Related Examples

Card blog
Targeta para blog

Raul antonio de la cruz hernandez

10 months ago

646
Article-Post Preview card

Prashant

4 years ago

10.5k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

kzsamir849

2 years ago

2.7k
Shopping Cart -Card

ABDO-SY

1 year ago

2.6k
User profile card with Cover Image

Noob

3 years ago

33.8k
Card with Dark Mode
For blog post and e-commerce websites

OmKar Mehta

2 years ago

2.8k
Pagination
It's my first project which i made him in the using tailwind css and html

Sufyan jutt

10 months ago

904
Astro build starter template with Tailwind
Astro build starter template with Tailwind

Geoffrey Callaghan

2 years ago

4.5k
Créer une story
Créer une story

Omer fils ELENGA

9 months ago

1k
Personal card
A card to show minimal info for staff member

farid

1 year ago

1.7k
card
simple card for begin

Omer fils ELENGA

1 year ago

2.6k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Hamza Atig

1 year ago

1.3k