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 4

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

card appetizer
ss

Anonymous

1 year ago

2.2k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
Notification
Pop up card when form submitted is successful

Olajide Olamide (Laemmy)

5 months ago

774
Blog Author Card

EliteAI Tools

1 year ago

1.8k
Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

1.9k
3D card
it is a 3D card

Bonimater

1 year ago

1.5k
Author box

Mr Robot

3 years ago

12.5k
Video card
Video card component for tailwind css

Rajesh kulkarni

3 years ago

18.3k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Walid Ahmad

2 years ago

4.3k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

3.8k
Tailwind CSS Book

Michael Andreuzza

2 years ago

3.4k