IndustrieVibrantTabs
Eine komplexe, lebendige Tabs-Komponente mit industriellem Thema, die sich für einen Multi-Vendor-Marktplatz eignet, mit freiliegenden Elementen, Rohstoffästhetik und Farben mit hoher Sättigung. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.
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>Verwandte Komponenten
Glassmorphism Tabs-Komponente
Einfache Glassmorphism Tabs-Komponente für Portfolio, mit responsivem Design und Unterstützung für dunkle Themen. Verwendet ein lebendiges Farbschema.
Tabs-Komponente
Eine minimalistische und lebendige Tabs-Komponente für den E-Commerce mit moderater Komplexität, responsivem Design und Unterstützung für dunkle Themen, implementiert mit Tailwind CSS und HTML.
Komponente auf Registerkarten "Materialdesign"
Eine komplexe, monochrome, von Material Design inspirierte Registerkartenkomponente für Dashboards mit responsivem Design, Unterstützung für den Dunkelmodus und interaktiven Elementen. Verwendet rasterbasierte Layouts und subtile Schatteneffekte.