Home
SAI BENDE
Responsive Card Section With Hover Effect

Responsive Card Section With Hover Effect

added more cards with ui friendly

This tailwind example is contributed by SAI BENDE, on 27-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,Product Showcase, Product card,Article Card, Blog page card, Article card

Card Profile Product Grid Blog Card

Author SAI BENDE

343

Fork Fullscreen

<div class="p-6 min-h-screen bg-white dark:bg-gray-900 transition-colors duration-300">
  <h2 class="text-3xl font-bold text-center mb-8 text-gray-900 dark:text-white">
    Responsive Card Section With Hover Effect
  </h2>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    
    
    <div class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300">
      <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?q=80&w=2274&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Web Development" class="w-full h-48 object-cover">
      <div class="p-6">
        <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Web Development</h3>
        <p class="text-gray-600 dark:text-gray-300">Build responsive websites using React, Node.js, and Tailwind CSS.</p>
      </div>
    </div>

<div class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300">
      <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?q=80&w=2274&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="UI Design" class="w-full h-48 object-cover">
      <div class="p-6">
        <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">UI/UX Design</h3>
        <p class="text-gray-600 dark:text-gray-300">Design beautiful interfaces and smooth user experiences.</p>
      </div>
    </div>

<div class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300">
      <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?q=80&w=2274&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="SEO" class="w-full h-48 object-cover">
      <div class="p-6">
        <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">SEO Optimization</h3>
        <p class="text-gray-600 dark:text-gray-300">Boost your site's visibility on Google with smart SEO practices.</p>
      </div>
    </div>
    
    <div class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300">
      <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?q=80&w=2274&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Web Development" class="w-full h-48 object-cover">
      <div class="p-6">
        <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Web Development</h3>
        <p class="text-gray-600 dark:text-gray-300">Build responsive websites using React, Node.js, and Tailwind CSS.</p>
      </div>
    </div>

<div class="bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300">
      <img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?q=80&w=2274&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Web Development" class="w-full h-48 object-cover">
      <div class="p-6">
        <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Web Development</h3>
        <p class="text-gray-600 dark:text-gray-300">Build responsive websites using React, Node.js, and Tailwind CSS.</p>
      </div>
    </div>

</div>
</div>

Related Examples

Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.3k
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.3k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

51.3k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

3 years ago

12.9k
Responsive Article Section

Author:
Prashant

3 years ago

16k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

62.8k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

23.2k
User profile card with Cover Image

Author:
Noob

3 years ago

30.6k
Articles Card Grid

Author:
Noob

3 years ago

11k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

11.3k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

43.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components