Composants de mise en page
Il s’agit d’un composant de mise en page complexe conçu pour les blogs et la consommation de contenu, avec des micro-interactions et une palette de couleurs complémentaires. Il comprend divers éléments interactifs et prend en charge le mode sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen">
<header class="bg-blue-500 dark:bg-blue-700 p-4 shadow-md transition-colors duration-300">
<h1 class="text-white text-2xl font-bold">My Blog</h1>
<nav class="mt-2">
<ul class="flex space-x-4">
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Home</a></li>
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">About</a></li>
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Contact</a></li>
</ul>
</nav>
</header>
<main class="py-10 px-4 sm:px-8 lg:px-16">
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is a brief description of the blog post. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200?2" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Another Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is another brief description. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200?3" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Yet Another Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of yet another blog post. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
</section>
</main>
<footer class="bg-blue-500 dark:bg-blue-700 p-4 text-center text-white">
<p>© 2023 My Blog</p>
</footer>
</div>Composants associés
Composant Composants de mise en page
Un composant de mise en page de portfolio réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue et conçu pour une complexité moyenne avec des fonctionnalités interactives pour présenter des travaux ou des produits.
Composant de mise en page du tableau de bord
Une mise en page de tableau de bord réactive avec l’esthétique de Material Design, y compris une barre latérale, un en-tête et une zone de contenu principal. Il prend en charge le mode sombre et utilise des couleurs complémentaires pour un look équilibré. La complexité est modérée avec des fonctionnalités de type interactif réalisées uniquement avec des classes CSS et Tailwind.
Composants de mise en page
Un composant de mise en page de tableau de bord réactif qui utilise des micro-interactions et une palette de couleurs pastel, conçu pour afficher la visualisation des données et les panneaux de contrôle avec prise en charge du mode sombre.