Components : Interactive Carousel Component

Preview content adapted to proportion

Interactive Carousel Component

Card

It is used to showcase a collection of items, such as products, features, or content cards, in a visually appealing and engaging manner.

The component displays a horizontal carousel of interactive cards, each with unique styling, hover effects, and gradient backgrounds.

Interaction:

Users can scroll through the cards using touch or mouse gestures. Each card has hover effects that slightly scale up, and clickable buttons for additional actions. The 'cursor-grab' and 'cursor-grabbing' classes provide visual feedback when dragging.

Responsive:

The carousel is designed with flexbox and responsive units (e.g., 'w-80 h-96') to adapt to different screen sizes. The 'overflow-x-auto' class ensures smooth horizontal scrolling on smaller screens, while 'snap-x' and 'snap-mandatory' enable snap-to-element scrolling for a polished experience.

Date : May 30, 2025

Copys : 0

fa-tags

E-commerce product displays Portfolio item showcases Feature highlights Content marketing

Code

<div class="group/carousel flex overflow-x-auto snap-x snap-mandatory gap-6 p-6 transition-all">
 <div class="snap-start shrink-0 w-80 h-96 bg-gradient-to-br from-indigo-900 to-slate-900 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl">
  <div class="flex items-center justify-between mb-4">
   <div class="w-12 h-12 bg-blue-400/20 rounded-lg flex items-center justify-center text-2xl">
    📘
   </div>
   <div class="flex space-x-2">
    <button class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 transition-colors flex items-center justify-center">
     ⚙️
    </button>
    <button class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 transition-colors flex items-center justify-center">
     ❤️
    </button>
   </div>
  </div>
  <h3 class="text-white font-semibold text-xl mb-2">
   Interactive Card
  </h3>
  <p class="text-slate-400 text-sm mb-4">
   Hover effects &amp; gradient background
  </p>
  <p class="text-slate-300 flex-1 text-sm">
   Explore dynamic interactions with smooth transitions and modern design elements.
  </p>
  <button class="mt-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white font-medium transition-colors">
   Get Started →
  </button>
 </div>
 <div class="snap-start shrink-0 w-80 h-96 bg-orange-100 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl border-2 border-orange-200">
  <div class="w-full h-40 bg-orange-500/20 rounded-xl mb-4 flex items-center justify-center text-6xl">
   🌻
  </div>
  <h3 class="text-orange-900 font-bold text-xl mb-2">
   Sunny Side
  </h3>
  <p class="text-orange-700 text-sm mb-4">
   Bright colors &amp; cheerful design
  </p>
  <div class="flex-1 space-y-2">
   <div class="flex items-center space-x-2 text-orange-600">
    <span>
     ☀️
    </span>
    <span class="text-sm">
     Daily inspiration
    </span>
   </div>
   <div class="flex items-center space-x-2 text-orange-600">
    <span>
     🌈
    </span>
    <span class="text-sm">
     Creative tools
    </span>
   </div>
  </div>
  <button class="mt-4 px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg text-white font-medium transition-colors">
   Explore →
  </button>
 </div>
 <div class="snap-start shrink-0 w-80 h-96 bg-emerald-50 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl border-2 border-emerald-100">
  <div class="flex items-center justify-between mb-4">
   <div class="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center text-2xl">
    🌿
   </div>
   <div class="text-emerald-600 font-medium">
    Natural
   </div>
  </div>
  <h3 class="text-emerald-900 font-bold text-xl mb-2">
   Eco Friendly
  </h3>
  <p class="text-emerald-700 text-sm mb-4">
   Sustainable living solutions
  </p>
  <div class="flex-1 space-y-3">
   <div class="h-2 bg-emerald-200 rounded-full">
    <div class="w-3/4 h-2 bg-emerald-500 rounded-full">
    </div>
   </div>
   <div class="h-2 bg-emerald-200 rounded-full">
    <div class="w-1/2 h-2 bg-emerald-500 rounded-full">
    </div>
   </div>
  </div>
  <button class="mt-4 px-4 py-2 bg-emerald-500 hover:bg-emerald-600 rounded-lg text-white font-medium transition-colors">
   Learn More →
  </button>
 </div>
</div>

<template>
 <div class="group/carousel flex overflow-x-auto snap-x snap-mandatory gap-6 p-6 transition-all">
  <div class="snap-start shrink-0 w-80 h-96 bg-gradient-to-br from-indigo-900 to-slate-900 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl">
   <div class="flex items-center justify-between mb-4">
    <div class="w-12 h-12 bg-blue-400/20 rounded-lg flex items-center justify-center text-2xl">
     📘
    </div>
    <div class="flex space-x-2">
     <button class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 transition-colors flex items-center justify-center">
      ⚙️
     </button>
     <button class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 transition-colors flex items-center justify-center">
      ❤️
     </button>
    </div>
   </div>
   <h3 class="text-white font-semibold text-xl mb-2">
    Interactive Card
   </h3>
   <p class="text-slate-400 text-sm mb-4">
    Hover effects &amp; gradient background
   </p>
   <p class="text-slate-300 flex-1 text-sm">
    Explore dynamic interactions with smooth transitions and modern design elements.
   </p>
   <button class="mt-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white font-medium transition-colors">
    Get Started →
   </button>
  </div>
  <div class="snap-start shrink-0 w-80 h-96 bg-orange-100 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl border-2 border-orange-200">
   <div class="w-full h-40 bg-orange-500/20 rounded-xl mb-4 flex items-center justify-center text-6xl">
    🌻
   </div>
   <h3 class="text-orange-900 font-bold text-xl mb-2">
    Sunny Side
   </h3>
   <p class="text-orange-700 text-sm mb-4">
    Bright colors &amp; cheerful design
   </p>
   <div class="flex-1 space-y-2">
    <div class="flex items-center space-x-2 text-orange-600">
     <span>
      ☀️
     </span>
     <span class="text-sm">
      Daily inspiration
     </span>
    </div>
    <div class="flex items-center space-x-2 text-orange-600">
     <span>
      🌈
     </span>
     <span class="text-sm">
      Creative tools
     </span>
    </div>
   </div>
   <button class="mt-4 px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg text-white font-medium transition-colors">
    Explore →
   </button>
  </div>
  <div class="snap-start shrink-0 w-80 h-96 bg-emerald-50 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl border-2 border-emerald-100">
   <div class="flex items-center justify-between mb-4">
    <div class="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center text-2xl">
     🌿
    </div>
    <div class="text-emerald-600 font-medium">
     Natural
    </div>
   </div>
   <h3 class="text-emerald-900 font-bold text-xl mb-2">
    Eco Friendly
   </h3>
   <p class="text-emerald-700 text-sm mb-4">
    Sustainable living solutions
   </p>
   <div class="flex-1 space-y-3">
    <div class="h-2 bg-emerald-200 rounded-full">
     <div class="w-3/4 h-2 bg-emerald-500 rounded-full">
     </div>
    </div>
    <div class="h-2 bg-emerald-200 rounded-full">
     <div class="w-1/2 h-2 bg-emerald-500 rounded-full">
     </div>
    </div>
   </div>
   <button class="mt-4 px-4 py-2 bg-emerald-500 hover:bg-emerald-600 rounded-lg text-white font-medium transition-colors">
    Learn More →
   </button>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyCardComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>


import React from "react";
const MyCardComponent = () => {
    return (
<div>
<div class="group/carousel flex overflow-x-auto snap-x snap-mandatory gap-6 p-6 transition-all">
 <div class="snap-start shrink-0 w-80 h-96 bg-gradient-to-br from-indigo-900 to-slate-900 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl">
  <div class="flex items-center justify-between mb-4">
   <div class="w-12 h-12 bg-blue-400/20 rounded-lg flex items-center justify-center text-2xl">
    📘
   </div>
   <div class="flex space-x-2">
    <button class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 transition-colors flex items-center justify-center">
     ⚙️
    </button>
    <button class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 transition-colors flex items-center justify-center">
     ❤️
    </button>
   </div>
  </div>
  <h3 class="text-white font-semibold text-xl mb-2">
   Interactive Card
  </h3>
  <p class="text-slate-400 text-sm mb-4">
   Hover effects &amp; gradient background
  </p>
  <p class="text-slate-300 flex-1 text-sm">
   Explore dynamic interactions with smooth transitions and modern design elements.
  </p>
  <button class="mt-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white font-medium transition-colors">
   Get Started →
  </button>
 </div>
 <div class="snap-start shrink-0 w-80 h-96 bg-orange-100 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl border-2 border-orange-200">
  <div class="w-full h-40 bg-orange-500/20 rounded-xl mb-4 flex items-center justify-center text-6xl">
   🌻
  </div>
  <h3 class="text-orange-900 font-bold text-xl mb-2">
   Sunny Side
  </h3>
  <p class="text-orange-700 text-sm mb-4">
   Bright colors &amp; cheerful design
  </p>
  <div class="flex-1 space-y-2">
   <div class="flex items-center space-x-2 text-orange-600">
    <span>
     ☀️
    </span>
    <span class="text-sm">
     Daily inspiration
    </span>
   </div>
   <div class="flex items-center space-x-2 text-orange-600">
    <span>
     🌈
    </span>
    <span class="text-sm">
     Creative tools
    </span>
   </div>
  </div>
  <button class="mt-4 px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg text-white font-medium transition-colors">
   Explore →
  </button>
 </div>
 <div class="snap-start shrink-0 w-80 h-96 bg-emerald-50 rounded-2xl p-6 flex flex-col hover:scale-[1.02] transition-transform cursor-grab active:cursor-grabbing shadow-xl border-2 border-emerald-100">
  <div class="flex items-center justify-between mb-4">
   <div class="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center text-2xl">
    🌿
   </div>
   <div class="text-emerald-600 font-medium">
    Natural
   </div>
  </div>
  <h3 class="text-emerald-900 font-bold text-xl mb-2">
   Eco Friendly
  </h3>
  <p class="text-emerald-700 text-sm mb-4">
   Sustainable living solutions
  </p>
  <div class="flex-1 space-y-3">
   <div class="h-2 bg-emerald-200 rounded-full">
    <div class="w-3/4 h-2 bg-emerald-500 rounded-full">
    </div>
   </div>
   <div class="h-2 bg-emerald-200 rounded-full">
    <div class="w-1/2 h-2 bg-emerald-500 rounded-full">
    </div>
   </div>
  </div>
  <button class="mt-4 px-4 py-2 bg-emerald-500 hover:bg-emerald-600 rounded-lg text-white font-medium transition-colors">
   Learn More →
  </button>
 </div>
</div>

</div>
    )
}
export default MyCardComponent;

Recommended Related Components

More+

Dynamic Feature Cards

These cards are used to highlight key features or services, providing a visually appealing and interactive way to engage users.

Interactive Carousel Component

It is used to showcase a collection of items, such as products, features, or content cards, in a visually appealing and engaging manner.

Layout Showcase Component

It is used to demonstrate different design approaches and themes in a user interface.

Feature Product Display

Ideal for e-commerce websites, product showcases, and any platform that needs to highlight special items or collections.