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 de carte de travail analogue skeuomorphe
Un composant de carte de travail réactif avec un style de conception skeuomorphe, utilisant une palette de couleurs analogue, adapté aux sites d’emploi et aux plateformes de développement de carrière. Inclut la prise en charge du mode sombre.
Fiche produit Skeuomorphic
Un composant de carte produit skeuomorphe pour un tableau de bord, stylisé en niveaux de gris, de complexité moyenne, réactif avec le mode sombre.
Composant Cartes de produit
Un composant de cartes produit de style brutaliste avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.