Container-Komponente
Eine minimalistische Containerkomponente für ein Dashboard, das Tailwind CSS mit Unterstützung für den Dunkelmodus verwendet.
HTML-Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 1</h3>
<img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
<p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 2</h3>
<img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
<p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
<h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 3</h3>
<img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
<p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
</div>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">User Name</span>
</div>
<button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-300">Action</button>
</div>
</div>Verwandte Komponenten
Glassmorphism Portfolio Container
Eine reaktionsschnelle Glassmorphism-Container-Komponente mit Unterstützung des Dunkelmodus, die auf eine Portfolio-Website mit Tailwind CSS zugeschnitten ist. Es verfügt über einen Milchglaseffekt, ein triadisches Farbschema, mehrere interaktive Elemente und verwendet picsum.photos für Bilder und randomuser.me für Avatare.
Container-Komponente
Ein einfacher, reaktionsschneller Dashboard-Container mit ansprechenden Mikrointeraktionen und einem dunklen Thema, das sich auf analoge Farben konzentriert.
Material Design E-commerce Container
Eine reaktionsschnelle E-Commerce-Container-Komponente mit einem Produktraster, einer Warenkorbzusammenfassung und Unterstützung für dunkle Themen, die nach den Prinzipien des Material Designs und einem Farbschema in Erdtönen entworfen wurden. Es verfügt über mehrere interaktive Elemente, darunter Produktkarten mit Bildern, Titeln, Preisen und "In den Warenkorb"-Schaltflächen sowie eine Zusammenfassung des Warenkorbs, die mit hinzugefügten Artikeln aktualisiert wird. Das Layout passt sich an unterschiedliche Bildschirmgrößen an, und alle Elemente haben Stile im Dunkelmodus, die mit Tailwind CSS dark:-Präfixen definiert sind.