Componente Visualizzatore file
Un componente per la visualizzazione di file scheumorfiche con una combinazione di colori pastello, progettato per l'e-commerce, con layout reattivo e supporto per la modalità scura. Imita una cartella fisica con schede e un'area di contenuto.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950 dark:to-purple-950 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-6 sm:p-8 lg:p-10 flex flex-col transform perspective-1000 -rotate-x-3 duration-500 hover:rotate-x-0 hover:translate-y-2 relative overflow-hidden">
<!-- Top 'Folder Tab' Element -->
<div class="absolute -top-4 left-1/2 -translate-x-1/2 w-48 h-12 bg-gradient-to-br from-blue-200 to-indigo-200 dark:from-blue-700 dark:to-indigo-700 rounded-t-lg shadow-inner border border-blue-300 dark:border-blue-600 flex items-center justify-center transform skew-x-12 -rotate-2 origin-bottom-left group-hover:skew-x-0 group-hover:rotate-0 transition-all duration-300">
<span class="text-white font-semibold text-sm drop-shadow-md">Product Details</span>
</div>
<!-- Main Content Area - Mimics a paper sheet -->
<div class="relative bg-white dark:bg-gray-850 rounded-lg p-6 sm:p-8 pt-12 sm:pt-16 pb-6 shadow-inner-lg shadow-gray-200 dark:shadow-gray-900 border border-t-4 border-gray-100 dark:border-gray-700 dark:border-t-4 dark:border-gray-600 flex flex-col md:flex-row gap-6 sm:gap-8 lg:gap-10 overflow-hidden transform skew-y-1 -rotate-1 origin-top-left group-hover:skew-y-0 group-hover:rotate-0 transition-all duration-300">
<!-- Left: Product Image Placeholder -->
<div class="md:w-1/2 relative group">
<img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto rounded-md shadow-md border-4 border-gray-100 dark:border-gray-700 transform hover:scale-105 transition-transform duration-300 ease-in-out glow-on-hover">
<div class="absolute bottom-2 right-2 p-2 bg-gradient-to-br from-pink-200 to-orange-200 dark:from-pink-700 dark:to-orange-700 rounded-full shadow-lg border border-pink-300 dark:border-pink-600 transform scale-0 group-hover:scale-100 transition-transform duration-300 translate-y-2">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
</div>
<!-- Right: Product Details -->
<div class="md:w-1/2 flex flex-col justify-between">
<div>
<h2 class="text-2xl sm:text-3xl font-bold mb-3 text-blue-800 dark:text-blue-200 drop-shadow-sm">Vintage Leather Satchel</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4 text-sm sm:text-base leading-relaxed tracking-wide">
Crafted with genuine full-grain leather, this satchel combines timeless elegance with modern utility.
Perfect for the discerning professional seeking both style and durability. Features multiple compartments
and adjustable straps.
</p>
<div class="flex items-center mb-4">
<span class="text-xl sm:text-2xl font-bold text-green-700 dark:text-green-300 mr-2">$129.99</span>
<span class="text-gray-500 dark:text-gray-400 line-through text-sm">$149.99</span>
</div>
<!-- Rating Area -->
<div class="flex items-center mb-4">
<div class="flex space-x-1 text-orange-400 dark:text-orange-300">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 ml-2">(4.5 / 5.0)</span>
</div>
</div>
<!-- Add to Cart Button -->
<button class="w-full py-3 px-6 bg-gradient-to-br from-green-300 to-teal-300 dark:from-green-600 dark:to-teal-600 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border-b-4 border-green-500 dark:border-green-800 active:translate-y-0 active:shadow-md active:border-b-0 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75 relative group">
Add to Cart
<svg class="w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="absolute top-0 left-0 w-full h-full bg-white dark:bg-gray-800 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-20 rounded-lg"></span>
</button>
</div>
<!-- Corner 'Paper Clip' Element -->
<div class="absolute top-1 right-2 w-8 h-8 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-500 transform rotate-45 -translate-y-2 translate-x-2 animate-bounce-custom"></div>
<!-- Bottom Edge Shadow -->
<div class="absolute bottom-0 left-0 right-0 h-4 bg-gray-100 dark:bg-gray-700 opacity-75 rounded-b-lg blur-sm"></div>
</div>
</div>
<style>
.perspective-1000 {
perspective: 1000px;
}
.shadow-inner-lg {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 8px 0 rgba(0, 0, 0, 0.06);
}
.dark .shadow-inner-lg {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.glow-on-hover {
transition: box-shadow 0.3s ease-in-out;
}
.glow-on-hover:hover {
box-shadow: 0 0 15px rgba(255, 204, 204, 0.7), 0 0 25px rgba(255, 153, 153, 0.5);
}
.dark .glow-on-hover:hover {
box-shadow: 0 0 15px rgba(200, 100, 100, 0.7), 0 0 25px rgba(150, 50, 50, 0.5);
}
@keyframes bounce-custom {
0%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
50% { transform: rotate(45deg) translate(2px, 2px); }
}
.animate-bounce-custom {
animation: bounce-custom 2s infinite ease-in-out;
}
</style>
</div>Componenti correlati
Componente Visualizzatore file
Un componente nostalgico per la visualizzazione di file ispirato all'estetica retrò degli anni '80/'90, progettato con Tailwind CSS e che supporta effetti reattivi e temi scuri.
Componente Visualizzatore file
Un componente complesso per la visualizzazione di file progettato per un portfolio, dotato di modalità scura con colori complementari, che mostra un albero di file, un'anteprima del contenuto e informazioni dettagliate. Completamente reattivo.
Componente Visualizzatore file
Un componente di visualizzazione file complesso e reattivo con uno stile aziendale/professionale, combinazione di colori analoga e supporto per la modalità scura, adatto per ambienti aziendali.