Skeuomorphic Earth Tones Carte du Gouvernement
Un composant de carte simple et réactif avec des éléments de design skeuomorphes et une palette de couleurs de tons de terre, adapté aux sites Web gouvernementaux ou de services publics, avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
<div class="max-w-sm mx-auto p-6 md:p-8 rounded-xl shadow-xl bg-gradient-to-br from-stone-100 to-stone-200 border border-stone-300 transform transition-all duration-300
dark:from-stone-700 dark:to-stone-800 dark:border-stone-600 dark:shadow-2xl
hover:shadow-2xl dark:hover:shadow-lg-dark
relative overflow-hidden
group">
<!-- Top Bevel Effect -->
<div class="absolute inset-0 rounded-xl pointer-events-none
before:absolute before:inset-0 before:rounded-xl before:border before:border-stone-50 dark:before:border-stone-900 before:opacity-70
after:absolute after:inset-0 after:rounded-xl after:border after:border-stone-300 after:opacity-50 after:blur-sm dark:after:border-stone-700"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-20 h-20 bg-stone-300 dark:bg-stone-600 rounded-full flex items-center justify-center shadow-inner mb-4
group-hover:scale-105 transition-transform duration-300
relative overflow-hidden animate-pulse-light dark:animate-pulse-dark">
<!-- Inner Light Source Effect -->
<div class="absolute inset-0 rounded-full
before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-white/70 before:to-transparent before:p-0.5 before:blur-sm
after:absolute after:inset-0 after:rounded-full after:bg-gradient-to-tl after:from-black/10 after:to-transparent after:p-0.5 after:blur-sm"></div>
<svg class="h-10 w-10 text-stone-700 dark:text-stone-300 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm4 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" clip-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-2xl font-semibold text-stone-800 dark:text-stone-200 mb-2 drop-shadow-sm">Public Service Info</h2>
<p class="text-stone-600 dark:text-stone-400 text-sm mb-6 leading-relaxed">
Access essential information and services provided by your local government. Committed to serving the community.
</p>
<button type="button" class="py-2 px-6 rounded-lg text-sm font-medium
bg-gradient-to-br from-green-600 to-green-700 text-white shadow-md
border border-green-800
dark:from-green-700 dark:to-green-800 dark:border-green-900 dark:shadow-lg-dark
hover:from-green-700 hover:to-green-800 hover:shadow-lg
dark:hover:from-green-800 dark:hover:to-green-900
active:scale-95 active:shadow-inner transition-all duration-150
relative overflow-hidden
brightness-100 group-hover:brightness-105">
<!-- Button Bevel Effect -->
<span class="absolute inset-0 rounded-lg pointer-events-none
before:absolute before:inset-0 before:rounded-lg before:border-t before:border-white/30 dark:before:border-white/20
after:absolute after:inset-0 after:rounded-lg after:border-b after:border-black/20 dark:after:border-black/30"></span>
<span class="relative z-10">Learn More</span>
</button>
</div>
</div>
</div>
<style>
/* Basic keyframes for a subtle glow/pulse effect for skeuomorphic elements */
@keyframes pulse-light {
0%, 100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0.4), inset 0 0 5px rgba(0, 0, 0, 0.1); }
50% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0px 8px rgba(0, 0, 0, 0.15); }
}
@keyframes pulse-dark {
0%, 100% { box-shadow: 0 0 0px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.05); }
50% { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0px 8px rgba(255, 255, 255, 0.1); }
}
.animate-pulse-light {
animation: pulse-light 4s infinite ease-in-out;
}
.dark .animate-pulse-dark {
animation: pulse-dark 4s infinite ease-in-out;
}
/* Custom shadow for skeuomorphism */
.shadow-xl {
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15), inset 0px 1px 0px rgba(255, 255, 255, 0.6),
inset 0px -1px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.05);
}
.group:hover .shadow-2xl {
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.2), inset 0px 1px 0px rgba(255, 255, 255, 0.7),
inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 1px rgba(0, 0, 0, 0.08);
}
.dark .shadow-2xl-dark {
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.05) /* Light bevel */,
inset 0px -1px 0px rgba(0, 0, 0, 0.6) /* Dark bevel */, 0px 1px 1px rgba(0, 0, 0, 0.1);
}
.dark .group:hover .shadow-lg-dark {
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.08) /* Light bevel */,
inset 0px -1px 0px rgba(0, 0, 0, 0.7) /* Dark bevel */, 0px 1px 1px rgba(0, 0, 0, 0.15);
}
/* Inner shadow for "pressed" effect on active button */
.active\:shadow-inner {
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px -2px 4px rgba(255, 255, 255, 0.1);
}
.dark .active\:shadow-inner {
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4), inset 0px -2px 4px rgba(255, 255, 255, 0.05);
}
</style>Composants associés
Tableau de bord des composants fonctionnels
Un composant de tableau de bord réactif conçu selon les principes de Material Design et une palette de couleurs monochromatiques. Il propose des mises en page basées sur une grille, des éléments interactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Neon_Glow_Marketplace_Component
Un composant de marché complexe avec des éléments lumineux et lumineux et une palette de couleurs triadique, conçu pour les plates-formes multifournisseurs. Les fonctionnalités incluent des cartes de produits, des catégories, des recherches et des profils d’utilisateurs, tous réactifs et avec prise en charge du mode sombre.
Composants fonctionnels
Une fiche produit e-commerce simple et réactive inspirée de la 3D, avec une palette de couleurs analogue, prenant en charge le mode sombre.