IndustrielVibrantOnglets
Il s’agit d’un composant d’onglets complexe, dynamique et à thème industriel, adapté à une place de marché multi-fournisseurs, présentant des éléments exposés, une esthétique de matière première et des couleurs à haute saturation. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="relative bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8 lg:p-12 font-sans overflow-hidden">
<!-- Background Grids/Patterns for Industrial Feel -->
<div class="absolute inset-0 z-0 overflow-hidden opacity-5 dark:opacity-10">
<div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob dark:from-sky-700 dark:to-blue-900"></div>
<div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000 dark:from-fuchsia-700 dark:to-pink-900"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/4 h-1/4 bg-gradient-to-br from-orange-400 to-red-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000 dark:from-amber-600 dark:to-red-800"></div>
</div>
<div class="absolute inset-0 z-0 pointer-events-none opacity-5 dark:opacity-10">
<svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 L 0 40" fill="none" stroke="#a0a0a0" stroke-width="0.5" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid-pattern)" />
</svg>
</div>
<!-- End Background -->
<div class="relative z-10 max-w-7xl mx-auto bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl rounded-lg p-4 sm:p-6 lg:p-8">
<!-- Component Header -->
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tight drop-shadow-lg">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-cyan-400 dark:to-fuchsia-500">Marketplace Insights</span>
<span class="block text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 mt-2 sm:mt-4">Manage your vendor activities and product listings.</span>
</h2>
<!-- Tabs Navigation -->
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mb-6 sm:mb-8 border-b-2 border-dashed border-gray-300 dark:border-gray-700 pb-4 overflow-x-auto scrollbar-hidden">
<button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-bold transition-all duration-300 ease-in-out
bg-blue-600 text-white shadow-lg shadow-blue-500/50 dark:bg-sky-500 dark:shadow-sky-500/50
hover:bg-blue-700 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-sky-300
border-2 border-blue-700 dark:border-sky-600 whitespace-nowrap">
<i class="fas fa-boxes mr-2"></i> Product Catalog
</button>
<button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
<i class="fas fa-shipping-fast mr-2"></i> Order Management
</button>
<button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
<i class="fas fa-chart-line mr-2"></i> Sales Analytics
</button>
<button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
<i class="fas fa-user-friends mr-2"></i> Vendor Network
</button>
</div>
<!-- Tabs Content (Active Tab: Product Catalog) -->
<div>
<!-- Product Catalog Tab Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-red-500 dark:border-t-rose-600 rounded-lg shadow-md p-5 pb- lg:p-6 relative overflow-hidden group">
<div class="absolute -top-3 -right-3 w-16 h-16 bg-red-500 dark:bg-rose-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
<p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">HOT</p>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/1018/80/80" alt="Product 1" class="w-20 h-20 object-cover rounded-md border-2 border-red-400 dark:border-rose-500 mr-4 shadow-sm">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Heavy Duty Wrench Set</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">SKU: HDWS-V001</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
<p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-blue-600 dark:text-sky-400 font-semibold">ToolCrafters Inc.</span></p>
<p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$129.99</span></p>
<p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(4.5/5)</span></p>
</div>
<button class="w-full bg-red-600 dark:bg-rose-700 text-white py-2 rounded-lg font-semibold hover:bg-red-700 dark:hover:bg-rose-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-rose-500 border-b-4 border-red-800 dark:border-rose-900 shadow-md">
<i class="fas fa-eye mr-2"></i> View Details
</button>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-blue-500 dark:border-t-sky-600 rounded-lg shadow-md p-5 lg:p-6 relative overflow-hidden group">
<div class="absolute -top-3 -right-3 w-16 h-16 bg-blue-500 dark:bg-sky-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
<p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">SALE</p>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/201/80/80" alt="Product 2" class="w-20 h-20 object-cover rounded-md border-2 border-blue-400 dark:border-sky-500 mr-4 shadow-sm">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Automated Robotic Arm</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">SKU: ARA-ELT005</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
<p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-purple-600 dark:text-fuchsia-400 font-semibold">MechWorks Global</span></p>
<p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$2,499.00</span> <span class="text-gray-500 line-through ml-2">$2,999.00</span></p>
<p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(4/5)</span></p>
</div>
<button class="w-full bg-blue-600 dark:bg-sky-700 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 dark:hover:bg-sky-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-sky-500 border-b-4 border-blue-800 dark:border-sky-900 shadow-md">
<i class="fas fa-shopping-cart mr-2"></i> Add to Cart
</button>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-green-500 dark:border-t-emerald-600 rounded-lg shadow-md p-5 lg:p-6 relative overflow-hidden group">
<div class="absolute -top-3 -right-3 w-16 h-16 bg-green-500 dark:bg-emerald-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
<p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">NEW</p>
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/237/80/80" alt="Product 3" class="w-20 h-20 object-cover rounded-md border-2 border-green-400 dark:border-emerald-500 mr-4 shadow-sm">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">High-Precision Lathe Machine</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">SKU: HPLM-XYZ007</p>
</div>
</div>
<div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
<p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-orange-600 dark:text-amber-400 font-semibold">Precision Tools Co.</span></p>
<p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$8,750.00</span></p>
<p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(5/5)</span></p>
</div>
<button class="w-full bg-green-600 dark:bg-emerald-700 text-white py-2 rounded-lg font-semibold hover:bg-green-700 dark:hover:bg-emerald-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-green-400 dark:focus:ring-emerald-500 border-b-4 border-green-800 dark:border-emerald-900 shadow-md">
<i class="fas fa-arrow-alt-circle-right mr-2"></i> Learn More
</button>
</div>
</div>
<!-- Call to Action below cards -->
<div class="text-center mt-8 sm:mt-12">
<button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg rounded-full shadow-lg shadow-purple-500/50 dark:from-fuchsia-600 dark:to-rose-700 dark:shadow-fuchsia-500/50
hover:from-purple-700 hover:to-pink-700 dark:hover:from-fuchsia-700 dark:hover:to-rose-800 transition-all duration-300 ease-in-out
focus:outline-none focus:ring-4 focus:ring-purple-400 dark:focus:ring-fuchsia-300 border-2 border-purple-800 dark:border-fuchsia-900 animate-pulse">
<i class="fas fa-plus-circle mr-2"></i> Explore All 10,000+ Products
</button>
</div>
</div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0V4LLanw2qksTZI9xQpQAcSNasj+pXVjrSPmGz0Y15e7p/f0+asX5RFA5Bw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Tailwind JIT classes for animations and dark mode (if not configured globally) -->
<style>
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.3, 0.9);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
.scrollbar-hidden {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>
</div>Composants associés
Composant Glassmorphism Tabs
Un composant d’onglets réactifs avec le style glassmorphism, conçu pour les interfaces de médias sociaux. Il présente un effet de verre dépoli utilisant Tailwind CSS avec une palette de couleurs en niveaux de gris. La conception prend en charge le mode sombre.
Composant Onglets
Un composant d’onglets réactif avec un design skeuomorphe, une palette de couleurs analogue et une prise en charge du thème sombre, adapté aux sites Web d’entreprise professionnels. Le composant utilise Tailwind CSS pour le style et n’inclut aucun code JavaScript.
Composant Onglets
Un composant d’onglets de style brutaliste pour les médias sociaux, avec des couleurs complémentaires et un design complexe et réactif, y compris la prise en charge du thème sombre.