Componente Lista dei desideri
Un componente della lista dei desideri in stile 3D per le interfacce dei social media, con elementi interattivi e supporto per la modalità oscura.
Codice HTML
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
<div class="p-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Wishlist Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the wishlist item or purpose goes here.</p>
</div>
</div>
</div>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 1 - Description</p>
<img src="https://picsum.photos/50/50?image=10" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 2 - Description</p>
<img src="https://picsum.photos/50/50?image=20" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 3 - Description</p>
<img src="https://picsum.photos/50/50?image=30" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
</ul>
<div class="p-4">
<button class="w-full bg-blue-600 dark:bg-blue-500 text-white rounded-lg py-2 hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors">Share Wishlist</button>
</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
Un componente della lista dei desideri reattivo con elementi 3D e colori pastello, che supporta il tema scuro. Include molteplici elementi interattivi adatti all'e-commerce. Niente JavaScript, solo HTML e CSS Tailwind.
Componente Lista dei desideri
Un componente reattivo della lista dei desideri progettato in modalità oscura utilizzando Tailwind CSS. Presenta un layout di carta per gli oggetti con immagini, descrizioni e avatar utente, che supporta il tema scuro e gli effetti reattivi.