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

Container-Komponente

Eine einfache, reaktionsschnelle Container-Komponente für den Konsum von Blogs/Inhalten mit Mikrointeraktionen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Skeuomorphic_E-commerce_Container

Skeuomorphe E-Commerce-Container-Komponente in Pastelltönen mit Unterstützung des Dunkelmodus

Offen

Social-Media-Container

Eine reaktionsschnelle Container-Komponente mit lebendigen Farben, ansprechenden Mikrointeraktionen und Unterstützung für dunkle Themen, die sich für Social-Media-Schnittstellen eignet. Zu den Funktionen gehören subtile Hover-Effekte und ein übersichtliches Layout.

Offen