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
Composant Composants fonctionnels - Interface utilisateur en mode sombre
Un composant de médias sociaux réactif conçu avec le mode sombre et les tons de terre, adapté aux interfaces de réseaux sociaux. Comprend des avatars d’utilisateurs, du contenu de publication et des boutons d’interaction.
Composants fonctionnels
Un composant de portefeuille minimaliste conçu avec Tailwind CSS, avec une palette de couleurs vives et prenant en charge le mode sombre. Ce composant est destiné à présenter des travaux ou des produits et comprend des images et des espaces réservés d’avatar.