Dynamic Service Showcase with Interactive Flip Cards

This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

This tailwind example is contributed by Vikas Kushwah, on 25-Mar-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Transitions,Article Card, Blog page card, Article card

Card Animation Blog Card

Author Vikas Kushwah

Tailwind v3.4 2.1k 9

Fork Fullscreen

<section class="lg:px-20 md:px-10 px-5 py-10">
  <div class="mx-auto flex justify-center object-center px-4 py-16 sm:py-24 lg:max-w-7xl">
    <div class="flex justify-center object-center flex-col">
      <h2 class="text-4xl font-semibold tracking-tight text-blue-950 sm:text-5xl lg:text-6xl">
        Services
      </h2>
      <div class="grid gap-5 pt-10 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1">
        
        <a href="/service-1-url" class="group flex justify-center [perspective:1000px]">
          <div class="relative lg:h-[400px] lg:w-64 md:h-[365px] md:64 sm:h-[365px] sm:w-60 h-[450px] w-[300px] rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
            
            <div class="absolute inset-0 h-full w-full rounded-xl [backface-visibility:hidden]">
              <img
                class="object-cover cursor-pointer object-left h-full w-full rounded-xl"
                src="https://res.cloudinary.com/dopolikju/image/upload/v1737357611/xbcd0xpxjjwhu8snltsl.jpg"
                alt="Service 1 Heading"
                width="250"
                height="250"
              />
            </div>
            <div class="absolute rounded-xl inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-blue/70"></div>
            <div class="absolute inset-0 translate-y-[78%] px-8 text-center">
              <p class="font-dmserif text-xl font-bold text-white">Service 1 Heading</p>
            </div>
            
            <div class="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-5 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
              <div class="flex min-h-full flex-col items-center justify-center">
                <h2 class="text-xl font-bold mb-4">Service 1 Heading</h2>
                <p class="text-lg text-pretty text-center mb-4">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iste odit beatae!
                </p>
                <div class="inline-flex">
                  <button class=" bg-yellow-800 hover:bg-yellow-700 text-white font-bold py-1 px-4 w-auto rounded-full inline-flex items-center">
                    <span>Read More</span>
                    <svg class="h-6 w-6 ml-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      
                      <path d="M..."></path>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </a>

<a href="/service-2-url" class="group flex justify-center [perspective:1000px]">
          <div class="relative lg:h-[400px] lg:w-64 md:h-[365px] md:64 sm:h-[365px] sm:w-60 h-[450px] w-[300px] rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
            
            <div class="absolute inset-0 h-full w-full rounded-xl [backface-visibility:hidden]">
              <img
                class="object-cover cursor-pointer object-left h-full w-full rounded-xl"
                src="https://res.cloudinary.com/dopolikju/image/upload/v1737357611/xbcd0xpxjjwhu8snltsl.jpg"
                alt="Service 2 Heading"
                width="250"
                height="250"
              />
            </div>
            <div class="absolute rounded-xl inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-blue/70"></div>
            <div class="absolute inset-0 translate-y-[78%] px-8 text-center">
              <p class="font-dmserif text-xl font-bold text-white">Service 2 Heading</p>
            </div>

            <div class="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-5 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
              <div class="flex min-h-full flex-col items-center justify-center">
                <h2 class="text-xl font-bold mb-4">Service 2 Heading</h2>
                <p class="text-lg text-pretty text-center mb-4">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iste odit beatae!
                </p>
                <div class="inline-flex">
                  <button class=" bg-yellow-800 hover:bg-yellow-700 text-white font-bold py-1 px-4 w-auto rounded-full inline-flex items-center">
                    <span>Read More</span>
                    <svg class="h-6 w-6 ml-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      
                      <path d="M..."></path>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </a>

<a href="/service-2-url" class="group flex justify-center [perspective:1000px]">
          <div class="relative lg:h-[400px] lg:w-64 md:h-[365px] md:64 sm:h-[365px] sm:w-60 h-[450px] w-[300px] rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
            
            <div class="absolute inset-0 h-full w-full rounded-xl [backface-visibility:hidden]">
              <img
                class="object-cover cursor-pointer object-left h-full w-full rounded-xl"
                src="https://res.cloudinary.com/dopolikju/image/upload/v1737357611/xbcd0xpxjjwhu8snltsl.jpg"
                alt="Service 2 Heading"
                width="250"
                height="250"
              />
            </div>
            <div class="absolute rounded-xl inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-blue/70"></div>
            <div class="absolute inset-0 translate-y-[78%] px-8 text-center">
              <p class="font-dmserif text-xl font-bold text-white">Service 3 Heading</p>
            </div>

            <div class="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-5 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
              <div class="flex min-h-full flex-col items-center justify-center">
                <h2 class="text-xl font-bold mb-4">Service 3 Heading</h2>
                <p class="text-lg text-pretty text-center mb-4">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iste odit beatae!
                </p>
                <div class="inline-flex">
                  <button class=" bg-yellow-800 hover:bg-yellow-700 text-white font-bold py-1 px-4 w-auto rounded-full inline-flex items-center">
                    <span>Read More</span>
                    <svg class="h-6 w-6 ml-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      
                      <path d="M..."></path>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </a>

<a href="/service-2-url" class="group flex justify-center [perspective:1000px]">
          <div class="relative lg:h-[400px] lg:w-64 md:h-[365px] md:64 sm:h-[365px] sm:w-60 h-[450px] w-[300px] rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
            
            <div class="absolute inset-0 h-full w-full rounded-xl [backface-visibility:hidden]">
              <img
                class="object-cover cursor-pointer object-left h-full w-full rounded-xl"
                src="https://res.cloudinary.com/dopolikju/image/upload/v1737357611/xbcd0xpxjjwhu8snltsl.jpg"
                alt="Service 2 Heading"
                width="250"
                height="250"
              />
            </div>
            <div class="absolute rounded-xl inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-blue/70"></div>
            <div class="absolute inset-0 translate-y-[78%] px-8 text-center">
              <p class="font-dmserif text-xl font-bold text-white">Service 4 Heading</p>
            </div>

            <div class="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-5 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
              <div class="flex min-h-full flex-col items-center justify-center">
                <h2 class="text-xl font-bold mb-4">Service 4 Heading</h2>
                <p class="text-lg text-pretty text-center mb-4">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iste odit beatae!
                </p>
                <div class="inline-flex">
                  <button class=" bg-yellow-800 hover:bg-yellow-700 text-white font-bold py-1 px-4 w-auto rounded-full inline-flex items-center">
                    <span>Read More</span>
                    <svg class="h-6 w-6 ml-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      
                      <path d="M..."></path>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </a>

<a href="/service-2-url" class="group flex justify-center [perspective:1000px]">
          <div class="relative lg:h-[400px] lg:w-64 md:h-[365px] md:64 sm:h-[365px] sm:w-60 h-[450px] w-[300px] rounded-xl shadow-xl transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
            
            <div class="absolute inset-0 h-full w-full rounded-xl [backface-visibility:hidden]">
              <img
                class="object-cover cursor-pointer object-left h-full w-full rounded-xl"
                src="https://res.cloudinary.com/dopolikju/image/upload/v1737357611/xbcd0xpxjjwhu8snltsl.jpg"
                alt="Service 2 Heading"
                width="250"
                height="250"
              />
            </div>
            <div class="absolute rounded-xl inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-blue/70"></div>
            <div class="absolute inset-0 translate-y-[78%] px-8 text-center">
              <p class="font-dmserif text-xl font-bold text-white">Service 5 Heading</p>
            </div>

            <div class="absolute inset-0 h-full w-full rounded-xl bg-black/80 px-5 text-center text-slate-200 [transform:rotateY(180deg)] [backface-visibility:hidden]">
              <div class="flex min-h-full flex-col items-center justify-center">
                <h2 class="text-xl font-bold mb-4">Service 5 Heading</h2>
                <p class="text-lg text-pretty text-center mb-4">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iste odit beatae!
                </p>
                <div class="inline-flex">
                  <button class=" bg-yellow-800 hover:bg-yellow-700 text-white font-bold py-1 px-4 w-auto rounded-full inline-flex items-center">
                    <span>Read More</span>
                    <svg class="h-6 w-6 ml-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      
                      <path d="M..."></path>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </a>

</div>
    </div>
  </div>
</section>