Home
ariaw
Responsive Projects Section

Responsive Projects Section

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

Card Grid Animation

Author ariaw

587

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