ПромышленныеVibrantTabs
Сложный, яркий компонент вкладок на индустриальную тематику, подходящий для рынка с несколькими поставщиками, с открытыми элементами, эстетикой сырья и высокой насыщенностью цветов. Полностью адаптивный с поддержкой темного режима.
HTML-код
<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>Связанные компоненты
Компонент вкладок нейроморфизма
Компонент неморфных вкладок для пользовательских интерфейсов панели управления с цветовой схемой в оттенках серого, адаптивным дизайном и поддержкой темных тем, использующих только HTML и Tailwind CSS.
Компонент вкладок
Адаптивный компонент вкладок, разработанный для интерфейсов социальных сетей, с микровзаимодействиями и темной темой. Компонент включает в себя множество интерактивных элементов и использует Tailwind CSS.
Компонент вкладок
Адаптивный компонент вкладок с микровзаимодействиями для бизнес/корпоративных сайтов, с дополнительными цветами и поддержкой темного режима.