Componente Lista dei desideri
Un componente della lista dei desideri reattivo progettato con elementi 3D, toni della terra e supporto della modalità oscura per mostrare lavori o prodotti.
Codice HTML
<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">
<img src="https://picsum.photos/100/100?random=1" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">
<div class="flex-grow">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of product 1.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>
</li>
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">
<img src="https://picsum.photos/100/100?random=2" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">
<div class="flex-grow">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of product 2.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>
</li>
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">
<img src="https://picsum.photos/100/100?random=3" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">
<div class="flex-grow">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of product 3.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>
</li>
</ul>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Profile</h3>
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-medium text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente Lista dei desideri
Un componente semplicistico della lista dei desideri con un approccio brutalista, utilizzando una combinazione di colori in scala di grigi, progettato per mostrare lavori o prodotti.
Componente Lista dei desideri
Un componente reattivo per la lista dei desideri con lo stile di design Glassmorphism che utilizza Tailwind CSS, che supporta la modalità oscura con effetti simili al vetro smerigliato e immagini segnaposto casuali.
Componente Wishlist - Material Design
Un componente della lista dei desideri ispirato al Material Design con design reattivo e supporto per temi scuri.