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
Composants fonctionnels
Un composant de tableau de bord avec des composants fonctionnels utilisant les principes de conception matérielle, une palette de couleurs analogue et une complexité modérée. Le composant comprend une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
Point culminant de la fonctionnalité de jeu
Une fonctionnalité de jeu réactive met en évidence un composant avec un design épuré et minimaliste mettant l’accent sur la typographie et un système de grille, en utilisant des neutres chauds et en prenant en charge le mode sombre. Comprend une grande image, un titre, une description et un bouton d’action.
Composants fonctionnels
Composant fonctionnel pour le commerce électronique avec un design réactif et la prise en charge du thème sombre.