Componente contenitore neumorfico
Un componente contenitore neumorfico reattivo per mostrare lavori o prodotti, progettato con una combinazione di colori triadica e il supporto del tema scuro, utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="bg-gray-300 dark:bg-gray-900 shadow-neumorphic rounded-lg p-6 w-full max-w-md">
<div class="flex flex-col items-center justify-center mb-4">
<img src="https://picsum.photos/200/150" alt="Portfolio Item" class="rounded-lg mb-2 shadow-neumorphic">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Portfolio Item Title</h2>
<p class="text-gray-600 dark:text-gray-400">A brief description of the portfolio item goes here. It showcases the work done and highlights key features.</p>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-neumorphic">
<span class="ml-2 text-gray-800 dark:text-gray-200">John Doe</span>
</div>
<div class="mt-4">
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline transition ease-in-out duration-200">View Details</a>
</div>
</div>
</div>
<style>
.shadow-neumorphic {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3),
-8px -8px 15px rgba(255, 255, 255, 0.5);
}
</style>Componenti correlati
Neon_Glow_Healthcare_Container_Component
Un componente contenitore complesso e reattivo per applicazioni sanitarie con una combinazione di colori neon/bagliore in bianco e nero e un accento vibrante. Presenta più elementi interattivi, supporto per la modalità oscura e HTML semantico.
Componente contenitore 3D
Un componente contenitore reattivo per dashboard con una combinazione di colori vivaci ed elementi di progettazione 3D, che supporta la modalità oscura.
Contenitore Neumorfico per Social Media
Un semplice componente contenitore neumorfico per i social media, con colori in scala di grigi e supporto per la modalità scura.