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

989

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

Confirmation modal/card

Author:
Sophia Baker

2 years ago

14.4k
Card animate

Author:
Raul antonio de la cruz hernandez

2 months ago

521
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

9.9k
Fancy blog post card

Author:
Mr Robot

2 years ago

11.5k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

9.8k
Border gradient

Author:
Samuel Dawson

2 years ago

14.3k
Card Slider

Author:
Maxim

1 month ago

362
Service/Product card
Tour trip booking showcase card

Author:
JaxStone

2 years ago

12.2k
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
RShubham kumar

1 year ago

3.5k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

6 days ago

19
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

1 week ago

65
cards
cards with background animation

Author:
Anonymous

1 year ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components