Einfacher Neumorphismus E-Commerce-Medienkomponente
Medienkomponente im Neumorphism-Stil mit Erdtönen, einfacher Komplexität, für E-Commerce-Websites, mit responsivem Design und Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder.
HTML-Code
<div class="p-4 max-w-sm mx-auto bg-gray-200 rounded-xl shadow-lg space-y-4 dark:bg-gray-800">
<div class="relative">
<img class="w-full h-48 object-cover rounded-md shadow-md" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
<button class="absolute top-2 right-2 bg-white text-gray-800 dark:bg-gray-700 dark:text-gray-200 p-1 rounded-full shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="text-center">
<div class="text-lg font-medium text-black dark:text-white">Product Title</div>
<p class="text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<div class="flex justify-center">
<button class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-semibold rounded-lg shadow-md hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
Add to Cart
</button>
</div>
</div>
Verwandte Komponenten
Komponente "Medienkomponenten"
3D-Medienkomponente für soziale Medien mit komplementärem Farbschema, moderater Komplexität und Unterstützung für dunkle Themen.
Minimalistische Medienkomponente
Eine einfache, übersichtliche und reaktionsschnelle Medienkomponente für Unternehmenswebsites mit bonbonfarbenen Farben und Unterstützung für den Dunkelmodus.
Glassmorphism Medienkomponenten Komponente
Glassmorphism Media Component mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS