Componente de contenedor
Un contenedor de modo oscuro responsivo para el contenido del blog con un diseño simple en escala de grises.
Código HTML
<div class="container mx-auto p-4 dark:bg-gray-900 bg-white text-gray-800 dark:text-gray-200 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold mb-4 text-center">Blog Post Title</h1>
<img src="https://picsum.photos/seed/unsplash/800/400" alt="Blog Post Image" class="w-full h-auto rounded-md mb-4">
<div class="prose dark:prose-invert max-w-none">
<p>This is an example of a blog post content paragraph within the container. It demonstrates a simple layout for reading and content consumption in dark mode.</p>
<p>The container is designed to be responsive and uses Tailwind CSS classes for styling, including dark mode support with the <code class="language-text">dark:</code> prefix.</p>
<p>Grayscale colors are used for a clean and minimalist look.</p>
</div>
</div>Componentes relacionados
Componente de contenedor
Un componente contenedor receptivo con microinteracciones que presenta animaciones atractivas que reaccionan a las acciones del usuario, admite el modo oscuro y usa Tailwind CSS.
Contenedor de redes sociales
Un componente contenedor responsivo con colores vibrantes, microinteracciones atractivas y compatibilidad con temas oscuros, adecuado para interfaces de redes sociales. Las características incluyen sutiles efectos de desplazamiento y un diseño limpio.
Componente de contenedor 3D
Un componente contenedor receptivo para tableros con una combinación de colores vibrantes y elementos de diseño 3D, compatible con el modo oscuro.