Home
Anonymous
Responsive Cards

Responsive Cards

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

Card

Author Anonymous

1.6k

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

Contact us Form with Responsive

Author:
KULDEEP

5 months ago

521
Minimal Testimonial Card

Author:
Amit Pachange

2 years ago

9k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

7 months ago

1.5k
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

10 months ago

1.1k
Product hunt showcase section

Author:
Leon Bachmann

3 years ago

10.1k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

7 months ago

1.2k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

2 years ago

19k
Info cards for admin panal

Author:
Sophia Baker

3 years ago

9.7k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

11 months ago

1.3k
Product Card

Author:
Maxim

9 months ago

1.6k
avtarCard3

Author:
pablitodgb

6 months ago

977
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

9 months ago

816

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components