Componente de diseño
Un componente de diseño de blog responsivo diseñado con los principios de Material Design, que utiliza un esquema de color monocromático y admite el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de diseño de redes sociales
Un componente de diseño de redes sociales responsivo y complejo inspirado en 3D con colores vibrantes y soporte para temas oscuros utilizando Tailwind CSS. Incluye un encabezado con un logotipo y navegación, un área de contenido principal con tarjetas dinámicas para publicaciones y una barra lateral para perfiles de usuario y temas de tendencia. Cada elemento está diseñado para dar una sensación de profundidad e interacción.
Componentes de diseño
Un componente de diseño de panel receptivo que utiliza microinteracciones y un esquema de color pastel, diseñado para mostrar paneles de control y visualización de datos con soporte para modo oscuro.
Diseño de la cartera de neumorfismo
Un diseño de neumorfismo simple y receptivo para una cartera, compatible con el modo oscuro.