Components : Feature Product Display

Preview content adapted to proportion

Feature Product Display

Card

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

This component showcases a featured product with a modern and interactive design, including animations, gradients, and responsive layouts.

Interaction:

Users can hover over the product card to see a scale effect and shadow enhancement. The 'Shop Now' button changes color on hover, and an animated spinner provides visual feedback. The sliding animation in the background adds a dynamic touch.

Responsive:

The layout adjusts based on screen size, displaying one column on mobile devices, two columns on medium screens, and three columns on large screens, ensuring optimal visibility and engagement across devices.

Date : June 17, 2025

Copys : 0

fa-tags

E-commerce product pages Portfolio item highlights Brand promotional content

Code

<div class="max-w-[1200px] mx-auto p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <div class="group relative bg-white/80 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 active:scale-95 border border-gray-100 dark:border-gray-700 print:transition-none">
  <div class="p-6">
   <div class="flex items-center gap-4 mb-4">
    <div class="flex-1 overflow-hidden rounded-lg h-32 bg-gradient-to-r from-blue-400 to-cyan-300">
     <div class="flex w-[300%] animate-slide">
      <div class="w-1/3 flex items-center justify-center text-6xl p-4">
       🌄
      </div>
      <div class="w-1/3 flex items-center justify-center text-6xl p-4">
       🏞️
      </div>
      <div class="w-1/3 flex items-center justify-center text-6xl p-4">
       🌅
      </div>
     </div>
    </div>
   </div>
   <h3 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent dark:from-blue-400 dark:to-cyan-300 mb-2">
    Feature Product
   </h3>
   <h4 class="text-xl text-gray-600 dark:text-gray-300 mb-3">
    Premium Collection
   </h4>
   <p class="text-gray-500 dark:text-gray-400 text-base mb-4">
    Discover our curated selection of high-quality items designed for modern living.
   </p>
   <div class="flex justify-between items-center">
    <button class="px-6 py-2 bg-gradient-to-r from-orange-400 to-amber-500 text-white rounded-lg hover:from-orange-500 hover:to-amber-600 transition-colors duration-300">
     Shop Now
    </button>
    <span class="w-8 h-8 border-4 border-t-transparent border-blue-500 rounded-full animate-spin">
    </span>
   </div>
  </div>
  <div class="absolute inset-0 -z-10 bg-gradient-to-br from-blue-50/30 to-cyan-50/30 dark:from-blue-900/30 dark:to-cyan-900/30 rounded-xl">
  </div>
 </div>
</div>

<template>
 <div class="max-w-[1200px] mx-auto p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  <div class="group relative bg-white/80 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 active:scale-95 border border-gray-100 dark:border-gray-700 print:transition-none">
   <div class="p-6">
    <div class="flex items-center gap-4 mb-4">
     <div class="flex-1 overflow-hidden rounded-lg h-32 bg-gradient-to-r from-blue-400 to-cyan-300">
      <div class="flex w-[300%] animate-slide">
       <div class="w-1/3 flex items-center justify-center text-6xl p-4">
        🌄
       </div>
       <div class="w-1/3 flex items-center justify-center text-6xl p-4">
        🏞️
       </div>
       <div class="w-1/3 flex items-center justify-center text-6xl p-4">
        🌅
       </div>
      </div>
     </div>
    </div>
    <h3 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent dark:from-blue-400 dark:to-cyan-300 mb-2">
     Feature Product
    </h3>
    <h4 class="text-xl text-gray-600 dark:text-gray-300 mb-3">
     Premium Collection
    </h4>
    <p class="text-gray-500 dark:text-gray-400 text-base mb-4">
     Discover our curated selection of high-quality items designed for modern living.
    </p>
    <div class="flex justify-between items-center">
     <button class="px-6 py-2 bg-gradient-to-r from-orange-400 to-amber-500 text-white rounded-lg hover:from-orange-500 hover:to-amber-600 transition-colors duration-300">
      Shop Now
     </button>
     <span class="w-8 h-8 border-4 border-t-transparent border-blue-500 rounded-full animate-spin">
     </span>
    </div>
   </div>
   <div class="absolute inset-0 -z-10 bg-gradient-to-br from-blue-50/30 to-cyan-50/30 dark:from-blue-900/30 dark:to-cyan-900/30 rounded-xl">
   </div>
  </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="max-w-[1200px] mx-auto p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <div class="group relative bg-white/80 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 active:scale-95 border border-gray-100 dark:border-gray-700 print:transition-none">
  <div class="p-6">
   <div class="flex items-center gap-4 mb-4">
    <div class="flex-1 overflow-hidden rounded-lg h-32 bg-gradient-to-r from-blue-400 to-cyan-300">
     <div class="flex w-[300%] animate-slide">
      <div class="w-1/3 flex items-center justify-center text-6xl p-4">
       🌄
      </div>
      <div class="w-1/3 flex items-center justify-center text-6xl p-4">
       🏞️
      </div>
      <div class="w-1/3 flex items-center justify-center text-6xl p-4">
       🌅
      </div>
     </div>
    </div>
   </div>
   <h3 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent dark:from-blue-400 dark:to-cyan-300 mb-2">
    Feature Product
   </h3>
   <h4 class="text-xl text-gray-600 dark:text-gray-300 mb-3">
    Premium Collection
   </h4>
   <p class="text-gray-500 dark:text-gray-400 text-base mb-4">
    Discover our curated selection of high-quality items designed for modern living.
   </p>
   <div class="flex justify-between items-center">
    <button class="px-6 py-2 bg-gradient-to-r from-orange-400 to-amber-500 text-white rounded-lg hover:from-orange-500 hover:to-amber-600 transition-colors duration-300">
     Shop Now
    </button>
    <span class="w-8 h-8 border-4 border-t-transparent border-blue-500 rounded-full animate-spin">
    </span>
   </div>
  </div>
  <div class="absolute inset-0 -z-10 bg-gradient-to-br from-blue-50/30 to-cyan-50/30 dark:from-blue-900/30 dark:to-cyan-900/30 rounded-xl">
  </div>
 </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.