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 6

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
card simple hover

Raul antonio de la cruz hernandez

9 months ago

675
Profile Card
Simple and Attractive Profile card in tailwind css

KULDEEP

1 year ago

1.1k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

4 months ago

412
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.6k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

SAURAV SINGH

1 year ago

1.1k
KPI Cards
estilo Shopify / Stripe

Raul antonio de la cruz hernandez

11 months ago

581
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

10 months ago

732
Responsive Gradient Cards

JUGENDRA GANGWAR

3 weeks ago

45
Feature cards with icons on top

Manon Daniel

3 years ago

18.4k
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

3 months ago

322
Card Slider

Maxim

1 year ago

2.4k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.6k