Componente Schede prodotto
Un componente di schede prodotto complesso e reattivo con un design aziendale/professionale che utilizza una combinazione di colori viola/viola, adatto per elenchi di prodotti di notizie o servizi professionali. Include il supporto per la modalità oscura.
Codice HTML
<div class="font-sans antialiased bg-purple-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-12 lg:py-20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 sm:mb-16 lg:mb-20">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-900 dark:text-purple-300 mb-4 sm:mb-6 leading-tight">
Our Premium Offerings
</h2>
<p class="text-lg sm:text-xl text-purple-700 dark:text-purple-400 max-w-2xl mx-auto">
Discover a curated selection of our most advanced and robust solutions designed to empower your business.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">
<!-- Product Card 1 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
<a href="#" class="block relative group overflow-hidden">
<img src="https://picsum.photos/600/400?random=1" alt="Advanced Analytics Platform" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
<p class="text-white font-semibold text-lg">Explore Now</p>
</div>
</a>
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
<a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Advanced Analytics Platform</a>
</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Unleash deep insights with our cutting-edge AI-powered analytics, transforming raw data into actionable knowledge.
</p>
</div>
<div class="mt-auto">
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
<svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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="M9.75 17L9.25 10m-3.25 7V10m6.5 7V10m2 7V10m-2 2a2 2 0 11-4 0 2 2 0 014 0zM12 2a10 10 0 100 20 10 10 0 000-20z" />
</svg>
<span class="font-medium text-purple-600 dark:text-purple-400">Data Science</span> · <time datetime="2023-10-26">Oct 26, 2023</time>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">By John Doe</span>
</div>
<button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Learn More
</button>
</div>
</div>
</div>
</article>
<!-- Product Card 2 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
<a href="#" class="block relative group overflow-hidden">
<img src="https://picsum.photos/600/400?random=2" alt="Secure Cloud Solutions" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
<p class="text-white font-semibold text-lg">Discover Security</p>
</div>
</a>
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
<a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Secure Cloud Infrastructure</a>
</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Fortify your digital assets with our robust, scalable, and highly secure cloud computing environments.
</p>
</div>
<div class="mt-auto">
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
<svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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="M5 13l4 4L19 7" />
</svg>
<span class="font-medium text-purple-600 dark:text-purple-400">Cybersecurity</span> · <time datetime="2023-10-25">Oct 25, 2023</time>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">By Jane Smith</span>
</div>
<button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Learn More
</button>
</div>
</div>
</div>
</article>
<!-- Product Card 3 -->
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
<a href="#" class="block relative group overflow-hidden">
<img src="https://picsum.photos/600/400?random=3" alt="Enterprise AI Solutions" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
<div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
<p class="text-white font-semibold text-lg">Get Started</p>
</div>
</a>
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
<a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Enterprise AI Automation</a>
</h3>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Revolutionize workflows and boost efficiency with intelligent automation powered by our bespoke AI models.
</p>
</div>
<div class="mt-auto">
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
<svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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="M9.663 17h4.673M12 9v6m-3-4h6m4 0a10 10 0 11-20 0 10 10 0 0120 0z" />
</svg>
<span class="font-medium text-purple-600 dark:text-purple-400">Artificial Intelligence</span> · <time datetime="2023-10-24">Oct 24, 2023</time>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/29.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">By David Lee</span>
</div>
<button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
Learn More
</button>
</div>
</div>
</div>
</article>
</div>
</div>
</div>Componenti correlati
Componente Schede prodotto
Un componente della scheda prodotto reattivo con design Glassmorphism, combinazione di colori in scala di grigi e supporto per temi scuri. Include più elementi interattivi adatti alle interfacce dei social media, come l'immagine del prodotto, il titolo, la descrizione, il prezzo e il pulsante Aggiungi al carrello. Il design utilizza elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Non viene utilizzato alcun Javascript, solo HTML con classi CSS Tailwind.
Componente Schede prodotto
Un componente complesso della scheda prodotto caratterizzato da microinterazioni coinvolgenti e una combinazione di colori monocromatica. Progettato per i siti Web aziendali, è reattivo e supporta la modalità oscura.
ArtDeco_ProductCards_Music
Componente di schede prodotto semplice e reattivo con un'estetica Art Déco, caratterizzato da motivi geometrici e una combinazione di colori tramonto/caldo, adatto per piattaforme musicali e audio. Include il supporto per la modalità oscura.