Composants fonctionnels
Un composant fonctionnel avec un design skeuomorphique, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-lg mx-auto">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full w-12 h-12 border-4 border-white dark:border-gray-900 shadow-md">
<h2 class="ml-4 text-xl font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-inner">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">About</h3>
<p class="text-gray-600 dark:text-gray-400">
A brief description of the user or content, styled in a way that mimics a card.
</p>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Photos</h3>
<div class="grid grid-cols-2 gap-2 mt-2">
<img src="https://picsum.photos/200?random=1" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=2" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=3" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=4" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
</div>
</div>
</div>Composants associés
Commandes du lecteur de musique Glassmorphic
Un composant de contrôle de lecteur de musique glassmorphic avec des tons sépia/brun, avec des éléments translucides givrés ressemblant à du verre et des effets de flou. Il est réactif, prend en charge le mode sombre et convient au streaming musical et aux plateformes audio.
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.
Microinteractions_Triadic_Dashboard_Component
Un composant de tableau de bord réactif avec une palette de couleurs triadiques, intégrant des micro-interactions pour l’engagement de l’utilisateur. Comprend des éléments et des commandes de visualisation de données, avec une prise en charge complète du mode sombre.