card

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

Card

Author 5upreme505

Tailwind v3.4 2k 5

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 CSS Book

Michael Andreuzza

2 years ago

3.5k
Hover effect card

Samuel Dawson

3 years ago

33.4k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.8k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Homayoun

1 year ago

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

Prajwal Hallale

3 years ago

7.6k
alert
html , css

Hacker Development

1 year ago

2.1k
Card Cartier Product
Card Based View of Cartier

Ameth Galarcio

1 year ago

1.5k
User profile card

Mr Robot

3 years ago

12k
Card with link
This example can be used to show a CTA as a link instead of a button inside the card.

Md. Tofayel islam

2 years ago

3.2k
Author box

Mr Robot

3 years ago

12.5k
Personal card
A card to show minimal info for staff member

farid

1 year ago

1.8k