Загрузка...
Адаптивный футер с анимацией на Tailwind CSS: навигация, соцсети, иконки. Идеален для SaaS, продуктов, лендингов.
<footer class="relative z-10 animate-[fadeInUp_1s_ease-out_1.6s_forwards]" style="transform: translateY(50px);">
<div class="border-white/10 border-t">
<div class="mx-auto max-w-7xl px-6 py-12">
<div class="grid gap-10 md:grid-cols-3">
<div class="flex flex-col gap-4">
<a href="#" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<span class="relative inline-grid h-10 w-10 place-items-center rounded-xl bg-neutral-900 ring-1 ring-white/10 hover:ring-emerald-400/30 transition-all">
<span class="absolute inset-0 rounded-xl bg-gradient-to-br from-emerald-500/20 to-cyan-500/20"></span>
<span class="relative text-xl font-semibold tracking-tight font-sans" style="">C</span>
</span>
<div class="flex flex-col leading-none">
<span class="text-sm font-medium text-neutral-300 font-sans" style="">CHROMAMAX</span>
<span class="text-xs text-neutral-500 font-sans" style="">SYSTEMS</span>
</div>
</a>
<div class="mt-2 flex items-center gap-3">
<a href="#" class="grid h-9 w-9 place-items-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 transition-all duration-200" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram h-4 w-4 text-neutral-300"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></svg>
</a>
<a href="#" class="grid h-9 w-9 place-items-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 transition-all duration-200" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="facebook" class="lucide lucide-facebook h-4 w-4 text-neutral-300"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path></svg>
</a>
<a href="#" class="grid h-9 w-9 place-items-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 transition-all duration-200" aria-label="YouTube">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="youtube" class="lucide lucide-youtube h-4 w-4 text-neutral-300"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" class=""></path><path d="m10 15 5-3-5-3z" class=""></path></svg>
</a>
</div>
<p class="mt-2 text-xs text-neutral-500 font-sans" style="">© 2024 CHROMAMAX SYSTEMS. All rights reserved.</p>
</div>
<div class="grid grid-cols-3 gap-8 md:col-span-2">
<div class="">
<h4 class="mb-3 text-sm font-semibold tracking-tight text-white font-sans" style="">Solutions</h4>
<ul class="space-y-2 text-sm text-neutral-400">
<li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">Pro Sensor</a></li>
<li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">Accessories</a></li>
<li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">SDK & APIs</a></li>
</ul>
</div>
<div id="contact" class="">
<h4 class="mb-3 text-sm font-semibold tracking-tight text-white font-sans" style="">Support</h4>
<ul class="space-y-2 text-sm text-neutral-400">
<li><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">Help Center</a></li>
<li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">Contact Sales</a></li>
<li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">Training</a></li>
</ul>
</div>
<div class="">
<h4 class="mb-3 text-sm font-semibold tracking-tight text-white font-sans" style="">About</h4>
<ul class="space-y-2 text-sm text-neutral-400">
<li><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">Our Story</a></li>
<li><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">Press Kit</a></li>
<li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#" style="">Terms</a></li>
</ul>
</div>
</div>
</div>
<!-- Store badges -->
<div class="mt-10 flex flex-wrap items-center gap-3">
<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-white/5 px-3 py-2 text-xs font-medium text-neutral-100 ring-1 ring-white/10 hover:bg-white/10 hover:scale-105 transition-all duration-200 font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="apple" class="lucide lucide-apple h-4 w-4"><path d="M12 6.528V3a1 1 0 0 1 1-1h0" class=""></path><path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21" class=""></path></svg> App Store
</a>
<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-white/5 px-3 py-2 text-xs font-medium text-neutral-100 ring-1 ring-white/10 hover:bg-white/10 hover:scale-105 transition-all duration-200 font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-4 w-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg> Google Play
</a>
<a href="#" class="inline-flex items-center gap-2 rounded-lg bg-white/5 px-3 py-2 text-xs font-medium text-neutral-100 ring-1 ring-white/10 hover:bg-white/10 hover:scale-105 transition-all duration-200 font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="monitor" class="lucide lucide-monitor h-4 w-4"><rect width="20" height="14" x="2" y="3" rx="2" class=""></rect><line x1="8" x2="16" y1="21" y2="21" class=""></line><line x1="12" x2="12" y1="17" y2="21" class=""></line></svg> Desktop App
</a>
</div>
<div class="mt-6 flex flex-wrap gap-4 text-xs text-neutral-500">
<a href="#" class="hover:text-neutral-300 hover:scale-105 transition-all duration-200 font-sans" style="">Terms of Service</a>
<a href="#" class="hover:text-neutral-300 hover:scale-105 transition-all duration-200 font-sans" style="">Privacy Policy</a>
<a href="#" class="hover:text-neutral-300 hover:scale-105 transition-all duration-200 font-sans" style="">Cookie Preferences</a>
</div>
</div>
</div>
</footer>