Componente della descrizione comando skeuomorfa
Un componente di tooltip complesso progettato con uno stile scheumorfico e toni della terra, adatto per applicazioni di e-commerce con supporto per la modalità scura.
Codice HTML
<div class="relative group">
<img src="https://picsum.photos/200/200?random=1" alt="Product Image" class="w-40 h-40 rounded-lg shadow-lg">
<div class="absolute z-10 hidden group-hover:flex flex-col items-center p-4 bg-gray-800 bg-opacity-80 border border-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white mb-2">
<h3 class="text-lg text-earthgreen-200">Product Name</h3>
<p class="text-sm text-earthbrown-200">Brief description of the product goes here. It mimics wood and soil textures for an earthy feel.</p>
<div class="flex space-x-2 mt-2">
<span class="px-3 py-1 text-xs text-white bg-earthbrown-300 rounded-full">Add to Cart</span>
<span class="px-3 py-1 text-xs text-white bg-earthbrown-600 rounded-full">View More</span>
</div>
</div>
</div>Componenti correlati
Componente della descrizione comando
Componente Tooltip con stile Skeuomorphism, Combinazione di colori complementari, Complessità semplice, per E-commerce.
Componente della descrizione comando
Un semplice componente Tooltip reattivo progettato per il consumo di contenuti di blog, caratterizzato da un design 3D con una combinazione di colori in scala di grigi e supporto per la modalità oscura utilizzando Tailwind CSS.
Componente della descrizione comando
Un componente tooltip in stile Neumorfismo per la presentazione del portfolio con supporto per la modalità oscura, design reattivo e utilizzo di Tailwind CSS.