card

This tailwind example is contributed by 5upreme505, on 21-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author 5upreme505

1.3k

Fork Fullscreen

<div class="w-1/2 space-y-4 rounded-xl bg-white text-black">
    <div class=" space-y-4 ml-7 mt-14">
      <p class=" ">P E R F U M E</p>
      <h1 class="text-4xl font-bold">Gabrielle Essence Eau De Parfum</h1>
      <p class=" space-y-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non fugit nesciunt reprehenderit fugiat esse nam quam cupiditate animi recusandae laboriosam.</p>

</div>
      
      <div class=" items-center text-center  justify-center">
        <button class="text-white font-bold bg-green-800 py-4 px-20 rounded-xl">Add to card</button>
        </div>
    </div>
  </div>
</div>

Related Examples

Tailwind card

Author:
Conan Hilton

2 years ago

12.8k
Portfolio form
Portfolio form

Author:
Joseph Melvin Kanu

1 year ago

2.5k
Admin dashboard cards
Card groups for showing stats/info.

Author:
Gopi Yadav

2 years ago

20.2k
Coupon code card
Display Special Offer with Coupon Code

Author:
Dipti narayan

1 year ago

10.6k
Hover effect card

Author:
Rakib Hasan Sohag

8 months ago

1.2k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.4k
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.

Author:
kzsamir849

1 year ago

1.7k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

1 year ago

4.9k
Brand Grid with Hover Effect

Author:
ᴀʀ!ᴀ

5 months ago

779
cards
cards with background animation

Author:
Anonymous

1 year ago

2.6k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

4 months ago

343
Profile1

Author:
pablitodgb

2 months ago

193

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components