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

Hotel rooms
A simple room overview

Matti

1 year ago

2.1k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Professional Plan
Professional Plan

Muzammil Riaz

1 year ago

777
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2.1k
Card
card

5upreme505

2 years ago

2.7k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.3k
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.8k
Article Card

Anonymous

2 years ago

3.3k
Issue card
card designed to display the details of a technical issue

ABDO-SY

1 year ago

2.7k
Product review card

Rama krishnan Subramanian

2 years ago

2.7k
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

ABDO-SY

1 year ago

1.6k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.8k