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

500

1

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

Team Section

Author:
Samuel Abera

2 months ago

664
card profie
profile card

Author:
Aman kumar

11 months ago

2.7k
Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

5 months ago

562
Hover Card

Author:
Maxim

6 months ago

1.3k
beautifull project Item

Author:
Akram Khan

6 months ago

1.2k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

11.1k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

Author:
Samuel Abera

2 months ago

637
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

10.8k
E-commerce cards
E-commerce responsive cards with dark mode

Author:
Robert Chunga

6 months ago

1.4k
Responsive Article Section

Author:
Prashant

2 years ago

13.5k
Logos cards

Author:
Maxim

2 weeks ago

150
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

1 year ago

14.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1