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 v3.4. 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

Tailwind v3.4 984 8

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

Steven Kuhn

4 years ago

13.3k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
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.

Amit Pachange

4 years ago

53.8k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.8k
Responsive Article Section

Prashant

4 years ago

17.2k
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:

Prashant

4 years ago

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

Noob

4 years ago

24.9k
User profile card with Cover Image

Noob

4 years ago

34k
Articles Card Grid

Noob

4 years ago

11.8k
Info cards
Show various statistics on your website

Arya

4 years ago

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

Arya

3 years ago

46.2k