Responsive Projects Section

This tailwind example is contributed by ariaw, on 09-Apr-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Transitions

Card Grid Animation

Author ariaw

Tailwind v3.4 1.4k 7

Fork Fullscreen

<div class="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
      
      <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl">
        <div class="h-64 overflow-hidden">
          <img src="https://placehold.co/600x400" alt="UI Design Project" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" />
        </div>
        <div class="absolute inset-0 flex items-end bg-gradient-to-t from-gray-900 to-transparent p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-90">
          <div class="translate-y-8 transform transition-transform duration-300 group-hover:translate-y-0">
            <h3 class="text-2xl font-bold text-white">Modern UI Design</h3>
            <p class="mt-2 text-gray-300">Clean, minimalist interface design for a SaaS application.</p>
            <div class="mt-4 flex space-x-2">
              <span class="rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white">UI/UX</span>
              <span class="rounded-full bg-purple-600 px-3 py-1 text-xs font-semibold text-white">Figma</span>
            </div>
            <a href="#" class="mt-4 inline-flex items-center text-white transition-colors hover:text-blue-300">
              View Project
              <i class="fas fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl">
        <div class="h-64 overflow-hidden">
          <img src="https://placehold.co/600x400" alt="Mobile App Project" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" />
        </div>
        <div class="absolute inset-0 flex items-end bg-gradient-to-t from-gray-900 to-transparent p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-90">
          <div class="translate-y-8 transform transition-transform duration-300 group-hover:translate-y-0">
            <h3 class="text-2xl font-bold text-white">Fitness Mobile App</h3>
            <p class="mt-2 text-gray-300">Cross-platform fitness tracking application with social features.</p>
            <div class="mt-4 flex space-x-2">
              <span class="rounded-full bg-green-600 px-3 py-1 text-xs font-semibold text-white">React Native</span>
              <span class="rounded-full bg-red-600 px-3 py-1 text-xs font-semibold text-white">Health</span>
            </div>
            <a href="#" class="mt-4 inline-flex items-center text-white transition-colors hover:text-blue-300">
              View Project
              <i class="fas fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl">
        <div class="h-64 overflow-hidden">
          <img src="https://placehold.co/600x400" alt="E-commerce Project" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" />
        </div>
        <div class="absolute inset-0 flex items-end bg-gradient-to-t from-gray-900 to-transparent p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-90">
          <div class="translate-y-8 transform transition-transform duration-300 group-hover:translate-y-0">
            <h3 class="text-2xl font-bold text-white">E-commerce Platform</h3>
            <p class="mt-2 text-gray-300">Custom online store with integrated payment processing.</p>
            <div class="mt-4 flex space-x-2">
              <span class="rounded-full bg-yellow-600 px-3 py-1 text-xs font-semibold text-white">Shopify</span>
              <span class="rounded-full bg-indigo-600 px-3 py-1 text-xs font-semibold text-white">Payment</span>
            </div>
            <a href="#" class="mt-4 inline-flex items-center text-white transition-colors hover:text-blue-300">
              View Project
              <i class="fas fa-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>
    </div>

<div class="mt-16 text-center">
      <a href="#" class="inline-flex items-center rounded-full border border-blue-600 px-8 py-3 text-base font-medium text-blue-600 transition-colors duration-300 hover:bg-blue-600 hover:text-white">
        Explore All Projects
        <i class="fas fa-long-arrow-alt-right ml-3"></i>
      </a>
    </div>
  </div>
</section>

Related Examples

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.7k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

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

Noob

3 years ago

24.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.8k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k