Components : Layout Showcase Component

Preview content adapted to proportion

Layout Showcase Component

Card

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

The component displays a collection of design layouts with varying styles and interactive elements.

Interaction:

Users can hover over the elements to see shadow effects, and the interactive icons provide visual feedback when clicked.

Responsive:

The layout adjusts based on screen size, using a grid system that changes from one column on mobile to three columns on larger screens.

Date : June 11, 2025

Copys : 0

fa-tags

Web design UI/UX prototyping Design portfolio Interactive websites

Code

<div class="flex flex-col space-y-8 p-8">
 <!-- Horizontal Layout -->
 <div class="flex flex-row items-center justify-between gap-4">
  <div class="flex-1 bg-white p-6 rounded-xl transition duration-300 hover:shadow-lg border border-gray-200">
   <div class="flex items-center justify-between">
    <h3 class="text-xl font-bold text-gray-800">
     Minimal Design
    </h3>
    <div class="relative group cursor-pointer">
     <span class="inline-block w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center text-white">
      →
     </span>
    </div>
   </div>
   <p class="text-sm text-gray-500 mt-3">
    Clean layout with generous white space and essential content only
   </p>
  </div>
  <div class="flex-1 bg-gradient-to-br from-[#4b9be8] via-[#6366d3] to-[#9333ef] p-6 rounded-xl transition duration-300 hover:shadow-lg">
   <div class="flex items-center justify-between">
    <h3 class="text-xl font-bold text-white">
     Gradient Flow
    </h3>
    <div class="relative group cursor-pointer">
     <span class="inline-block w-6 h-6 rounded-full bg-white flex items-center justify-center text-purple-600">
      🌟
     </span>
    </div>
   </div>
   <p class="text-sm text-white/80 mt-3">
    Smooth color transitions with luminous overlay effects
   </p>
  </div>
 </div>
 <!-- Vertical Layout -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-gray-800 p-6 rounded-xl transition duration-300 hover:shadow-lg group cursor-pointer">
   <div class="flex justify-between items-start">
    <h3 class="text-xl font-bold text-emerald-500">
     Dark Mode
    </h3>
    <span class="inline-block w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-400">
     ⌘
    </span>
   </div>
   <p class="text-sm text-gray-400 mt-3">
    High contrast interface with accent color highlights
   </p>
  </div>
  <div class="bg-white p-6 rounded-xl transition duration-300 hover:shadow-lg border-2 border-gray-800 shadow-[0_4px_0_rgba(45,55,72,0.3)] group cursor-pointer">
   <div class="flex justify-between items-start">
    <h3 class="text-xl font-bold text-gray-800">
     Dimensional Card
    </h3>
    <span class="inline-block w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center text-white">
     ▲
    </span>
   </div>
   <p class="text-sm text-gray-500 mt-3">
    3D effect with depth shadows and embossed elements
   </p>
  </div>
  <div class="bg-gradient-to-r from-emerald-50 to-white p-6 rounded-xl transition duration-300 hover:shadow-lg group cursor-pointer">
   <div class="flex justify-between items-start">
    <h3 class="text-xl font-bold text-gray-800">
     Subtle Texture
    </h3>
    <span class="inline-block w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center text-white">
     🎨
    </span>
   </div>
   <p class="text-sm text-gray-500 mt-3">
    Soft gradient backdrop with delicate surface pattern
   </p>
  </div>
 </div>
</div>

<template>
 <div class="flex flex-col space-y-8 p-8">
  <!-- Horizontal Layout -->
  <div class="flex flex-row items-center justify-between gap-4">
   <div class="flex-1 bg-white p-6 rounded-xl transition duration-300 hover:shadow-lg border border-gray-200">
    <div class="flex items-center justify-between">
     <h3 class="text-xl font-bold text-gray-800">
      Minimal Design
     </h3>
     <div class="relative group cursor-pointer">
      <span class="inline-block w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center text-white">
       →
      </span>
     </div>
    </div>
    <p class="text-sm text-gray-500 mt-3">
     Clean layout with generous white space and essential content only
    </p>
   </div>
   <div class="flex-1 bg-gradient-to-br from-[#4b9be8] via-[#6366d3] to-[#9333ef] p-6 rounded-xl transition duration-300 hover:shadow-lg">
    <div class="flex items-center justify-between">
     <h3 class="text-xl font-bold text-white">
      Gradient Flow
     </h3>
     <div class="relative group cursor-pointer">
      <span class="inline-block w-6 h-6 rounded-full bg-white flex items-center justify-center text-purple-600">
       🌟
      </span>
     </div>
    </div>
    <p class="text-sm text-white/80 mt-3">
     Smooth color transitions with luminous overlay effects
    </p>
   </div>
  </div>
  <!-- Vertical Layout -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
   <div class="bg-gray-800 p-6 rounded-xl transition duration-300 hover:shadow-lg group cursor-pointer">
    <div class="flex justify-between items-start">
     <h3 class="text-xl font-bold text-emerald-500">
      Dark Mode
     </h3>
     <span class="inline-block w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-400">
      ⌘
     </span>
    </div>
    <p class="text-sm text-gray-400 mt-3">
     High contrast interface with accent color highlights
    </p>
   </div>
   <div class="bg-white p-6 rounded-xl transition duration-300 hover:shadow-lg border-2 border-gray-800 shadow-[0_4px_0_rgba(45,55,72,0.3)] group cursor-pointer">
    <div class="flex justify-between items-start">
     <h3 class="text-xl font-bold text-gray-800">
      Dimensional Card
     </h3>
     <span class="inline-block w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center text-white">
      ▲
     </span>
    </div>
    <p class="text-sm text-gray-500 mt-3">
     3D effect with depth shadows and embossed elements
    </p>
   </div>
   <div class="bg-gradient-to-r from-emerald-50 to-white p-6 rounded-xl transition duration-300 hover:shadow-lg group cursor-pointer">
    <div class="flex justify-between items-start">
     <h3 class="text-xl font-bold text-gray-800">
      Subtle Texture
     </h3>
     <span class="inline-block w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center text-white">
      🎨
     </span>
    </div>
    <p class="text-sm text-gray-500 mt-3">
     Soft gradient backdrop with delicate surface pattern
    </p>
   </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="flex flex-col space-y-8 p-8">
 <!-- Horizontal Layout -->
 <div class="flex flex-row items-center justify-between gap-4">
  <div class="flex-1 bg-white p-6 rounded-xl transition duration-300 hover:shadow-lg border border-gray-200">
   <div class="flex items-center justify-between">
    <h3 class="text-xl font-bold text-gray-800">
     Minimal Design
    </h3>
    <div class="relative group cursor-pointer">
     <span class="inline-block w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center text-white">
      →
     </span>
    </div>
   </div>
   <p class="text-sm text-gray-500 mt-3">
    Clean layout with generous white space and essential content only
   </p>
  </div>
  <div class="flex-1 bg-gradient-to-br from-[#4b9be8] via-[#6366d3] to-[#9333ef] p-6 rounded-xl transition duration-300 hover:shadow-lg">
   <div class="flex items-center justify-between">
    <h3 class="text-xl font-bold text-white">
     Gradient Flow
    </h3>
    <div class="relative group cursor-pointer">
     <span class="inline-block w-6 h-6 rounded-full bg-white flex items-center justify-center text-purple-600">
      🌟
     </span>
    </div>
   </div>
   <p class="text-sm text-white/80 mt-3">
    Smooth color transitions with luminous overlay effects
   </p>
  </div>
 </div>
 <!-- Vertical Layout -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-gray-800 p-6 rounded-xl transition duration-300 hover:shadow-lg group cursor-pointer">
   <div class="flex justify-between items-start">
    <h3 class="text-xl font-bold text-emerald-500">
     Dark Mode
    </h3>
    <span class="inline-block w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-400">
     ⌘
    </span>
   </div>
   <p class="text-sm text-gray-400 mt-3">
    High contrast interface with accent color highlights
   </p>
  </div>
  <div class="bg-white p-6 rounded-xl transition duration-300 hover:shadow-lg border-2 border-gray-800 shadow-[0_4px_0_rgba(45,55,72,0.3)] group cursor-pointer">
   <div class="flex justify-between items-start">
    <h3 class="text-xl font-bold text-gray-800">
     Dimensional Card
    </h3>
    <span class="inline-block w-6 h-6 rounded-full bg-gray-800 flex items-center justify-center text-white">
     ▲
    </span>
   </div>
   <p class="text-sm text-gray-500 mt-3">
    3D effect with depth shadows and embossed elements
   </p>
  </div>
  <div class="bg-gradient-to-r from-emerald-50 to-white p-6 rounded-xl transition duration-300 hover:shadow-lg group cursor-pointer">
   <div class="flex justify-between items-start">
    <h3 class="text-xl font-bold text-gray-800">
     Subtle Texture
    </h3>
    <span class="inline-block w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center text-white">
     🎨
    </span>
   </div>
   <p class="text-sm text-gray-500 mt-3">
    Soft gradient backdrop with delicate surface pattern
   </p>
  </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.