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

654

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

Personal card
A card to show minimal info for staff member

Author:
farid

1 year ago

1.3k
google ui cards
google ui cards

Author:
Anonymous

2 years ago

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

Author:
Sufyan jutt

2 months ago

114
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

3 years ago

17.6k
Swipe card fully animative
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Author:
Sufyan jutt

2 months ago

425
Giftcard grid

Author:
ariaw

4 months ago

428
Card template

Author:
Raul antonio de la cruz hernandez

3 weeks ago

27
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

3 months ago

380
Card profile
profile card

Author:
Aman kumar

2 years ago

2.9k
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

8 months ago

1k
Card grid section
Display article/blog grid

Author:
Mr Robot

3 years ago

29.5k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components