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

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

Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

24k
Card grid section
Display article/blog grid

Author:
Mr Robot

3 years ago

29.5k
Tour package card
This card could be used for featuring a product, service, or blog post:

Author:
Henrik R.

1 year ago

2.4k
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.7k
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

8 months ago

584
Feature Card
Elevated card

Author:
Prajwal Hallale

3 years ago

10.6k
Info cards

Author:
Samuel Dawson

3 years ago

11.1k
card
It's a product card

Author:
SAURAV SINGH

10 months ago

1.2k
Minimal Info cards

Author:
Gopi Yadav

3 years ago

10.6k
Cards Seaction - Services block

Author:
ABDO-SY

10 months ago

1.6k
Professional Plan
Professional Plan

Author:
Muzammil Riaz

8 months ago

428
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components