Composant de mise en page
Un composant de mise en page de blog réactif conçu selon les principes de Material Design, utilisant une palette de couleurs monochromatique et prenant en charge le mode sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-6">
<div class="container mx-auto">
<header class="text-center mb-10">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
<p class="text-gray-600 dark:text-gray-400">Insights, stories, and thoughts</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200?random=1" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. In hac habitasse platea dictumst...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
<article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
<img src="https://picsum.photos/300/200?random=2" alt="Blog post image" class="rounded-md mb-4"/>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Curabitur nec libero vel arcu elementum mattis...</p>
<a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
</article>
</div>
<footer class="mt-10 text-center">
<p class="text-gray-600 dark:text-gray-400">© 2023 My Blog. All rights reserved.</p>
</footer>
</div>
</div>Composants associés
RetroBusinessLayout
Un composant de mise en page à thème rétro/vintage pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et un design simple. Il est réactif et inclut la prise en charge du mode sombre.
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.
Glassmorphism Disposition du tableau de bord
Une disposition simple pour un tableau de bord avec des éléments translucides ressemblant à du verre givré, avec une palette de couleurs pastel et une prise en charge du mode sombre.