Komponente "Inhaltsanzeige"
Eine Content-Display-Komponente, die in einem skeuomorphen Stil für den E-Commerce mit einem dunklen Thema entworfen wurde. Es präsentiert Produkte mit minimalen Elementen und verwendet ein analoges Farbschema für eine ansprechende Ästhetik.
HTML-Code
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<div class="flex flex-col justify-center items-center">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
<div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
<p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
</div>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Komponenten für die Inhaltsanzeige"
Eine einfache, reaktionsschnelle Komponente zur Anzeige von Inhalten mit einem Glasmorphismus-Effekt, Unterstützung für dunkle Themen und einem komplementären Farbschema, geeignet für Blogs oder den Konsum von Inhalten.
SimpleContentDisplay
Eine einfache Inhaltsanzeigekomponente mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.
Komponente "Inhaltsanzeige"
Eine Komponente im Glassmorphism-Stil für die Anzeige von Portfolioinhalten mit interaktiven Elementen, die den Dunkelmodus unterstützt.