Composant modal skeuomorphe
Un composant modal réactif complexe stylisé dans un design skeuomorphe avec des couleurs complémentaires pour le commerce électronique.
HTML Code
<div class="fixed inset-0 flex items-center justify-center z-50 bg-opacity-50 bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-11/12 md:w-1/3">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Item Details</h2>
<div class="flex justify-center my-4">
<img src="https://picsum.photos/200/300" alt="Product Image" class="rounded-lg shadow-md" />
</div>
<p class="text-gray-600 dark:text-gray-300">This is where you can detail the product features, specifications, and other necessary information to help customers make an informed decision.</p>
<ul class="my-4 text-gray-700 dark:text-gray-200">
<li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 1</li>
<li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 2</li>
<li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 3</li>
</ul>
<div class="flex items-center justify-between my-4">
<span class="text-lg font-bold text-gray-800 dark:text-gray-100">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex justify-center my-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" />
<span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
</div>
<button class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 rounded">Close</button>
</div>
</div>Composants associés
Modal de médias sociaux skeuomorphe
Un composant modal skeuomorphe modérément complexe, réactif et conçu pour les interactions sur les réseaux sociaux, doté d’une palette de couleurs complémentaire et d’une prise en charge du mode sombre.
Healthcare_Medical_Modal_Component
Un composant modal complexe et réactif pour les applications médicales/de santé, inspiré du Material Design avec une palette de couleurs Sunset/Warm. Comprend des éléments de formulaire, des images et la prise en charge du mode sombre.
Paper_Print_Inspired_Autumn_Modal_Component
Un composant modal complexe et réactif inspiré du papier et des matériaux imprimés, avec des couleurs automnales. Conçu pour les plates-formes éducatives, il inclut la prise en charge du mode sombre et du HTML sémantique.