Composant de conteneur neumorphe
Un composant de conteneur Neumorphic réactif pour présenter des travaux ou des produits, conçu avec une palette de couleurs triadique et la prise en charge du thème sombre, à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Composant de conteneur
Un conteneur réactif en mode sombre pour le contenu de blog avec un design simple en niveaux de gris.
Luxury_Container_Component
Un composant de conteneur de luxe et haut de gamme pour les entreprises manufacturières/industrielles, doté d’un design sophistiqué, d’une mise en page réactive, d’une prise en charge du mode sombre et d’un schéma arc-en-ciel dégradé multicolore.
Composant de conteneur
Un composant de conteneur réactif simple pour la consommation de blog/contenu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.