Componente modale scheumorfico
Un componente modale reattivo complesso con un design scheumorfico con colori complementari per l'e-commerce.
Codice HTML
<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>Componenti correlati
Componente modale modalità oscura
Un componente modale in modalità oscura semplice e reattivo progettato per la lettura e il consumo di contenuti. Presenta una combinazione di colori complementari e un layout minimale, adatto per blog o siti Web basati sui contenuti.
Componente modale
Un componente modale reattivo con microinterazioni e combinazione di colori triadica, progettato per le interfacce dei social media. Presenta animazioni che coinvolgono gli utenti durante l'interazione e fornisce supporto per il tema scuro utilizzando Tailwind CSS.
Modale di progettazione dei materiali
Un componente modale in stile Material Design con design reattivo e supporto per temi scuri. Include una sovrapposizione modale, un contenitore modale con un aspetto simile a una carta e un pulsante di chiusura. Non è incluso alcun JavaScript.