Composant Cartes de produit
Il s’agit d’un composant complexe et réactif de cartes de produits avec un design d’entreprise/professionnel utilisant une palette de couleurs violet/violet, adapté aux actualités ou aux listes de produits de services professionnels. Inclut la prise en charge du mode sombre.
HTML Code
<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>
Composants associés
Composant Cartes de produits
Un composant de carte produit réactif avec un style de conception Skeuomorphism, une palette de couleurs de terre et des interactions complexes, adapté à un portefeuille. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.
Composant Cartes de produit
Composant pour les médias sociaux avec une palette de couleurs triadiques sombres et une complexité modérée. Il utilise Tailwind CSS pour une conception réactive avec prise en charge du mode sombre, et inclut des espaces réservés pour les images et les avatars.
Composant Cartes de produit
Un composant de carte produit de style brutalisme avec un contraste élevé, des effets réactifs et une prise en charge du mode sombre.