CCHub Logo CCHub Tailwind Collection
Komponenten Container Container-Komponente

Container-Komponente

Ein reaktionsschneller Dark-Mode-Container für Blog-Inhalte mit einem einfachen Graustufendesign.

Vorschau

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>

Verwandte Komponenten

Playful_Blog_Container

Ein verspielter und fröhlicher Blog-Content-Container mit abgerundeten Elementen und bonbonartigen Farben, der zum Lesen und Konsumieren von Inhalten konzipiert ist. Es reagiert vollständig und unterstützt den Dunkelmodus.

Offen

Skeuomorpher Behälter

Eine reaktionsschnelle Containerkomponente mit Skeuomorphismus-Design und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Offen

3D-Container-Komponente

Eine reaktionsschnelle Containerkomponente für Dashboards mit einem lebendigen Farbschema und 3D-Designelementen, die den Dunkelmodus unterstützt.

Offen