Infographie sur les rencontres skeuomorphes
Un composant infographique complexe et réactif conçu pour les plateformes de rencontres/sociales avec un style skeuomorphe et une palette de couleurs sépia/marron, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-stone-900 dark:to-stone-800 font-sans min-h-screen">
<div class="max-w-6xl mx-auto rounded-3xl shadow-2xl p-6 sm:p-8 md:p-10 bg-gradient-to-br from-orange-200 to-amber-300 dark:from-stone-700 dark:to-stone-900 border-4 border-amber-400 dark:border-stone-600 transform perspective-1000 -rotate-x-3 -rotate-y-2 translate-z-10">
<!-- Title Bar - Mimics a metallic plate -->
<div class="flex items-center justify-between p-4 sm:p-5 md:p-6 mb-8 rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 dark:from-stone-600 dark:to-stone-700 shadow-inner-xl border border-amber-600 dark:border-stone-500 relative transform -rotate-x-1 translate-z-5">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-stone-900 dark:text-stone-100 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
<span class="relative inline-block">
<span class="absolute -inset-1 bg-amber-700 dark:bg-stone-800 rounded-full blur-sm"></span>
<span class="relative text-stone-100 dark:text-amber-300">Love Compass</span>
</span>
<br class="sm:hidden"/> <span class="text-amber-800 dark:text-amber-200">V 2.0</span>
</h1>
<div class="flex space-x-2 sm:space-x-4">
<button class="p-3 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-6 h-6 text-stone-800 dark:text-stone-300 group-hover:animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.515-1.332 1.947-2.186 3.488-2.186 2.502 0 4.296 2.213 4.296 4.697 0 1.229-.567 2.458-1.57 3.518L9.504 18.25c-.272.775-.417.817-.417.817H7.72V15.5l5.207-6.096L9 2.5 10.325 4.317zM20 7.5v9a2 2 0 01-2 2H6a2 2 0 01-2-2V7.5a2 2 0 012-2h12a2 2 0 012 2z"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Settings</span>
</button>
<button class="p-3 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-6 h-6 text-stone-800 dark:text-stone-300 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9.247a3.75 3.75 0 100 5.506 3.75 3.75 0 000-5.506zM20.941 11H3.059L1.5 12.5 3.059 14H20.941L22.5 12.5 20.941 11zM12 21.75a9.75 9.75 0 110-19.5 9.75 9.75 0 010 19.5z"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Info</span>
</button>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Infographic Card 1: Connection Meter -->
<div class="col-span-1 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-amber-500 dark:bg-stone-600 opacity-30 transform rotate-45"></div>
<div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-orange-500 dark:bg-stone-700 opacity-30 transform -rotate-45"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Connection Meter</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">How well do you connect with others?</p>
<div class="relative flex items-center justify-center mb-6 z-10">
<div class="w-36 h-36 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 dark:from-stone-600 dark:to-stone-700 shadow-inner-xl p-2">
<div class="w-full h-full rounded-full bg-stone-100 dark:bg-stone-900 flex items-center justify-center relative">
<div class="absolute inset-0 rounded-full pointer-events-none border-4 border-amber-600 dark:border-stone-400 border-dashed animate-spin-slow"></div>
<div class="relative z-10 text-5xl font-extrabold text-orange-700 dark:text-orange-400 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_30%)]">75%</div>
<div class="absolute w-1 h-16 bg-red-500 origin-bottom rounded-full transform rotate-[135deg] animate-pulse-light"></div>
</div>
</div>
</div>
<div class="flex justify-around text-center text-sm font-semibold text-stone-700 dark:text-stone-300 relative z-10">
<div>
<span class="block text-xs uppercase text-stone-600 dark:text-stone-400">Matches</span>
<span class="text-lg font-bold text-orange-700 dark:text-orange-400">120</span>
</div>
<div>
<span class="block text-xs uppercase text-stone-600 dark:text-stone-400">Engagements</span>
<span class="text-lg font-bold text-orange-700 dark:text-orange-400">88</span>
</div>
<div>
<span class="block text-xs uppercase text-stone-600 dark:text-stone-400">Conversations</span>
<span class="text-lg font-bold text-orange-700 dark:text-orange-400">65</span>
</div>
</div>
</div>
<!-- Infographic Card 2: Interest Affinity Dial -->
<div class="col-span-1 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute inset-0 bg-stone-100 dark:bg-stone-900 opacity-20 transform -skew-y-6 -skew-x-3 rotate-12 group-hover:rotate-0 transition-transform duration-500"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Interest Affinity</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">Discover shared passions and hobbies.</p>
<div class="relative flex items-center justify-center mb-6 z-10">
<div class="w-40 h-40 rounded-full bg-gradient-to-br from-stone-200 to-stone-400 dark:from-stone-600 dark:to-stone-800 shadow-inner p-3 flex items-center justify-center">
<div class="w-full h-full rounded-full bg-stone-300 dark:bg-stone-700 relative">
<div class="absolute inset-0 rounded-full border-4 border-stone-500 dark:border-stone-400"></div>
<div class="absolute z-10 text-center w-full h-full flex flex-col justify-center items-center pointer-events-none">
<span class="text-4xl font-extrabold text-orange-700 dark:text-orange-400 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_30%)]">8/10</span>
<span class="text-sm text-stone-700 dark:text-stone-300">Avg Score</span>
</div>
<div class="absolute top-1/2 left-1/2 w-2 h-2 bg-red-600 rounded-full -translate-x-1/2 -translate-y-1/2 z-20 shadow-lg"></div>
<div class="absolute top-1/2 left-1/2 w-1 h-1/2 bg-red-600 origin-[bottom_center] transform -translate-x-1/2 -translate-y-1/2 rotate-[120deg] z-10 rounded-full shadow-md"></div>
<div class="absolute inset-0 rounded-full animate-rotate-slow">
<!-- Dial markers -->
<div class="w-2 h-2 bg-stone-500 dark:bg-stone-400 rounded-full absolute top-2 left-1/2 -translate-x-1/2"></div>
<div class="w-2 h-2 bg-stone-500 dark:bg-stone-400 rounded-full absolute bottom-2 left-1/2 -translate-x-1/2"></div>
<div class="w-2 h-2 bg-stone-500 dark:bg-stone-400 rounded-full absolute left-2 top-1/2 -translate-y-1/2"></div>
<div class="w-2 h-2 bg-stone-500 dark:bg-stone-400 rounded-full absolute right-2 top-1/2 -translate-y-1/2"></div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 text-sm text-stone-700 dark:text-stone-300 relative z-10">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-green-500 dark:bg-green-400 shadow-md"></span>
<span>Music Fans</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-blue-500 dark:bg-blue-400 shadow-md"></span>
<span>Movie Buffs</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></span>
<span>Adventure Seekers</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-red-500 dark:bg-red-400 shadow-md"></span>
<span>Foodies</span>
</div>
</div>
</div>
<!-- Infographic Card 3: Personality Traits Board -->
<div class="col-span-1 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute -top-20 -left-20 w-40 h-40 rounded-full bg-amber-400 dark:bg-stone-700 opacity-20 transform scale-150"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Personality Traits</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">Your unique qualities at a glance.</p>
<div class="space-y-4 relative z-10">
<div class="p-3 rounded-lg bg-emerald-300 dark:bg-emerald-600 shadow-inset flex items-center justify-between transform hover:scale-102 hover:shadow-lg transition-transform duration-200">
<span class="font-medium text-emerald-800 dark:text-emerald-100">Adventurous</span>
<span class="text-emerald-700 dark:text-emerald-200 text-lg font-bold">★★★★★</span>
</div>
<div class="p-3 rounded-lg bg-orange-300 dark:bg-orange-600 shadow-inset flex items-center justify-between transform hover:scale-102 hover:shadow-lg transition-transform duration-200">
<span class="font-medium text-orange-800 dark:text-orange-100">Humorous</span>
<span class="text-orange-700 dark:text-orange-200 text-lg font-bold">★★★★☆</span>
</div>
<div class="p-3 rounded-lg bg-blue-300 dark:bg-blue-600 shadow-inset flex items-center justify-between transform hover:scale-102 hover:shadow-lg transition-transform duration-200">
<span class="font-medium text-blue-800 dark:text-blue-100">Optimistic</span>
<span class="text-blue-700 dark:text-blue-200 text-lg font-bold">★★★★★</span>
</div>
<div class="p-3 rounded-lg bg-purple-300 dark:bg-purple-600 shadow-inset flex items-center justify-between transform hover:scale-102 hover:shadow-lg transition-transform duration-200">
<span class="font-medium text-purple-800 dark:text-purple-100">Thoughtful</span>
<span class="text-purple-700 dark:text-purple-200 text-lg font-bold">★★★☆☆</span>
</div>
</div>
</div>
<!-- Infographic Card 4: Compatibility Graph (full width on small screens) -->
<div class="col-span-1 md:col-span-2 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute -bottom-16 -right-16 w-60 h-60 rounded-full bg-red-400 dark:bg-red-700 opacity-20 transform scale-125"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Compatibility Flow</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">Visualizing your strongest connections.</p>
<div class="relative h-64 bg-stone-100 dark:bg-stone-900 rounded-lg p-4 shadow-inner-lg border-2 border-stone-300 dark:border-stone-700 relative z-10">
<!-- Graph area - simple visual representation -->
<div class="w-full h-full flex flex-col justify-end items-start">
<div class="flex w-full items-end justify-around h-full">
<div class="flex flex-col items-center">
<div class="w-8 lg:w-12 h-20 bg-red-500 dark:bg-red-400 rounded-t-full shadow-lg border-2 border-red-600 dark:border-red-500 transform hover:scale-y-110 transition-transform origin-bottom animate-grow"></div>
<span class="mt-2 text-xs text-stone-700 dark:text-stone-300 font-semibold">Trust</span>
</div>
<div class="flex flex-col items-center">
<div class="w-8 lg:w-12 h-32 bg-blue-500 dark:bg-blue-400 rounded-t-full shadow-lg border-2 border-blue-600 dark:border-blue-500 transform hover:scale-y-110 transition-transform origin-bottom animate-grow delay-100"></div>
<span class="mt-2 text-xs text-stone-700 dark:text-stone-300 font-semibold">Humor</span>
</div>
<div class="flex flex-col items-center">
<div class="w-8 lg:w-12 h-24 bg-green-500 dark:bg-green-400 rounded-t-full shadow-lg border-2 border-green-600 dark:border-green-500 transform hover:scale-y-110 transition-transform origin-bottom animate-grow delay-200"></div>
<span class="mt-2 text-xs text-stone-700 dark:text-stone-300 font-semibold">Interests</span>
</div>
<div class="flex flex-col items-center">
<div class="w-8 lg:w-12 h-40 bg-purple-500 dark:bg-purple-400 rounded-t-full shadow-lg border-2 border-purple-600 dark:border-purple-500 transform hover:scale-y-110 transition-transform origin-bottom animate-grow delay-300"></div>
<span class="mt-2 text-xs text-stone-700 dark:text-stone-300 font-semibold">Values</span>
</div>
</div>
</div>
<!-- Grid lines for graph -->
<div class="absolute inset-0 border-r border-b border-stone-200 dark:border-stone-800 pointer-events-none"></div>
<div class="absolute inset-0 border-l border-t border-stone-200 dark:border-stone-800 pointer-events-none"></div>
</div>
</div>
<!-- Infographic Card 5: Top Matched Profiles -->
<div class="col-span-1 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute -top-10 -right-10 w-40 h-40 bg-purple-400 dark:bg-purple-700 opacity-20 rounded-full animate-pulse-slow"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Top Matched Profiles</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">See who you're most compatible with.</p>
<div class="space-y-4 relative z-10">
<a href="#" class="flex items-center gap-4 p-3 rounded-xl bg-orange-200 dark:bg-stone-700 shadow-inset border border-orange-300 dark:border-stone-600 transform hover:scale-102 hover:shadow-lg transition-transform duration-200 group">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Profile 1" class="w-16 h-16 rounded-full border-4 border-amber-500 dark:border-stone-500 outline outline-2 outline-offset-2 outline-amber-700 dark:outline-orange-400 shadow-md group-hover:scale-105 transition-transform object-cover">
<div>
<h3 class="text-lg font-bold text-stone-800 dark:text-stone-100 drop-shadow-md">Sarah L.</h3>
<p class="text-sm text-stone-700 dark:text-stone-300">92% Match - Traveler, Artist</p>
</div>
<svg class="ml-auto w-6 h-6 text-amber-700 dark:text-orange-400 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="flex items-center gap-4 p-3 rounded-xl bg-orange-200 dark:bg-stone-700 shadow-inset border border-orange-300 dark:border-stone-600 transform hover:scale-102 hover:shadow-lg transition-transform duration-200 group">
<img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Profile 2" class="w-16 h-16 rounded-full border-4 border-amber-500 dark:border-stone-500 outline outline-2 outline-offset-2 outline-amber-700 dark:outline-orange-400 shadow-md group-hover:scale-105 transition-transform object-cover">
<div>
<h3 class="text-lg font-bold text-stone-800 dark:text-stone-100 drop-shadow-md">Mark D.</h3>
<p class="text-sm text-stone-700 dark:text-stone-300">88% Match - Gamer, Coder</p>
</div>
<svg class="ml-auto w-6 h-6 text-amber-700 dark:text-orange-400 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
<!-- Footer Control Panel - Mimics a metallic plate with buttons -->
<div class="mt-8 p-4 sm:p-5 md:p-6 rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 dark:from-stone-600 dark:to-stone-700 shadow-inner-xl border border-amber-600 dark:border-stone-500 flex flex-wrap justify-center gap-4 relative transform rotate-x-2 translate-z-5">
<button class="p-3 sm:p-4 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-7 h-7 text-stone-800 dark:text-stone-300 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Add Data</span>
</button>
<button class="p-3 sm:p-4 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-7 h-7 text-stone-800 dark:text-stone-300 group-hover:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582M15 15h5v-.582m-9-3.5a9 9 0 110-18 9 9 0 010 18z"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Refresh</span>
</button>
<button class="p-3 sm:p-4 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-7 h-7 text-stone-800 dark:text-stone-300 group-hover:animate-ping-once" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8H7m14 0a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v2zm-2 4H7m4 2a2 2 0 01-2-2V8a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2z"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Share Info</span>
</button>
</div>
</div>
</div>
<style>
/* Custom Keyframes for Skeuomorphism */
@keyframes shadow-pulse {
0% { filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.4)); }
50% { filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.8)); }
100% { filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.4)); }
}
.animate-shadow-pulse { animation: shadow-pulse 3s infinite ease-in-out; }
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 10s linear infinite; }
@keyframes pulse-light {
0% { transform: rotate(135deg) scale(0.9); opacity: 0.8; }
50% { transform: rotate(135deg) scale(1.1); opacity: 1; }
100% { transform: rotate(135deg) scale(0.9); opacity: 0.8; }
}
.animate-pulse-light { animation: pulse-light 2s infinite ease-in-out; }
@keyframes rotate-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-rotate-slow { animation: rotate-slow 20s linear infinite; }
@keyframes grow {
0% { transform: scaleY(0); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
.animate-grow { animation: grow 0.5s ease-out forwards; }
@keyframes ping-once {
0% { transform: scale(1); opacity: 1; }
75%, 100% { transform: scale(2); opacity: 0; }
}
.group-hover\:animate-ping-once:hover > svg { animation: ping-once 1s cubic-bezier(0, 0, 0.2, 1); }
/* Custom shadow-inner-xl for deep inset look */
.shadow-inner-xl {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
inset 0 -2px 4px 0 rgba(255, 255, 255, 0.7),
inset 0 4px 8px 0 rgba(0, 0, 0, 0.1),
inset 0 -4px 8px 0 rgba(255, 255, 255, 0.4);
}
.dark .shadow-inner-xl {
box-shadow: inset 0 2px 4px 0 rgba(255, 255, 255, 0.1),
inset 0 -2px 4px 0 rgba(0, 0, 0, 0.6),
inset 0 4px 8px 0 rgba(255, 255, 255, 0.05),
inset 0 -4px 8px 0 rgba(0, 0, 0, 0.3);
}
/* Custom shadow-inset for a softer inset look */
.shadow-inset {
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1),
inset 0 -1px 2px 0 rgba(255, 255, 255, 0.5);
}
.dark .shadow-inset {
box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
}
/* Skew transforms for the overall container to give angled feel */
.perspective-1000 {
perspective: 1000px;
}
.rotate-x-3 {
transform: rotateX(3deg);
}
.rotate-y-2 {
transform: rotateY(2deg);
}
.translate-z-10 {
transform: translateZ(10px);
}
.rotate-x-2 {
transform: rotateX(2deg);
}
.-rotate-x-3 {
transform: rotateX(-3deg);
}
.-rotate-y-2 {
transform: rotateY(-2deg);
}
.-rotate-x-1 {
transform: rotateX(-1deg);
}
/* Remove outline on focus from buttons for cleaner skeuomorphic look, ensure accessibility with shadow/scale */
button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.5), inset 0 0 0 1px rgba(255, 165, 0, 0.8);
}
.dark button:focus-visible {
box-shadow: 0 0 0 3px rgba(120, 120, 120, 0.5), inset 0 0 0 1px rgba(120, 120, 120, 0.8);
}
</style>Composants associés
Composant Infographie
Un composant infographique complexe avec un style de conception Skeuomorphism et une palette de couleurs vives, adapté aux plateformes de commerce électronique. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Il affiche diverses statistiques de produits avec des éléments interactifs.
Composant Infographie
Composant d’infographie avec style brutalisme, contraste élevé, mise en page inhabituelle, réactif avec prise en charge du mode sombre à l’aide de tailwind css
Composant Infographie
Infographie Composant pour portfolio - Material Design, Palette de couleurs analogue, Complexité modérée, Réactif, Prise en charge du thème sombre