Responsive Cards

This tailwind example is contributed by Anonymous, on 14-Jun-2024. Component is made with Tailwind v3.4. It is responsive.

Card

Author Anonymous

Tailwind v3.4 2.6k 1

Fork Fullscreen

<div class="bg-slate-100 mx-auto  p-6 dark:bg-gray-800">
  <div class="text-center text-2xl capitalize py-6 font-medium tracking-wider dark:text-white">
    <h2>we sell quality women handbags</h2>
  </div>
<div class="w-fit gap-6 mx-auto grid grid-cols-1 lg:grid-cols-3 sm:grid-cols-2">

<div class="w-64 shadow-md dark:bg-gray-700 hover:scale-105 duration-300 hover:shadow-xl">
  <div class="p-4 ">
    <img class="rounded-lg h-32 w-full" src="https://images.unsplash.com/photo-1605733513597-a8f8341084e6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxiYWd8ZW58MHwwfHx8MTcxODM4NDYwNHww&ixlib=rb-4.0.3&q=80&w=1080"/>
  </div>
  <div class="p-4 capitalize text-2xl font-semibold dark:text-white">
    <h2>handbag</h2>
  </div>
  <div class="flex justify-between dark:text-white p-4 capitalize text-xl font-medium">
    <div>
      <h3>price</h3>
    </div>
    <div>
      <h3>mkw 3,000.00</h3>
    </div>
  </div>
  <div class="p-2">
    <button class="uppercase text-white text-xl font-bold text-center rounded-lg bg-blue-500 p-2 w-full">buy</button>
  </div>
</div>


<div class="w-64 shadow-md dark:bg-gray-700 hover:scale-105 duration-300 hover:shadow-xl">
  <div class="p-4 ">
    <img class="rounded-lg h-32 w-full" src="https://images.unsplash.com/photo-1566150902887-9679ecc155ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8YmFnfGVufDB8MHx8fDE3MTgzODQ2MDR8MA&ixlib=rb-4.0.3&q=80&w=1080"/>
  </div>
  <div class="p-4 capitalize text-2xl font-semibold dark:text-white">
    <h2>handbag</h2>
  </div>
  <div class="flex justify-between dark:text-white p-4 capitalize text-xl font-medium">
    <div>
      <h3>price</h3>
    </div>
    <div>
      <h3>mkw 3,000.00</h3>
    </div>
  </div>
  <div class="p-2">
    <button class="uppercase text-white text-xl font-bold text-center rounded-lg bg-blue-500 p-2 w-full">buy</button>
  </div>
</div>


<div class="w-64 shadow-md dark:bg-gray-700 hover:scale-105 duration-300 hover:shadow-xl">
  <div class="p-4 ">
    <img class="rounded-lg h-32 w-full" src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHxiYWd8ZW58MHwwfHx8MTcxODM4NDYwNHww&ixlib=rb-4.0.3&q=80&w=1080"/>
  </div>
  <div class="p-4 capitalize text-2xl font-semibold dark:text-white">
    <h2>handbag</h2>
  </div>
  <div class="flex justify-between dark:text-white p-4 capitalize text-xl font-medium">
    <div>
      <h3>price</h3>
    </div>
    <div>
      <h3>mkw 3,000.00</h3>
    </div>
  </div>
  <div class="p-2">
    <button class="uppercase text-white text-xl font-bold text-center rounded-lg bg-blue-500 p-2 w-full">buy</button>
  </div>
</div>


<div class="w-64 shadow-md dark:bg-gray-700 hover:scale-105 duration-300 hover:shadow-xl">
  <div class="p-4 ">
    <img class="rounded-lg h-32 w-full" src="https://images.unsplash.com/photo-1559563458-527698bf5295?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxoYW5kYmFnfGVufDB8MHx8fDE3MTgzODk0OTF8MA&ixlib=rb-4.0.3&q=80&w=1080"/>
  </div>
  <div class="p-4 capitalize text-2xl font-semibold dark:text-white">
    <h2>handbag</h2>
  </div>
  <div class="flex justify-between dark:text-white p-4 capitalize text-xl font-medium">
    <div>
      <h3>price</h3>
    </div>
    <div>
      <h3>mkw 3,000.00</h3>
    </div>
  </div>
  <div class="p-2">
    <button class="uppercase text-white text-xl font-bold text-center rounded-lg bg-blue-500 p-2 w-full">buy</button>
  </div>
</div>

</div>
</div>

Related Examples

Experince Section

ABDO-SY

1 year ago

1.3k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Ragnar lodbrok

2 years ago

6.1k
Info card

Samuel Dawson

3 years ago

10.7k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Rathanak Phan

1 year ago

2k
Beautiful card design with image

Brandon D

4 years ago

14.2k
Product Details Card

ABDO-SY

1 year ago

3k
my carte visa
my carte visa

Omer fils ELENGA

4 months ago

384
HighLight
Highlight section. Find it makecomponents.com

makecomponents

2 years ago

2.5k
Pokemon!
Cool Pokemon card!

Crimson

1 year ago

2.1k
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

11 months ago

745
ApexCodeStudios.com Social Media Post Card
Get Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. This component excels with its clean typography using Inter font, smooth hover effects, responsive design, and seamless light/dark mode switching.

Apex Code Studios

3 months ago

330
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k