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

267

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

Blog Card

Author:
Md. Tofayel islam

1 month ago

205
Image cards

Author:
Reuben Enahoro

2 weeks ago

247
Payment Cards

Author:
Shammi Nethupul

4 months ago

900
Invoice
Invoice

Author:
Ameth Galarcio

5 months ago

959
Info cards

Author:
Samuel Dawson

1 year ago

9k
Feature Card

Author:
Md. Tofayel islam

2 months ago

293
Product card

Author:
Oliver Hansen

1 year ago

8.1k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

6 months ago

2.2k
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

9 months ago

1.4k
Team Section

Author:
Samuel Abera

4 weeks ago

241
Article Card

Author:
Anonymous

8 months ago

1.3k
Simple Card with Image
Horizontal card

Author:
Prem..

2 years ago

7.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.9