Back to search
103Views
0Likes
0Downloads
Code · Live Preview
Componenthtml
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Agency Footer</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-[#0d0d0c] font-sans">
<footer class="bg-footer-bg text-footer-text font-sans">
<!-- ══════════════════════════════════
ROW 1 — 4-column grid
══════════════════════════════════ -->
<div class="max-w-[1280px] mx-auto px-10 pt-16 pb-12">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
<!-- Col 1: Brand -->
<div class="flex flex-col gap-5">
<!-- Logo + Agency Name -->
<div class="flex items-center gap-2.5 max-sm:justify-center">
<div
class="w-7 h-7 bg-footer-text flex items-center justify-center rounded-[3px] flex-shrink-0"
>
<span class="font-serif text-[15px] text-footer-bg leading-none"
>F</span
>
</div>
<span
class="font-serif text-[20px] text-footer-text tracking-tight"
>Formfield</span
>
</div>
<!-- Tagline -->
<p
class="text-[15px] leading-relaxed text-footer-muted max-sm:text-center"
>
We build digital products<br />that people actually use.
</p>
<!-- Social Icons -->
<div class="flex gap-2 flex-wrap max-sm:justify-center">
<!-- LinkedIn -->
<a
href="#"
aria-label="LinkedIn"
class="social-icon w-9 h-9 border border-footer-border flex items-center justify-center rounded-[2px] hover:bg-footer-text hover:border-footer-text"
>
<svg
class="w-[15px] h-[15px] fill-footer-muted"
viewBox="0 0 24 24"
>
<path
d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8.25h4V24h-4V8.25zm6.5 0h3.83v2.16h.05c.53-1.01 1.84-2.07 3.79-2.07 4.06 0 4.8 2.67 4.8 6.14V24h-4v-8.77c0-2.09-.04-4.78-2.91-4.78-2.92 0-3.37 2.28-3.37 4.63V24H7V8.25z"
/>
</svg>
</a>
<!-- X -->
<a
href="#"
aria-label="X"
class="social-icon w-9 h-9 border border-footer-border flex items-center justify-center rounded-[2px] hover:bg-footer-text hover:border-footer-text"
>
<svg
class="w-[15px] h-[15px] fill-footer-muted"
viewBox="0 0 24 24"
>
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
/>
</svg>
</a>
<!-- Instagram -->
<a
href="#"
aria-label="Instagram"
class="social-icon w-9 h-9 border border-footer-border flex items-center justify-center rounded-[2px] hover:bg-footer-text hover:border-footer-text"
>
<svg
class="w-[15px] h-[15px] fill-footer-muted"
viewBox="0 0 24 24"
>
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
/>
</svg>
</a>
<!-- Dribbble -->
<a
href="#"
aria-label="Dribbble"
class="social-icon w-9 h-9 border border-footer-border flex items-center justify-center rounded-[2px] hover:bg-footer-text hover:border-footer-text"
>
<svg
class="w-[15px] h-[15px] fill-footer-muted"
viewBox="0 0 24 24"
>
<path
d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.017-8.04 6.39 1.73 1.35 3.92 2.165 6.29 2.165 1.42 0 2.77-.29 4.006-.805zm-9.34-2.65c.24-.45 3.05-5.38 8.32-7.078.03-.01.05-.01.07-.02-.145-.33-.3-.66-.46-.98C9.37 13 3.83 12.75 3.33 12.73l-.004.225c0 2.44.87 4.68 2.34 6.395zm-2.17-8.87c.51.012 5.32.09 10.26-1.402-1.54-2.74-3.2-5.05-3.44-5.38-2.818 1.33-4.92 3.91-5.82 6.782zM14.5 3.356c.25.33 1.95 2.66 3.464 5.47 3.29-1.234 4.686-3.107 4.854-3.354C21.19 3.56 18.79 2.25 16.11 2.1l-1.61 1.256zM18.47 6.48c-1.47.563-2.98 1.04-4.494 1.32.28.576.55 1.164.8 1.764 3.32-.417 6.38.4 6.66.48-.23-1.35-.85-2.56-1.763-3.564h-.203z"
/>
</svg>
</a>
</div>
</div>
<!-- Col 2: Services -->
<div class="flex flex-col gap-5 max-sm:items-center">
<span
class="text-[10px] uppercase text-footer-muted font-medium tracking-[1.8px]"
>Services</span
>
<nav class="flex flex-col gap-2.5 max-sm:items-center">
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>Brand Strategy</a
>
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>UI/UX Design</a
>
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>Web Development</a
>
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>Mobile Apps</a
>
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>SEO & Growth</a
>
</nav>
</div>
<!-- Col 3: Company -->
<div class="flex flex-col gap-5 max-sm:items-center">
<span
class="text-[10px] uppercase text-footer-muted font-medium tracking-[1.8px]"
>Company</span
>
<nav class="flex flex-col gap-2.5 max-sm:items-center">
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>About Us</a
>
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>Our Work</a
>
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>Careers</a
>
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>Blog</a
>
<a
href="#"
class="footer-link text-sm font-normal text-footer-muted hover:text-footer-text"
>Contact</a
>
</nav>
</div>
<!-- Col 4: Contact / CTA -->
<div class="flex flex-col gap-5 max-sm:items-center">
<span
class="text-[10px] uppercase text-footer-muted font-medium tracking-[1.8px]"
>Get in Touch</span
>
<div class="flex flex-col gap-2 max-sm:items-center">
<a
href="mailto:hello@formfield.studio"
class="footer-link text-sm text-footer-muted hover:text-footer-text"
>
hello@formfield.studio
</a>
<a
href="tel:+12125550186"
class="footer-link text-sm text-footer-muted hover:text-footer-text"
>
+1 (212) 555-0186
</a>
</div>
<div class="flex flex-col gap-2 w-full">
<a
href="#"
class="cta-btn block w-full py-[11px] px-5 bg-cta-bg text-footer-bg text-sm font-medium rounded-[4px] text-center no-underline hover:bg-cta-hover"
>
Start a Project <span class="cta-arrow">→</span>
</a>
<span class="text-[12px] text-footer-muted max-sm:text-center"
>We respond within 24 hours</span
>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="max-w-[1280px] mx-auto px-10">
<div class="h-px bg-footer-border w-full"></div>
</div>
<!-- ══════════════════════════════════
ROW 2 — Newsletter bar
══════════════════════════════════ -->
<div class="max-w-[1280px] mx-auto px-10 py-7">
<div
class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"
>
<p class="text-sm text-footer-muted flex-shrink-0">
Stay updated with our latest work and insights.
</p>
<div class="flex gap-2 w-full sm:max-w-[420px]">
<input
type="email"
placeholder="Your email address"
aria-label="Email address"
class="newsletter-input h-[42px] flex-1 min-w-0 bg-input-bg border border-footer-border rounded-[3px] text-footer-text text-[13px] px-3.5 placeholder:text-footer-muted font-sans"
/>
<button
class="subscribe-btn h-[42px] bg-cta-bg text-footer-bg text-[13px] font-medium rounded-[3px] px-5 whitespace-nowrap border-none cursor-pointer hover:bg-cta-hover"
>
Subscribe
</button>
</div>
</div>
</div>
<!-- Divider -->
<div class="max-w-[1280px] mx-auto px-10">
<div class="h-px bg-footer-border w-full"></div>
</div>
<!-- ══════════════════════════════════
ROW 3 — Bottom bar
══════════════════════════════════ -->
<div class="max-w-[1280px] mx-auto px-10 py-5">
<div
class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4"
>
<span class="text-[12px] text-footer-muted text-center sm:text-left">
© 2026 Formfield. All rights reserved.
</span>
<span class="text-[12px] text-footer-muted text-center">
Made with care in New York
</span>
<div class="flex items-center gap-4 flex-wrap justify-center">
<a
href="#"
class="bottom-link text-[12px] text-footer-muted hover:text-footer-text"
>Privacy Policy</a
>
<span class="text-[12px] text-footer-border select-none">·</span>
<a
href="#"
class="bottom-link text-[12px] text-footer-muted hover:text-footer-text"
>Terms</a
>
<span class="text-[12px] text-footer-border select-none">·</span>
<a
href="#"
class="bottom-link text-[12px] text-footer-muted hover:text-footer-text"
>Cookies</a
>
</div>
</div>
</div>
</footer>
</body>
</html>Detecting libraries...
Component details
Overview, install command, dependencies, and project links.
A dark, minimal agency footer built with pure HTML and Tailwind CSS — no JavaScript, no gradients, no gimmicks. Three-row layout with a 4-column main section (brand, services, company, contact/CTA), a newsletter bar with inline email input, and a clean bottom bar with copyright and legal links. Social icons are square-bordered and fill on hover. Typography uses DM Serif Display for the logo and DM Sans for everything else, all on a warm near-black background with subtle warm-gray borders. Fully responsive — 4 columns on desktop, 2×2 grid on tablet, single centered stack on mobile. The only custom CSS is for hover transitions that Tailwind can't handle natively.
Added Apr 13, 2026
Discussion
Feedback, implementation tips, and usage notes.
0 threads
Comments
Sign in to join the conversation