Home
SAI BENDE
Responsive Card Section With Hover Effect

Responsive Card Section With Hover Effect

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.

Card Grid

Author SAI BENDE

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>
</div>

Related Examples