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 visualizzatore di file reattivo progettato in uno stile brutalista, con supporto per temi scuri e utilizzando Tailwind CSS.
Componente Visualizzatore file
Un componente per la visualizzazione di file retrò/vintage progettato per applicazioni di e-commerce. È dotato di una combinazione di colori monocromatica, un design reattivo e il supporto per la modalità oscura.
Componente Visualizzatore file neumorfismo
Un componente visualizzatore di file in stile neumorfismo per i social media con una combinazione di colori complementari e una complessità moderata. È reattivo e supporta il tema scuro utilizzando Tailwind CSS.