Composant de conteneur
Un conteneur réactif en mode sombre pour le contenu de blog avec un design simple en niveaux de gris.
HTML Code
<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>Composants associés
Composant de conteneur
Un composant de conteneur de style rétro/vintage pour les portfolios, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.
Glassmorphism Portfolio Conteneur
Un composant de conteneur Glassmorphism réactif avec prise en charge du mode sombre adapté à un site Web de portfolio utilisant Tailwind CSS. Il présente un effet de verre givré, une palette de couleurs triadique, plusieurs éléments interactifs et utilise picsum.photos pour les images et randomuser.me pour les avatars.
Conteneur skeuomorphe
Un composant de conteneur réactif avec une conception Skeuomorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS.