Componentes de diseño
Un componente de diseño complejo diseñado para blogs y consumo de contenido, con microinteracciones y una combinación de colores complementaria. Incluye varios elementos interactivos y es compatible con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de diseño 3D
Un componente de diseño 3D receptivo con imágenes atractivas, que incorpora profundidad a través de sombras y capas. Incluye soporte para el modo oscuro y presenta imágenes y avatares aleatorios.
Diseño de portafolio en modo oscuro
Un componente de diseño responsivo en modo oscuro para carteras, con un esquema de color monocromático utilizando Tailwind CSS. Incluye marcadores de posición para el contenido y está diseñado para una complejidad moderada sin JavaScript.
Componente Componentes de diseño
Un componente de diseño de tablero receptivo con un tema oscuro, con una barra lateral y un área de contenido principal. Utiliza un esquema de color triádico para el atractivo visual.