Home
Nick Girga
Elegant Cards

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 CSS v3. It is responsive. It supports dark mode.

Card

Author Nick Girga

346

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

Simple Card section

Author:
Akram Khan

1 year ago

2k
Card Slider

Author:
Maxim

4 months ago

831
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Author:
Uwase Alliance

2 months ago

260
Team Section

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.9k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

1 year ago

7.2k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

22.6k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

1 year ago

2.3k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.3k
Info card

Author:
Laurits

2 years ago

10.5k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

3 months ago

695
cards
cards slices

Author:
Anonymous

1 year ago

6.4k
Form package

Author:
Hunter Guru

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components