Components : Dynamic Feature Cards

Preview content adapted to proportion

Dynamic Feature Cards

Card

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

The component displays two feature cards with interactive elements, including hover effects, gradient backgrounds, and dark mode support.

Interaction:

Users can hover over the cards to see size and shadow changes. The buttons within each card are clickable, and the 'Explore' and 'Discover' actions trigger user engagement.

Responsive:

The layout adjusts based on screen size, stacking into a single column on smaller screens and expanding into two columns on larger screens using a responsive grid system.

Date : June 05, 2025

Copys : 0

fa-tags

Product showcasing Website navigation Service introduction

Code

<div class="p-4 max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 dark:bg-gray-900">
 <div class="group relative rounded-2xl p-6 transition-all duration-300 hover:h-[280] h-240 bg-gradient-to-br from-blue-800 to-purple-900 hover:bg-opacity-95 bg-opacity-90 dark:from-blue-900 dark:to-purple-800 shadow-xl hover:shadow-2xl">
  <div class="flex flex-col gap-3">
   <div class="bg-indigo-100/10 p-3 rounded-xl w-max">
    <div class="text-6xl">
     ?
    </div>
   </div>
   <h2 class="text-2xl font-bold text-white">
    Modern Design
   </h2>
   <p class="text-lg text-gray-300/80">
    Responsive layout with dynamic interactions
   </p>
   <button class="mt-4 flex gap-2 items-center px-5 py-2.5 bg-orange-500 hover:bg-orange-600 rounded-lg text-white transition-colors w-max">
    <svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" fill-rule="evenodd">
     </path>
    </svg>
    Explore
   </button>
  </div>
 </div>
 <div class="group relative rounded-2xl p-6 transition-all duration-300 hover:h-[280] h-240 bg-gradient-to-br from-blue-800 to-purple-900 hover:bg-opacity-95 bg-opacity-90 dark:from-blue-900 dark:to-purple-800 shadow-xl hover:shadow-2xl">
  <div class="flex flex-col gap-3">
   <div class="bg-indigo-100/10 p-3 rounded-xl w-max">
    <div class="text-6xl">
     ?
    </div>
   </div>
   <h2 class="text-2xl font-bold text-white">
    Flexible Layout
   </h2>
   <p class="text-lg text-gray-300/80">
    Adaptive grid system for multiple screens
   </p>
   <button class="mt-4 flex gap-2 items-center px-5 py-2.5 bg-orange-500 hover:bg-orange-600 rounded-lg text-white transition-colors w-max">
    <svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
     </path>
    </svg>
    Discover
   </button>
  </div>
 </div>
</div>

<template>
 <div class="p-4 max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 dark:bg-gray-900">
  <div class="group relative rounded-2xl p-6 transition-all duration-300 hover:h-[280] h-240 bg-gradient-to-br from-blue-800 to-purple-900 hover:bg-opacity-95 bg-opacity-90 dark:from-blue-900 dark:to-purple-800 shadow-xl hover:shadow-2xl">
   <div class="flex flex-col gap-3">
    <div class="bg-indigo-100/10 p-3 rounded-xl w-max">
     <div class="text-6xl">
      ?
     </div>
    </div>
    <h2 class="text-2xl font-bold text-white">
     Modern Design
    </h2>
    <p class="text-lg text-gray-300/80">
     Responsive layout with dynamic interactions
    </p>
    <button class="mt-4 flex gap-2 items-center px-5 py-2.5 bg-orange-500 hover:bg-orange-600 rounded-lg text-white transition-colors w-max">
     <svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" fill-rule="evenodd">
      </path>
     </svg>
     Explore
    </button>
   </div>
  </div>
  <div class="group relative rounded-2xl p-6 transition-all duration-300 hover:h-[280] h-240 bg-gradient-to-br from-blue-800 to-purple-900 hover:bg-opacity-95 bg-opacity-90 dark:from-blue-900 dark:to-purple-800 shadow-xl hover:shadow-2xl">
   <div class="flex flex-col gap-3">
    <div class="bg-indigo-100/10 p-3 rounded-xl w-max">
     <div class="text-6xl">
      ?
     </div>
    </div>
    <h2 class="text-2xl font-bold text-white">
     Flexible Layout
    </h2>
    <p class="text-lg text-gray-300/80">
     Adaptive grid system for multiple screens
    </p>
    <button class="mt-4 flex gap-2 items-center px-5 py-2.5 bg-orange-500 hover:bg-orange-600 rounded-lg text-white transition-colors w-max">
     <svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
      </path>
     </svg>
     Discover
    </button>
   </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="p-4 max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 dark:bg-gray-900">
 <div class="group relative rounded-2xl p-6 transition-all duration-300 hover:h-[280] h-240 bg-gradient-to-br from-blue-800 to-purple-900 hover:bg-opacity-95 bg-opacity-90 dark:from-blue-900 dark:to-purple-800 shadow-xl hover:shadow-2xl">
  <div class="flex flex-col gap-3">
   <div class="bg-indigo-100/10 p-3 rounded-xl w-max">
    <div class="text-6xl">
     ?
    </div>
   </div>
   <h2 class="text-2xl font-bold text-white">
    Modern Design
   </h2>
   <p class="text-lg text-gray-300/80">
    Responsive layout with dynamic interactions
   </p>
   <button class="mt-4 flex gap-2 items-center px-5 py-2.5 bg-orange-500 hover:bg-orange-600 rounded-lg text-white transition-colors w-max">
    <svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <path clip-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" fill-rule="evenodd">
     </path>
    </svg>
    Explore
   </button>
  </div>
 </div>
 <div class="group relative rounded-2xl p-6 transition-all duration-300 hover:h-[280] h-240 bg-gradient-to-br from-blue-800 to-purple-900 hover:bg-opacity-95 bg-opacity-90 dark:from-blue-900 dark:to-purple-800 shadow-xl hover:shadow-2xl">
  <div class="flex flex-col gap-3">
   <div class="bg-indigo-100/10 p-3 rounded-xl w-max">
    <div class="text-6xl">
     ?
    </div>
   </div>
   <h2 class="text-2xl font-bold text-white">
    Flexible Layout
   </h2>
   <p class="text-lg text-gray-300/80">
    Adaptive grid system for multiple screens
   </p>
   <button class="mt-4 flex gap-2 items-center px-5 py-2.5 bg-orange-500 hover:bg-orange-600 rounded-lg text-white transition-colors w-max">
    <svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
     </path>
    </svg>
    Discover
   </button>
  </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.