Two-Tone Split Footer in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<footer class="ft">
  <div class="ft-up">
    <div class="ft-up-in">
      <div><h2>One email a month, worth opening</h2>
        <p>What shipped, what broke, and what we learned fixing it. No product announcements dressed as newsletters.</p></div>
      <form action="#" method="post" onsubmit="event.preventDefault()">
        <label class="ft-sr" for="ft-email">Email address</label>
        <input id="ft-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required>
        <button type="submit">Subscribe</button>
      </form>
    </div>
  </div>
  <div class="ft-low">
    <div class="ft-low-in">
      <div class="ft-brand"><b>Northwind</b>
        <p>Boards, reviews and release notes for teams that ship every week.</p></div>
      <nav class="ft-links" aria-label="Footer">
        <div><h2>Product</h2><ul><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
        <div><h2>Company</h2><ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></div>
        <div><h2>Resources</h2><ul><li><a href="#">Docs</a></li><li><a href="#">Status</a></li><li><a href="#">Support</a></li></ul></div>
      </nav>
    </div>
    <div class="ft-base">
      <p>© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul></nav>
    </div>
  </div>
</footer>

CSS

/* Two-band footer: a dark indigo newsletter band above a white band of links. */
.ft,.ft *{box-sizing:border-box}
:where(.ft) a{color:inherit;text-decoration:none}
:where(.ft) ul{list-style:none;margin:0;padding:0}
:where(.ft) :is(p,h2){margin:0}
.ft-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.ft-up{background:#1e1b4b;color:#c7c3e8;padding:40px 34px}
.ft-up-in{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;align-items:center;flex-wrap:wrap}
.ft-up h2{color:#fff;font-size:1.35rem;letter-spacing:-.02em;max-width:20ch;line-height:1.25}
.ft-up p{font-size:.86rem;margin-top:7px;max-width:38ch;line-height:1.6}
.ft-up form{display:flex;gap:8px;flex-wrap:wrap}
.ft-up input{flex:1 1 auto;width:230px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);border-radius:10px;
  padding:12px 14px;font:inherit;font-size:.88rem;color:#fff;min-width:0}
.ft-up input::placeholder{color:#a9a4d3}
.ft-up input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.ft-up button{border:0;background:#fff;color:#1e1b4b;font:inherit;font-size:.88rem;font-weight:700;
  padding:12px 22px;border-radius:10px;cursor:pointer}
.ft-up button:hover{background:#e8e6f7}
.ft-up button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.ft-low{background:#fff;padding:34px 34px 22px;color:#5b6270}
.ft-low a:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}
.ft-low-in{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1.3fr 3fr;gap:30px}
.ft-brand b{display:block;color:#16181d;font-size:1rem;font-weight:800;letter-spacing:-.02em}
.ft-brand p{font-size:.84rem;line-height:1.65;margin-top:8px;max-width:30ch}
.ft-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ft-links h2{color:#16181d;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px}
.ft-links ul{display:flex;flex-direction:column;gap:8px;font-size:.84rem}
.ft-low a:hover{color:#16181d}
.ft-base{max-width:1000px;margin:28px auto 0;padding-top:18px;border-top:1px solid #eceef2;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem}
.ft-base ul{display:flex;gap:16px}
@media (max-width:780px){.ft-low-in{grid-template-columns:1fr}.ft-links{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft-up{padding:36px 20px}.ft-low{padding:32px 20px 22px}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<footer class="ft">
  <div class="ft-up">
    <div class="ft-in d-flex flex-wrap justify-content-between align-items-center gap-4">
      <div><h2 class="mb-0">One email a month, worth opening</h2>
        <p class="mt-2 mb-0">What shipped, what broke, and what we learned fixing it. No product announcements dressed as newsletters.</p></div>
      <form action="#" method="post" onsubmit="event.preventDefault()">
        <label class="visually-hidden" for="ft-email">Email address</label>
        <div class="input-group">
          <input class="form-control" id="ft-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required>
          <button class="btn" type="submit">Subscribe</button>
        </div>
      </form>
    </div>
  </div>
  <div class="ft-low">
    <div class="ft-in">
      <div class="row g-4">
        <div class="ft-brand col-md-4"><b>Northwind</b>
          <p class="mt-2 mb-0">Boards, reviews and release notes for teams that ship every week.</p></div>
        <nav class="col-md-8" aria-label="Footer">
          <div class="row row-cols-2 row-cols-md-3 g-4">
            <div class="col"><h2>Product</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Overview</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">Changelog</a></li></ul></div>
            <div class="col"><h2>Company</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul></div>
            <div class="col"><h2>Resources</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Docs</a></li><li class="nav-item"><a class="nav-link" href="#">Status</a></li><li class="nav-item"><a class="nav-link" href="#">Support</a></li></ul></div>
          </div>
        </nav>
      </div>
    </div>
    <div class="ft-in ft-base d-flex flex-wrap justify-content-between gap-3 mt-4 pt-3">
      <p class="mb-0">© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">Cookies</a></li></ul></nav>
    </div>
  </div>
</footer>

CSS

/* Two-band footer: an .input-group newsletter form on dark indigo above a Bootstrap grid of
   .nav.flex-column link lists. */
.ft a{text-decoration:none}
.ft-up{background:#1e1b4b;color:#c7c3e8;padding:40px 34px}
.ft-in{max-width:1000px;margin:0 auto}
.ft-up h2{color:#fff;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;max-width:20ch;line-height:1.25}
.ft-up p{font-size:.86rem;max-width:38ch;line-height:1.6}
.ft-up .input-group{gap:8px;width:auto;flex:0 1 auto}
.ft-up .form-control{flex:1 1 auto;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;
  padding:12px 14px;font-size:.88rem}
.ft-up .form-control::placeholder{color:#a9a4d3}
.ft-up .form-control:focus{border-color:#fff;background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.ft-up .input-group>.form-control{width:230px}
.ft-up .input-group>.form-control,.ft-up .input-group>.btn{border-radius:10px!important;margin-left:0!important}
.ft-up .btn{--bs-btn-bg:#fff;--bs-btn-color:#1e1b4b;--bs-btn-border-color:#fff;--bs-btn-hover-bg:#e8e6f7;--bs-btn-hover-color:#1e1b4b;
  --bs-btn-hover-border-color:#e8e6f7;--bs-btn-active-bg:#e8e6f7;--bs-btn-active-color:#1e1b4b;--bs-btn-active-border-color:#e8e6f7;
  --bs-btn-font-size:.88rem;--bs-btn-font-weight:700;--bs-btn-padding-x:22px;--bs-btn-padding-y:12px}
.ft-up .btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
.ft-low{background:#fff;padding:34px 34px 22px;color:#5b6270}
.ft-low a:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;box-shadow:none}
.ft-brand b{display:block;color:#16181d;font-size:1rem;font-weight:800;letter-spacing:-.02em}
.ft-brand p{font-size:.84rem;line-height:1.65;max-width:30ch}
.ft-low h2{color:#16181d;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px;line-height:normal}
.ft-low .nav{--bs-nav-link-color:#5b6270;--bs-nav-link-hover-color:#16181d;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.84rem;gap:8px}
.ft-base{border-top:1px solid #eceef2;font-size:.8rem}
.ft-base .nav{--bs-nav-link-font-size:.8rem;gap:16px}
@media (max-width:575.98px){.ft-up{padding:36px 20px}.ft-low{padding:32px 20px 22px}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<footer>
  <div class="bg-[#1e1b4b] px-5 py-9 text-[#c7c3e8] min-[561px]:px-[34px] min-[561px]:py-10">
    <div class="mx-auto flex max-w-[1000px] flex-wrap items-center justify-between gap-[30px]">
      <div><h2 class="max-w-[20ch] text-[1.35rem] leading-[1.25] font-bold tracking-[-.02em] text-white">One email a month, worth opening</h2>
        <p class="mt-[7px] max-w-[38ch] text-[.86rem] leading-[1.6]">What shipped, what broke, and what we learned fixing it. No product announcements dressed as newsletters.</p></div>
      <form class="flex flex-wrap gap-2" action="#" method="post" onsubmit="event.preventDefault()">
        <label class="sr-only" for="ft-email">Email address</label>
        <input class="w-[230px] min-w-0 flex-auto rounded-[10px] border border-white/50 bg-white/8 px-3.5 py-3 text-[.88rem] text-white placeholder:text-[#a9a4d3] focus:border-white focus:bg-white/14 focus:shadow-[0_0_0_3px_rgba(255,255,255,.3)] focus:outline-none" id="ft-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required>
        <button class="cursor-pointer rounded-[10px] bg-white px-[22px] py-3 text-[.88rem] font-bold text-[#1e1b4b] hover:bg-[#e8e6f7] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="submit">Subscribe</button>
      </form>
    </div>
  </div>
  <div class="bg-white px-5 pt-8 pb-[22px] text-[#5b6270] min-[561px]:px-[34px] min-[561px]:pt-[34px]">
    <div class="mx-auto grid max-w-[1000px] grid-cols-1 gap-[30px] min-[781px]:grid-cols-[1.3fr_3fr]">
      <div><b class="block text-base font-extrabold tracking-[-.02em] text-[#16181d]">Northwind</b>
        <p class="mt-2 max-w-[30ch] text-[.84rem] leading-[1.65]">Boards, reviews and release notes for teams that ship every week.</p></div>
      <nav class="grid grid-cols-2 gap-[30px] min-[781px]:grid-cols-3 [&_a]:hover:text-[#16181d] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#4f46e5]" aria-label="Footer">
        <div><h2 class="mb-[11px] text-[.74rem] font-extrabold tracking-[.08em] text-[#16181d] uppercase">Product</h2><ul class="flex flex-col gap-2 text-[.84rem]"><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
        <div><h2 class="mb-[11px] text-[.74rem] font-extrabold tracking-[.08em] text-[#16181d] uppercase">Company</h2><ul class="flex flex-col gap-2 text-[.84rem]"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></div>
        <div><h2 class="mb-[11px] text-[.74rem] font-extrabold tracking-[.08em] text-[#16181d] uppercase">Resources</h2><ul class="flex flex-col gap-2 text-[.84rem]"><li><a href="#">Docs</a></li><li><a href="#">Status</a></li><li><a href="#">Support</a></li></ul></div>
      </nav>
    </div>
    <div class="mx-auto mt-7 flex max-w-[1000px] flex-wrap justify-between gap-3.5 border-t border-[#eceef2] pt-[18px] text-[.8rem]">
      <p>© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul class="flex gap-4 [&_a]:hover:text-[#16181d] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#4f46e5]"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul></nav>
    </div>
  </div>
</footer>

About this set

A footer in two bands, so the newsletter signup is not squeezed into a column. The upper band is dark indigo with a two-line heading (One email a month, worth opening), a sentence on what subscribers get, and an email form with a translucent field and a white Subscribe button. The lower band is white and holds the brand with a short description, three link columns (Product, Company, Resources) and a legal bar with Privacy, Terms and Cookies. Use it on a SaaS, blog or product site where the newsletter is a real goal and deserves its own space, while the links stay easy to scan. On a wide screen the heading and form sit side by side; on a phone they stack and the field grows to the full width with the button underneath. The field has a visually hidden label, type=”email”, autocomplete=”email” and required, so browsers can fill it and check it before submitting. The Bootstrap version builds the form with .input-group and .btn and the links with the grid and .nav.flex-column.

What’s included

Dedicated newsletter band above the link band
Email field with a hidden label, autocomplete="email" and required
Field border raised to 50% white so it meets 3:1 on indigo
Form stacks and the field fills the width on phones
Bootstrap .input-group form with rounded, separated controls

Accessibility

Both bands sit inside one footer. The email field has a visually hidden label and a white border plus a soft ring on focus; the button and links show a 2px outline on keyboard focus. Link columns sit in a nav labelled Footer, the legal links in one labelled Legal, and the placeholder text reaches 4.5:1 on the field.

Customise it

Change #1e1b4b (upper band) and #c7c3e8 (its text) in the .ft-up rules, and the white button colours. In Bootstrap the button colours are --bs-btn-* on .ft-up .btn; in Tailwind edit bg-[#1e1b4b], border-white/50 and the button utilities.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Footers