All Prompts
All Prompts
featuresectioncarouselcardinteractiveresponsivetailwinddark
Dark Feature Carousel Section
Секция-карусель с карточками: горизонтальная прокрутка, заголовки, описания, кнопки CTA. Адаптивный дизайн, темная тема, Tailwind CSS. Идеально для демонстрации возможностей.
Prompt
<section class="z-10 bg-[#050505] pt-24 pr-6 pb-24 pl-6 relative">
<div class="w-full max-w-[1800px] mr-auto ml-auto">
<div class="mb-12">
<span class="text-xs font-mono text-neutral-600 block mb-6">PERMIMUE ACCOUNTS</span>
<h2
class="md:text-7xl lg:text-8xl leading-[0.9] uppercase text-5xl font-semibold text-white tracking-tighter font-manrope mb-8">
System 2.0.
<span class="text-neutral-800">New Logic.</span>
</h2>
<div class="h-px w-full bg-white/10 mt-2"></div>
</div>
<div class="relative w-full group/carousel">
<div id="carousel-container"
class="flex gap-8 overflow-x-auto pb-8 snap-x snap-mandatory [&::-webkit-scrollbar]:hidden scroll-smooth"
style="-ms-overflow-style: none; scrollbar-width: none;">
<div class="min-w-[85vw] md:min-w-[450px] lg:min-w-[500px] snap-center shrink-0 flex flex-col">
<div class="w-full aspect-video border border-white/10 p-2 bg-[#050505] group cursor-pointer">
<div
class="relative w-full h-full bg-[#0A0A0A] overflow-hidden border border-white/5 transition-colors duration-500 group-hover:border-white/40">
<div
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2301&auto=format&fit=crop')] bg-cover bg-center opacity-50 grayscale transition-all duration-700 group-hover:grayscale-0 group-hover:opacity-80">
</div>
<div class="absolute inset-0 bg-gradient-to-t from-[#050505] via-transparent to-transparent"></div>
<div
class="flex bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/84881032-e239-416a-864e-6e1cc151f3d2_1600w.webp?w=800&q=80)] bg-cover absolute top-0 right-0 bottom-0 left-0 items-center justify-center">
<div
class="flex transition-all duration-500 group-hover:bg-white/10 text-zinc-300 bg-zinc-300/5 w-16 h-16 border-zinc-300/10 border shadow-2xl backdrop-blur-md items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
style="width: 24px; height: 24px; color: rgb(34, 197, 94)"
class="lucide lucide-shield-check w-[24px] h-[24px]" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" data-solar="shield-star-bold-duotone"
data-icon-set="solar" data-icon-replaced="true" stroke-width="1.5">
<path fill="#ffffff"
d="M3.378 5.082C3 5.62 3 7.22 3 10.417v1.574c0 5.638 4.239 8.375 6.899 9.536c.721.315 1.082.473 2.101.473c1.02 0 1.38-.158 2.101-.473C16.761 20.365 21 17.63 21 11.991v-1.574c0-3.198 0-4.797-.378-5.335c-.377-.537-1.88-1.052-4.887-2.081l-.573-.196C13.595 2.268 12.812 2 12 2s-1.595.268-3.162.805L8.265 3c-3.007 1.03-4.51 1.545-4.887 2.082"
opacity=".5"></path>
<path fill="#ffffff"
d="m10.861 8.363l-.13.235c-.145.259-.217.388-.329.473s-.252.117-.532.18l-.254.058c-.984.222-1.476.334-1.593.71c-.117.377.218.769.889 1.553l.174.203c.19.223.285.334.328.472s.029.287 0 .584l-.026.27c-.102 1.047-.152 1.57.154 1.803s.767.02 1.688-.403l.239-.11c.261-.12.392-.181.531-.181s.27.06.531.18l.239.11c.92.425 1.382.637 1.688.404s.256-.756.154-1.802l-.026-.271c-.029-.297-.043-.446 0-.584s.138-.25.328-.472l.174-.203c.67-.784 1.006-1.176.889-1.553c-.117-.376-.609-.488-1.593-.71l-.254-.058c-.28-.063-.42-.095-.532-.18s-.184-.214-.328-.472l-.131-.236C12.632 7.454 12.379 7 12 7s-.632.454-1.139 1.363">
</path>
</svg>
</div>
</div>
</div>
</div>
<div class="mt-6 pl-2 flex flex-col flex-grow min-h-[160px]">
<h3 class="text-white font-semibold tracking-[0.2em] uppercase text-lg mb-3">Liquid Interface</h3>
<p class="text-neutral-500 text-sm leading-relaxed max-w-sm mb-6 line-clamp-2">Refracts project data in
real time. Dynamically adapting workflow.</p>
<div class="mt-auto">
<button class="md:w-auto uppercase transition-all duration-300 hover:bg-[#FFD700] hover:text-black hover:border-[#FFD700] flex gap-4 group/btn text-xs font-bold text-white tracking-[0.15em] w-full border-white/20 border pt-4 pr-6 pb-4 pl-6 gap-x-4 gap-y-4 items-center justify-between">
Check Info
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 group-hover/btn:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</button>
</div>
</div>
</div>
<div class="min-w-[85vw] md:min-w-[450px] lg:min-w-[500px] snap-center shrink-0 flex flex-col">
<div class="w-full aspect-video border border-white/10 p-2 bg-[#050505] group cursor-pointer">
<div
class="overflow-hidden transition-colors duration-500 group-hover:border-white/40 flex w-full h-full bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4eaabca7-4951-4424-b74f-7523657f0b8f_1600w.webp)] bg-cover bg-center border-white/5 border relative items-center justify-center">
</div>
</div>
<div class="mt-6 pl-2 flex flex-col flex-grow min-h-[160px]">
<h3 class="text-white font-semibold tracking-[0.2em] uppercase text-lg mb-3">Immersive Twin</h3>
<p class="text-neutral-500 text-sm leading-relaxed max-w-sm mb-6 line-clamp-2">Synchronizes with
physical site. Real-time telemetry data.</p>
<div class="mt-auto">
<button class="w-full md:w-auto px-6 py-4 border border-white/20 text-white text-xs font-bold tracking-[0.15em] uppercase transition-all duration-300 hover:bg-[#FFD700] hover:text-black hover:border-[#FFD700] flex items-center justify-between gap-4 group/btn">
Check Info
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 group-hover/btn:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</button>
</div>
</div>
</div>
<div class="min-w-[85vw] md:min-w-[450px] lg:min-w-[500px] snap-center shrink-0 flex flex-col">
<div class="w-full aspect-video border border-white/10 p-2 bg-[#050505] group cursor-pointer">
<div
class="relative w-full h-full bg-[#0A0A0A] overflow-hidden border border-white/5 transition-colors duration-500 group-hover:border-white/40 flex items-center justify-center">
<div
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-40 grayscale transition-all duration-700 group-hover:grayscale-0 group-hover:opacity-60">
</div>
<div
class="bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/72997a10-b782-4f03-9371-de086a861794_1600w.webp?w=800&q=80)] bg-cover bg-center absolute top-0 right-0 bottom-0 left-0">
</div>
</div>
</div>
<div class="mt-6 pl-2 flex flex-col flex-grow min-h-[160px]">
<h3 class="text-white font-semibold tracking-[0.2em] uppercase text-lg mb-3">Site Assist</h3>
<p class="text-neutral-500 text-sm leading-relaxed max-w-sm mb-6 line-clamp-2">Operational continuity.
Automatic remote deployment for new sectors.</p>
<div class="mt-auto">
<button class="w-full md:w-auto px-6 py-4 border border-white/20 text-white text-xs font-bold tracking-[0.15em] uppercase transition-all duration-300 hover:bg-[#FFD700] hover:text-black hover:border-[#FFD700] flex items-center justify-between gap-4 group/btn">
Check Info
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 group-hover/btn:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</button>
</div>
</div>
</div>
<div class="min-w-[85vw] md:min-w-[450px] lg:min-w-[500px] snap-center shrink-0 flex flex-col">
<div class="w-full aspect-video border border-white/10 p-2 bg-[#050505] group cursor-pointer">
<div
class="relative w-full h-full bg-[#0A0A0A] overflow-hidden border border-white/5 transition-colors duration-500 group-hover:border-white/40">
<div class="absolute inset-0"
style="background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px">
</div>
<div class="absolute inset-0 p-8 flex items-center justify-center">
<div
class="w-full h-full border border-white/10 bg-[#050505] p-6 relative backdrop-blur-sm flex flex-col justify-between">
<div class="flex justify-between items-center border-b border-white/5 pb-2">
<div class="flex items-center gap-3">
<div
class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.8)]">
</div>
<span class="text-[10px] uppercase tracking-widest text-white font-medium">Active</span>
</div>
<span class="text-[10px] text-white/30 font-mono">02m ago</span>
</div>
<div class="text-sm text-white font-medium tracking-wide">+1 (408) Load Shift</div>
</div>
</div>
</div>
</div>
<div class="mt-6 pl-2 flex flex-col flex-grow min-h-[160px]">
<h3 class="text-white font-semibold tracking-[0.2em] uppercase text-lg mb-3">Auto Screening</h3>
<p class="text-neutral-500 text-sm leading-relaxed max-w-sm mb-6 line-clamp-2">Detects critical load
shifts before they impact structural integrity.</p>
<div class="mt-auto">
<button class="w-full md:w-auto px-6 py-4 border border-white/20 text-white text-xs font-bold tracking-[0.15em] uppercase transition-all duration-300 hover:bg-[#FFD700] hover:text-black hover:border-[#FFD700] flex items-center justify-between gap-4 group/btn">
Check Info
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 group-hover/btn:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</button>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-12 pr-6">
<div class="flex gap-0">
<button id="prevBtn" class="w-16 h-16 border border-white/10 flex items-center justify-center text-white/50 hover:bg-neutral-900 hover:text-white hover:border-white/30 transition-all duration-300 group bg-black z-20">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="color: rgb(255, 255, 255); width: 20px; height: 20px;" class="lucide lucide-arrow-left transition-transform group-hover:-translate-x-1 w-[20px] h-[20px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-solar="arrow-left-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="1.5"><path fill="#ffffff" fill-rule="evenodd" d="M20.75 12a.75.75 0 0 0-.75-.75h-9.25v1.5H20a.75.75 0 0 0 .75-.75" clip-rule="evenodd" opacity=".5"></path><path fill="#ffffff" d="M10.75 18a.75.75 0 0 1-1.28.53l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.28.53z"></path></svg>
</button>
<button id="nextBtn" class="w-16 h-16 border-t border-b border-r border-white/10 flex items-center justify-center text-white/50 hover:bg-neutral-900 hover:text-white hover:border-white/30 transition-all duration-300 group bg-black z-20">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="color: rgb(255, 255, 255); width: 20px; height: 20px;" class="lucide lucide-arrow-right transition-transform group-hover:translate-x-1 w-[20px] h-[20px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-solar="arrow-right-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="1.5"><path fill="#ffffff" fill-rule="evenodd" d="M3.25 12a.75.75 0 0 1 .75-.75h9.25v1.5H4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5"></path><path fill="#ffffff" d="M13.25 12.75V18a.75.75 0 0 0 1.28.53l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.28.53z"></path></svg>
</button>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById('carousel-container');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
// Width + Gap (500 + 32)
const scrollAmount = 532;
nextBtn.addEventListener('click', () => {
container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
});
prevBtn.addEventListener('click', () => {
container.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
});
});
</script>