Neumorpher Social-Media-Container
Eine einfache neumorphe Containerkomponente für soziale Medien mit Graustufenfarben und Unterstützung für den Dunkelmodus.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">
This is a sample post demonstrating the Neumorphism container component with grayscale colors.
It supports dark mode and is designed for social media interfaces.
</p>
<img class="w-full h-48 object-cover rounded-md shadow-neumorphic-light dark:shadow-neumorphic-dark mb-4" src="https://picsum.photos/400/200" alt="Post Image">
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span class="flex items-center space-x-1">
<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>
<span>1.2K Likes</span>
</span>
<span class="flex items-center space-x-1">
<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="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H6z" clip-rule="evenodd" />
</svg>
<span>240 Comments</span>
</span>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #acacac,
-8px -8px 16px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #4a4a4a,
-8px -8px 16px #1a1a1a;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #acacac,
inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #4a4a4a,
inset -5px -5px 10px #1a1a1a;
}
</style>Verwandte Komponenten
Skeuomorphic_E-commerce_Container
Skeuomorphe E-Commerce-Container-Komponente in Pastelltönen mit Unterstützung des Dunkelmodus
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.