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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 1</h2>
<img src="https://picsum.photos/200?random=1" alt="Image 1" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 1.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 2</h2>
<img src="https://picsum.photos/200?random=2" alt="Image 2" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 2.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 3</h2>
<img src="https://picsum.photos/200?random=3" alt="Image 3" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 3.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Profile</h2>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-20 h-20 rounded-full mb-2">
<p class="text-gray-600 dark:text-gray-400">User Name</p>
<p class="text-gray-500 dark:text-gray-500">User Email</p>
</div>
</div>
</div>Composants associés
Composants fonctionnels
Un composant de médias sociaux conçu avec le style Brutalism et les couleurs pastel, doté d’une interface complexe pour les interactions, avec prise en charge du mode sombre.
Composant fonctionnel du blog
Composant fonctionnel avec conception 3D, palette de couleurs complémentaire, complexité modérée pour les blogs, réactif avec prise en charge du thème sombre. Pas de JS, juste du HTML et du Tailwind.
Composants fonctionnels
Un composant Web imitant ses homologues du monde réel dans un style d’entreprise avec une palette de couleurs complémentaire, une mise en page simple et un design réactif avec prise en charge du mode sombre.