Social Stack Footer
A copy-paste footers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
FootersHTMLCSSany framework
Copy into your project
HTML
<footer class="nuda-footer-social">
<span>Follow along</span>
<div class="nuda-footer-social__stack">
<a href="#" class="nuda-footer-social__chip">X</a>
<a href="#" class="nuda-footer-social__chip">Gh</a>
<a href="#" class="nuda-footer-social__chip">Yt</a>
<a href="#" class="nuda-footer-social__chip">Li</a>
<a href="#" class="nuda-footer-social__chip">Ig</a>
</div>
</footer>CSS
.nuda-footer-social {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
color: #a0a0a8;
font-size: 13px;
}
.nuda-footer-social__stack {
display: flex;
gap: 6px;
}
.nuda-footer-social__chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: #fafafa;
text-decoration: none;
font-size: 11px;
font-weight: 600;
transition:
transform 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.25s;
}
.nuda-footer-social__chip:hover {
transform: translateY(-3px) rotate(-3deg);
background: rgba(228, 255, 84, 0.1);
border-color: #e4ff54;
color: #e4ff54;
box-shadow: 0 6px 18px -8px rgba(228, 255, 84, 0.6);
}How to use Social Stack Footer
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.