Creative Agency Footer with Editorial Layout, Newsletter & Social Links

agency footer built with pure HTML and Tailwind CSS. Featuring an editorial-inspired layout, newsletter subscription, multi-column navigation, contact information, and social media links. Perfect for creative agencies, design studios, architecture firms, portfolios, branding agencies, freelancers, and modern business websites.

This tailwind example is contributed by JUGENDRA GANGWAR, on 02-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Email campaign

Footer Navigations Newsletter

Author JUGENDRA GANGWAR

Tailwind v3.4 209 4

Fork Fullscreen

<div class="grid grid-cols-1 gap-10 border-b border-stone-200 py-12 sm:grid-cols-3">
      <div class="flex items-start gap-4">
        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-stone-300 text-stone-700">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.4"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 4.5C2.339 4.5 1.5 5.34 1.5 6.375V13.5h12V6.375c0-1.036-.84-1.875-1.875-1.875h-8.25zM13.5 13.5h3.875c.504 0 .988.2 1.345.557l1.723 1.723c.357.357.557.84.557 1.345V16.5a1.5 1.5 0 01-1.5 1.5h-1m-9 0h6m-9 0H3a1.5 1.5 0 01-1.5-1.5v-1"/><circle cx="6.75" cy="18.75" r="1.5"/><circle cx="16.5" cy="18.75" r="1.5"/></svg>
        </span>
        <div>
          <p class="font-serif text-sm font-medium text-stone-900">Complimentary shipping</p>
          <p class="mt-1 text-xs leading-relaxed text-stone-500">On all orders above $200, worldwide</p>
        </div>
      </div>
      <div class="flex items-start gap-4">
        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-stone-300 text-stone-700">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.4"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </span>
        <div>
          <p class="font-serif text-sm font-medium text-stone-900">Authenticity guaranteed</p>
          <p class="mt-1 text-xs leading-relaxed text-stone-500">Every piece verified and certified</p>
        </div>
      </div>
      <div class="flex items-start gap-4">
        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-stone-300 text-stone-700">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.4"><path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-2.25c0-.621-.504-1.125-1.125-1.125h-18A1.125 1.125 0 002.25 7.875v2.25c0 .621.504 1.125 1.125 1.125z"/></svg>
        </span>
        <div>
          <p class="font-serif text-sm font-medium text-stone-900">Gift wrapping</p>
          <p class="mt-1 text-xs leading-relaxed text-stone-500">Hand-finished, complimentary on request</p>
        </div>
      </div>
    </div>

<div>
        <p class="font-serif text-2xl tracking-wide text-stone-900">Maison&nbsp;Lyrre</p>
        <p class="mt-4 max-w-xs text-sm leading-relaxed text-stone-500">
          Independent atelier crafting timeless leather goods and jewelry since 1987. Designed in Paris, made by hand.
        </p>
        <div class="mt-6 flex items-center gap-4 text-stone-500">
          <a href="#" aria-label="Follow on Instagram" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">
            <svg class="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="3.7"/><circle cx="17.2" cy="6.8" r="0.6" fill="currentColor"/></svg>
          </a>
          <a href="#" aria-label="Follow on Pinterest" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">
            <svg class="h-[18px] w-[18px]" fill="currentColor" viewBox="0 0 24 24"><path d="M12.017 0C5.396 0 0 5.396 0 12.017c0 5.073 3.158 9.404 7.618 11.149-.105-.946-.2-2.398.042-3.43.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.781c0-1.668.967-2.914 2.171-2.914 1.024 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.993 3.995-.283 1.194.599 2.169 1.776 2.169 2.131 0 3.768-2.247 3.768-5.487 0-2.868-2.061-4.874-5.005-4.874-3.41 0-5.412 2.557-5.412 5.199 0 1.03.397 2.134.892 2.734a.36.36 0 01.083.345c-.09.375-.293 1.194-.333 1.361-.052.219-.173.265-.4.16-1.489-.693-2.42-2.871-2.42-4.62 0-3.762 2.733-7.217 7.881-7.217 4.139 0 7.355 2.949 7.355 6.892 0 4.113-2.594 7.422-6.195 7.422-1.21 0-2.349-.629-2.738-1.373l-.745 2.84c-.269 1.037-.998 2.336-1.486 3.127 1.12.345 2.305.53 3.534.53 6.62 0 12.017-5.396 12.017-12.017C24.034 5.396 18.637 0 12.017 0z"/></svg>
          </a>
          <a href="#" aria-label="Follow on X" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">
            <svg class="h-[18px] w-[18px]" fill="currentColor" 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>
        </div>
      </div>

<div class="grid grid-cols-2 gap-8 sm:grid-cols-3">
        <nav aria-labelledby="footer-shop">
          <h3 id="footer-shop" class="font-serif text-sm text-stone-900">Shop</h3>
          <ul class="mt-4 space-y-2.5 text-sm text-stone-500">
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Handbags</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Jewelry</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Footwear</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Accessories</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">New arrivals</a></li>
          </ul>
        </nav>
        <nav aria-labelledby="footer-support">
          <h3 id="footer-support" class="font-serif text-sm text-stone-900">Support</h3>
          <ul class="mt-4 space-y-2.5 text-sm text-stone-500">
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Contact us</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Shipping info</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Returns & exchanges</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Size guide</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Care instructions</a></li>
          </ul>
        </nav>
        <nav aria-labelledby="footer-house" class="col-span-2 sm:col-span-1">
          <h3 id="footer-house" class="font-serif text-sm text-stone-900">The House</h3>
          <ul class="mt-4 space-y-2.5 text-sm text-stone-500">
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Our story</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Craftsmanship</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Boutiques</a></li>
            <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Sustainability</a></li>
          </ul>
        </nav>
      </div>

<div class="lg:pl-6 lg:border-l lg:border-stone-200">
        <h3 class="font-serif text-sm text-stone-900">Stay in touch</h3>
        <p class="mt-3 text-sm leading-relaxed text-stone-500">Private sales, new collections, and atelier stories — delivered occasionally, never often.</p>
        <form class="mt-5" aria-label="Newsletter subscription">
          <label for="footer-email" class="sr-only">Email address</label>
          <div class="flex items-center border-b border-stone-400 pb-2 focus-within:border-stone-900">
            <input
              id="footer-email"
              type="email"
              required
              placeholder="Email address"
              class="w-full bg-transparent text-sm text-stone-900 placeholder:text-stone-400 outline-none"
            />
            <button
              type="submit"
              aria-label="Subscribe"
              class="ml-3 shrink-0 text-stone-700 transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md"
            >
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </button>
          </div>
        </form>

<div class="mt-8 space-y-2 text-sm text-stone-500">
          <a href="mailto:concierge@maisonlyrre.com" class="block transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">concierge@maisonlyrre.com</a>
          <a href="tel:+33145000000" class="block transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">+33 1 45 00 00 00</a>
        </div>
      </div>
    </div>

<div class="flex flex-col items-center justify-between gap-6 border-t border-stone-200 py-8 sm:flex-row">
      <p class="text-center text-xs text-stone-500 sm:text-left">© 2026 Maison Lyrre. All rights reserved.</p>

<ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs text-stone-500">
        <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Privacy Policy</a></li>
        <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Terms of Service</a></li>
        <li><a href="#" class="transition-colors hover:text-stone-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-stone-400 rounded-md">Cookie Policy</a></li>
      </ul>

<ul class="flex items-center gap-3" aria-label="Accepted payment methods">
        <li class="flex h-7 w-11 items-center justify-center rounded border border-stone-300 bg-white">
          <svg class="h-3.5 w-7" viewBox="0 0 32 16" fill="none"><rect width="32" height="16" rx="2" fill="#1A1F71"/><text x="16" y="11" font-family="Georgia, serif" font-size="7" fill="#fff" text-anchor="middle">VISA</text></svg>
        </li>
        <li class="flex h-7 w-11 items-center justify-center rounded border border-stone-300 bg-white">
          <svg class="h-4 w-6" viewBox="0 0 32 20"><circle cx="12" cy="10" r="7" fill="#EB001B"/><circle cx="20" cy="10" r="7" fill="#F79E1B" fill-opacity="0.9"/></svg>
        </li>
        <li class="flex h-7 w-11 items-center justify-center rounded border border-stone-300 bg-white text-stone-700">
          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.5 8c.4-2 1.7-3.4 3.5-3.6-.3 1.8-1.5 3.2-3 3.7zM12 22c-2.2 0-4-1.6-5.6-4.4C4.7 14.8 4 11.9 4 9.8 4 6.2 6.4 4 9.5 4c1.3 0 2.4.6 3.2 1.4.8-.8 2-1.4 3.3-1.4 1.7 0 3.2.9 4 2.3-2.7 1.5-3.3 4.9-1.4 7.2-.6 1.7-1.4 3.4-2.5 4.9-1 1.3-1.9 2.1-3.1 2.1-.6 0-1.2-.2-2-.5z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
        </li>
        <li class="flex h-7 w-11 items-center justify-center rounded border border-stone-300 bg-white">
          <svg class="h-3 w-7" viewBox="0 0 40 14" fill="none"><text x="20" y="11" font-family="Arial, sans-serif" font-weight="bold" font-style="italic" font-size="9" fill="#003087" text-anchor="middle">PayPal</text></svg>
        </li>
      </ul>
    </div>
  </div>
</footer>

Related Examples

beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3.2k
Simple Footer 2

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
Simple Footer 3

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Rathanak Phan

1 year ago

2.4k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Lekhraj Ghimire

1 year ago

2.5k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

10 months ago

1.1k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

633
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

489
Creative with CTA buttons
Use Below tailwind css footer example with CTA buttons and site links.

Pagedone

2 years ago

2.8k
Footer - Modern minimal style
clean and uncluttered, following a minimalist approach

Nikita

2 years ago

4.9k
Centered footer with subscribe form
Use this example to center align everything in footer with brand logo, sitemap links and subscribe form.

Pagedone

2 years ago

3.3k