Spalten-Komponente
Eine Spaltenkomponente im Material Design-Stil mit responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.
HTML-Code
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Column 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 1. It uses Material Design principles for styling and responsiveness.</p>
</div>
<!-- Column 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 2. The columns are responsive, adapting to different screen sizes.</p>
</div>
<!-- Column 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Column 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is the content for column 3. Dark mode is supported, changing the background and text colors.</p>
</div>
</div>
</div>Verwandte Komponenten
Spalten-Komponente
Eine responsive Spaltenkomponente, die nach Material Design-Prinzipien entwickelt wurde und Tailwind CSS für das Styling, die Unterstützung dunkler Designs und reaktionsschnelle Animationen verwendet.
Komponente "Brutalistische Säulen"
Eine komplexe Spaltenkomponente in einem brutalistischen Design mit einem monochromen Farbschema, das sich für den Konsum von Blogs oder Inhalten eignet. Das Design zeichnet sich durch einen hohen Kontrast und ungewöhnliche Layouts aus und unterstützt den Dunkelmodus.
Spalten-Komponente
Responsive Columns-Komponente mit Glassmorphism-Stil, triadischem Farbschema, einfacher Komplexitätsstufe für Business-/Corporate-Zwecke, einschließlich Unterstützung des Dunkelmodus.