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

1.4k

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

Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.1k
Gridaient Card Information Section
a card in neon design

Author:
Akram Khan

1 year ago

2.3k
Card with full width image
centered content

Author:
Mr Robot

2 years ago

10.1k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.2k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

6k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

15.5k
Features grid

Author:
Sophia Baker

2 years ago

10.1k
Cards
the best tailwind cards with responsive

Author:
irahoza daniel

6 months ago

745
Image card with overlay text overlay

Author:
Santos78

2 years ago

31.6k
Hover effect card

Author:
Samuel Dawson

2 years ago

31.5k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

1 year ago

2.1k
Profile card

Author:
Jaber Zarif

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12