Skeuomorphic_Fashion_Card
Une carte d’affichage de contenu simple et réactive pour les produits de mode/beauté, conçue avec une esthétique skeuomorphe utilisant des tons bleus d’entreprise. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex justify-center items-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950">
<div class="w-full max-w-sm mx-auto rounded-3xl p-6
bg-gradient-to-br from-blue-100 to-blue-300 shadow-2xl shadow-blue-400/50
dark:from-blue-900 dark:to-blue-700 dark:shadow-blue-950/80
transform transition-all duration-300 hover:scale-[1.02] hover:shadow-blue-500/60 dark:hover:shadow-blue-900/90
relative overflow-hidden border-2 border-blue-200 dark:border-blue-800">
<!-- Inner Bevel Top-Left -->
<div class="absolute inset-0 rounded-3xl
shadow-inner shadow-blue-50/50 dark:shadow-blue-800/50
pointer-events-none"
style="box-shadow: inset 5px 5px 10px rgba(255,255,255,0.3), inset -5px -5px 10px rgba(0,0,0,0.1);">
</div>
<!-- Inner Bevel Bottom-Right for Dark Mode -->
<div class="absolute inset-0 rounded-3xl
dark:shadow-inner dark:shadow-blue-950/50
pointer-events-none"
style="box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3), inset 5px 5px 10px rgba(255,255,255,0.1);">
</div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-32 h-32 rounded-full overflow-hidden mb-4
border-4 border-blue-300 dark:border-blue-700
shadow-xl shadow-blue-400/40 dark:shadow-blue-950/70
transform transition-all duration-300 hover:scale-105">
<img src="https://picsum.photos/id/78/200/200" alt="Product Image" class="w-full h-full object-cover">
</div>
<h3 class="text-xl md:text-2xl font-bold mb-2 text-blue-800 dark:text-blue-200 drop-shadow-md">
AquaBloom Moisturizer
</h3>
<p class="text-sm text-blue-700 dark:text-blue-300 mb-4 px-2 tracking-wide">
Infused with deep-sea minerals for radiant, hydrated skin.
</p>
<div class="mb-4">
<span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100 drop-shadow-lg">$49.99</span>
</div>
<button type="button" class="w-full px-6 py-3 rounded-full text-lg font-semibold
bg-gradient-to-br from-blue-600 to-blue-800 text-white
shadow-xl shadow-blue-700/50 dark:shadow-blue-900/70
active:bg-gradient-to-tl active:from-blue-700 active:to-blue-900
transform transition-all duration-200
hover:scale-[1.02] hover:shadow-blue-800/60 dark:hover:shadow-blue-800/80
relative overflow-hidden
before:absolute before:inset-0 before:bg-white before:bg-opacity-0 hover:before:bg-opacity-10 before:rounded-full before:transition-all before:duration-300">
Add to Cart
</button>
<div class="mt-4 flex gap-x-2 text-blue-700 dark:text-blue-300">
<svg class="w-5 h-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.817 2.042a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.042a1 1 0 00-1.176 0l-2.817 2.042c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<span>4.8 (120 reviews)</span>
</div>
</div>
</div>
</div>Composants associés
Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour la consommation de blog ou de contenu avec un style de conception 3D et la prise en charge du thème sombre.
Carte postale rétro pour les médias sociaux
Un composant de carte postale réactif pour les réseaux sociaux avec une esthétique rétro/vintage des années 80/90, utilisant une palette de couleurs analogue (ciel, sarcelle, violet) avec des accents fuchsia. Dispose d’une prise en charge du mode sombre et d’effets de survol interactifs. Le contenu comprend l’avatar de l’utilisateur, le nom d’utilisateur, l’horodatage, la publication de texte, l’image et les boutons d’action (like, comment, share). Construit avec Tailwind CSS.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu simple et dynamique avec des micro-interactions, un design réactif et une prise en charge du thème sombre, adapté aux blogs et à la consommation de contenu. Utilise picsum.photos pour les images et randomuser.me pour les avatars.