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

741

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

Info cards

Author:
Samuel Dawson

2 years ago

9.9k
Watch Card
Watch Cards

Author:
Anonymous

6 months ago

1k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

1 month ago

145
E-commerce cards
E-commerce responsive cards with dark mode

Author:
Robert Chunga

9 months ago

1.8k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

9.6k
Pokemon!
Cool Pokemon card!

Author:
Crimson

2 months ago

480
Card
amazing card

Author:
Cristian

5 months ago

966
Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

8 months ago

1.3k
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Author:
Isabel McGuigan

9 months ago

1.9k
Advanced phone verification

Author:
Md. Tofayel islam

1 year ago

1.7k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

21.9k
Portfolio form
Portfolio form

Author:
Joseph Melvin Kanu

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

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