card

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

1k

2

Fork Fullscreen

<div class="flex min-h-screen items-center justify-center bg-amber-100 text-white">
  <div class="flex max-w-2xl rounded-xl border-black bg-white ">
    <div class="w-1/2  "><img src="https://i.ibb.co/7ztJFPH/image-product-desktop.jpg" alt="" class=" rounded-l-xl " /></div>

<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 class="flex items-center  ">
        <p class= " text-green-700 text-4xl font-bold">$149.99</p>
        <span class="ml-8 line-through">$169.99</span>
      </div>

</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

Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

4 months ago

1.5k
Signup page- Paper / Hand-drawn UI

Author:
Akram Khan

2 weeks ago

84
card appetizer
ss

Author:
Anonymous

8 months ago

1.3k
Card with sale ribbon

Author:
Fagundo67

2 years ago

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

Author:
Mike Varen

1 year ago

3.2k
Cards
the best tailwind cards with responsive

Author:
irahoza daniel

1 month ago

290
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

9.7k
Call to Action Box

Author:
Aitrik Saha

5 months ago

1.1k
Product Card

Author:
Maxim

3 months ago

996
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

3 weeks ago

105
Professional Plan
Professional Plan

Author:
Muzammil Riaz

1 month ago

206
Card
Card

Author:
Aman kumar

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1