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

474

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

Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

Author:
SHARIFUL ISLAM

8 months ago

748
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

1 year ago

1.3k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.1k
Simple card layout with image

Author:
Leon Bachmann

2 years ago

10.7k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

8 months ago

1.6k
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

2.5k
Tailwind card

Author:
Conan Hilton

2 years ago

13k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

8 months ago

660
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

8 months ago

1.1k
Product review card

Author:
Moriba Traore

2 years ago

15.1k
Card
Simple Card

Author:
Anonymous

6 months ago

701
split bg

Author:
Anonymous

4 months ago

355

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components