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 della lista dei desideri di Cyberpunk
Un complesso componente della lista dei desideri a tema cyberpunk per applicazioni di criptovaluta/blockchain, caratterizzato da sfondi scuri, accenti di gioiello al neon e design reattivo con supporto per la modalità oscura.
Componente Lista dei desideri
Componente della lista dei desideri dello scheumorfismo complesso con combinazione di colori complementari, per scopi di social media. Reattivo, con supporto per il tema scuro.
Componente Lista dei desideri
Un componente per la lista dei desideri dal design minimalista/piatto con effetti reattivi e supporto per temi scuri.