Загрузка...
Адаптивный футер Tailwind CSS с формой подписки, навигацией, логотипом и иконками соцсетей. Идеален для сайтов электронной коммерции и портфолио.
<footer class="sm:px-8 max-w-full mr-auto ml-auto pt-16 pr-6 pb-12 pl-6">
<div class="relative">
<div class="text-sm text-white/40 font-geist">(Connect)</div>
<div class="text-center">
<h2 class="text-5xl sm:text-7xl lg:text-8xl leading-none text-white/90 tracking-tight uppercase font-geist font-medium" style="">JOIN THE</h2>
<h2 class="text-5xl sm:text-7xl lg:text-8xl leading-none text-white/90 tracking-tight uppercase mt-1 font-geist font-medium" style="">COMMUNITY</h2>
<div class="mt-6 flex items-center gap-2 text-white/40">
<span class="text-base font-geist">+</span>
<div class="h-px flex-1 bg-white/10"></div>
<span class="text-base font-geist">+</span>
</div>
<p class="mt-6 text-xl sm:text-2xl text-white/70 tracking-tight max-w-3xl mx-auto font-geist font-medium" style="">Professional camera gear for bold creators. Expert advice, premium equipment, and worldwide shipping.</p>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="rounded-2xl overflow-hidden border border-white/10 bg-black/50 p-6">
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 ring-1 ring-emerald-500/20 px-3 py-2 text-sm text-emerald-600 mb-4 font-geist">
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
Newsletter
</div>
<h4 class="text-xl text-white tracking-tighter mb-4 font-geist">Stay updated</h4>
<form class="space-y-3">
<input type="email" required="" placeholder="you@domain.com" class="w-full h-10 px-4 rounded-xl border text-sm placeholder-white/40 outline-none focus:ring-2 focus:ring-white/20 focus:border-white/20 backdrop-blur border-white/20 bg-white/10 text-white">
<button class="w-full inline-flex items-center gap-2 h-10 px-4 rounded-xl ring-1 text-sm transition ring-white/20 text-white bg-white/10 hover:bg-white/20 justify-center font-geist">
Join
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
</button>
</form>
</div>
<div class="rounded-2xl overflow-hidden border border-white/10 bg-black/50 p-6">
<h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-geist">Products</h5>
<ul class="space-y-3 text-base text-white/70">
<li class=""><a class="transition hover:text-white font-geist" href="#cameras">Cameras</a></li>
<li><a class="transition hover:text-white font-geist" href="#lenses">Lenses</a></li>
<li class=""><a class="transition hover:text-white font-geist" href="#accessories">Accessories</a></li>
<li class=""><a class="transition hover:text-white font-geist" href="#lighting">Lighting</a></li>
</ul>
</div>
<div class="rounded-2xl overflow-hidden border border-white/10 bg-black/50 p-6">
<h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-geist">Support</h5>
<ul class="space-y-3 text-base text-white/70">
<li><a class="transition hover:text-white font-geist" href="#consultation">Expert Advice</a></li>
<li><a class="transition hover:text-white font-geist" href="#shipping">Shipping Info</a></li>
<li><a class="transition hover:text-white font-geist" href="#returns">Returns</a></li>
<li><a class="transition hover:text-white font-geist" href="#warranty">Warranty</a></li>
</ul>
</div>
<div class="rounded-2xl overflow-hidden border border-white/10 bg-black/50 p-6">
<h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-geist">Company</h5>
<ul class="space-y-3 text-base text-white/70">
<li><a class="transition hover:text-white font-geist" href="#about">About</a></li>
<li><a class="transition hover:text-white font-geist" href="#careers">Careers</a></li>
<li><a class="transition hover:text-white font-geist" href="#blog">Blog</a></li>
<li><a class="transition hover:text-white font-geist" href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-6">
<a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[100px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/95bbcda7-777d-46c5-84fe-b4dfae5381a9_320w.jpg)] bg-cover rounded"></a>
<div class="flex items-center gap-4 text-base text-white/60">
<span class="font-geist">© 2025 Bold Camera</span>
<span class="hidden sm:inline text-white/20 font-geist">|</span>
<a href="#privacy" class="transition hover:text-white font-geist">Privacy</a>
<span class="text-white/20 font-geist">/</span>
<a href="#terms" class="transition hover:text-white font-geist">Terms</a>
</div>
</div>
<div class="flex items-center gap-3">
<a aria-label="Instagram" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-white/5 text-white/70 hover:text-white hover:bg-white/10" href="https://instagram.com" target="_blank" rel="noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><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 aria-label="YouTube" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-white/5 text-white/70 hover:text-white hover:bg-white/10" href="https://youtube.com" target="_blank" rel="noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" class=""><path d="M23.5 6.2a4 4 0 0 0-2.8-2.8C18.8 3 12 3 12 3s-6.8 0-8.7.4A4 4 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a4 4 0 0 0 2.8 2.8C5.2 21 12 21 12 21s6.8 0 8.7-.4a4 4 0 0 0 2.8-2.8c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.5v-7L16 12z" class=""></path></svg>
</a>
<a aria-label="Twitter/X" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-white/5 text-white/70 hover:text-white hover:bg-white/10" href="https://twitter.com" target="_blank" rel="noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16" class=""><path d="M12.6 1.7h2.1l-4.6 5.2 5.4 7.4h-4.2L8.9 9.8l-3.9 4.5H2.9l4.9-5.6L2.6 1.7h4.3l3 4.1 2.7-3.1z" class=""></path></svg>
</a>
</div>
</div>
</div>
</footer>