Open demo

CSS code

HTML 
<footer class="fl">
  <div class="fl-top">
    <div class="fl-brand"><b>Northwind</b><p>Boards, reviews and release notes for teams in 42 countries.</p></div>
    <nav class="fl-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="fl-prefs">
    <label class="fl-pref"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 010 18a15 15 0 010-18"/></svg>
      <span class="fl-sr">Language</span>
      <select name="language"><option value="en-GB">English (UK)</option><option value="de" lang="de">Deutsch</option><option value="fr" lang="fr">Français</option><option value="es" lang="es">Español</option><option value="ja" lang="ja">日本語</option></select></label>
    <label class="fl-pref"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3v18M8 7h6a3 3 0 010 6H9a3 3 0 000 6h7"/></svg>
      <span class="fl-sr">Currency</span>
      <select name="currency"><option value="GBP">GBP £</option><option value="EUR">EUR €</option><option value="USD">USD $</option><option value="JPY">JPY ¥</option></select></label>
    <p class="fl-note">Prices and delivery options change with the region you pick.</p>
  </div>
  <div class="fl-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>
</footer>
CSS 
/* International footer: link columns, a language and a currency <select> dressed as pills, and a legal bar. */
.fl{background:#12151c;color:#98a0ae;padding:42px 34px 24px}
.fl,.fl *{box-sizing:border-box}
:where(.fl) a{color:inherit;text-decoration:none}
:where(.fl) ul{list-style:none;margin:0;padding:0}
:where(.fl) :is(p,h2){margin:0}
:where(.fl) svg{display:block}
.fl a:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.fl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.fl-top{max-width:1060px;margin:0 auto;display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.fl-brand b{display:block;color:#fff;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.fl-brand p{font-size:.85rem;margin-top:8px;max-width:34ch;line-height:1.65}
.fl-links{display:flex;gap:44px;flex-wrap:wrap}
.fl h2{color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.fl-links ul{display:flex;flex-direction:column;gap:9px;font-size:.85rem}
.fl-links a:hover,.fl-base a:hover{color:#fff}

.fl-prefs{max-width:1060px;margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;gap:12px;flex-wrap:wrap}
.fl-pref{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border:1px solid #5d6576;
  border-radius:10px;padding:7px 11px}
.fl-pref:focus-within{outline:2px solid #a5b4fc;outline-offset:2px}
.fl-pref svg{width:15px;height:15px;stroke:#8a93a3;fill:none;stroke-width:2;flex-shrink:0}
.fl-pref select{background:none;border:0;color:#e7eaf0;font:inherit;font-size:.83rem;font-weight:600;cursor:pointer}
.fl-pref select:focus{outline:none}
.fl-pref option{background:#12151c;color:#e7eaf0}
.fl-note{font-size:.79rem;color:#8a93a3;display:flex;align-items:center;line-height:1.5;max-width:38ch}

.fl-base{max-width:1060px;margin:26px auto 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.81rem}
.fl-base ul{display:flex;gap:18px}
@media (max-width:560px){.fl{padding:40px 20px 24px}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fl" data-bs-theme="dark">
  <div class="fl-in"><div class="row g-4 justify-content-between">
    <div class="fl-brand col-lg-5"><b>Northwind</b><p class="mt-2 mb-0">Boards, reviews and release notes for teams in 42 countries.</p></div>
    <nav class="col-lg-auto" aria-label="Footer">
      <div class="d-flex flex-wrap row-gap-4 column-gap-5">
        <div><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><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><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="fl-in fl-prefs d-flex flex-wrap gap-2 mt-4 pt-4">
    <label class="fl-pref d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 010 18a15 15 0 010-18"/></svg>
      <span class="visually-hidden">Language</span>
      <select class="form-select" name="language"><option value="en-GB">English (UK)</option><option value="de" lang="de">Deutsch</option><option value="fr" lang="fr">Français</option><option value="es" lang="es">Español</option><option value="ja" lang="ja">日本語</option></select></label>
    <label class="fl-pref d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3v18M8 7h6a3 3 0 010 6H9a3 3 0 000 6h7"/></svg>
      <span class="visually-hidden">Currency</span>
      <select class="form-select" name="currency"><option value="GBP">GBP £</option><option value="EUR">EUR €</option><option value="USD">USD $</option><option value="JPY">JPY ¥</option></select></label>
    <p class="fl-note d-flex align-items-center mb-0">Prices and delivery options change with the region you pick.</p>
  </div>
  <div class="fl-in fl-base d-flex flex-wrap justify-content-between gap-3 mt-4">
    <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>
</footer>
CSS 
/* data-bs-theme="dark" gives .form-select a light chevron; the pills, links and legal bar are
   restyled through --bs-* variables on .fl. */
.fl{--bs-body-bg:#12151c;background:#12151c;color:#98a0ae;padding:42px 34px 24px}
.fl a{text-decoration:none}
.fl a:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px;box-shadow:none}
.fl-in{max-width:1060px;margin:0 auto}
.fl-brand b{display:block;color:#fff;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.fl-brand p{font-size:.85rem;max-width:34ch;line-height:1.65}
.fl h2{color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;line-height:normal}
.fl .nav{--bs-nav-link-color:#98a0ae;--bs-nav-link-hover-color:#fff;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.85rem;gap:9px}
.fl-prefs{border-top:1px solid rgba(255,255,255,.09)}
.fl-pref{background:rgba(255,255,255,.05);border:1px solid #5d6576;border-radius:10px;padding:7px 11px}
.fl-pref:focus-within{outline:2px solid #a5b4fc;outline-offset:2px}
.fl-pref svg{width:15px;height:15px;stroke:#8a93a3;fill:none;stroke-width:2;flex-shrink:0}
.fl-pref .form-select{width:auto;background-color:transparent;border:0;padding:0 1.25rem 0 0;background-position:right center;background-size:12px 9px;
  color:#e7eaf0;font-size:.83rem;font-weight:600;cursor:pointer}
.fl-pref .form-select:focus{box-shadow:none}
.fl-pref option{background:#12151c;color:#e7eaf0}
.fl-note{font-size:.79rem;color:#8a93a3;line-height:1.5;max-width:38ch}
.fl-base{font-size:.81rem}
.fl-base .nav{--bs-nav-link-font-size:.81rem;gap:18px}
@media (max-width:575.98px){.fl{padding:40px 20px 24px}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="bg-[#12151c] px-5 pt-10 pb-6 text-[#98a0ae] min-[561px]:px-[34px] min-[561px]:pt-[42px]">
  <div class="mx-auto flex max-w-[1060px] flex-wrap justify-between gap-[34px]">
    <div><b class="block text-[1.05rem] font-extrabold tracking-[-.02em] text-white">Northwind</b><p class="mt-2 max-w-[34ch] text-[.85rem] leading-[1.65]">Boards, reviews and release notes for teams in 42 countries.</p></div>
    <nav class="flex flex-wrap gap-11 [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#a5b4fc]" aria-label="Footer">
      <div><h2 class="mb-3 text-[.76rem] font-extrabold tracking-[.08em] text-white uppercase">Product</h2><ul class="flex flex-col gap-[9px] text-[.85rem]"><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
      <div><h2 class="mb-3 text-[.76rem] font-extrabold tracking-[.08em] text-white uppercase">Company</h2><ul class="flex flex-col gap-[9px] text-[.85rem]"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></div>
      <div><h2 class="mb-3 text-[.76rem] font-extrabold tracking-[.08em] text-white uppercase">Resources</h2><ul class="flex flex-col gap-[9px] text-[.85rem]"><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-8 flex max-w-[1060px] flex-wrap gap-3 border-t border-white/[.09] pt-6">
    <label class="flex items-center gap-[9px] rounded-[10px] border border-[#5d6576] bg-white/5 px-[11px] py-[7px] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[#a5b4fc]"><svg class="size-[15px] shrink-0 fill-none stroke-[#8a93a3] stroke-2" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 010 18a15 15 0 010-18"/></svg>
      <span class="sr-only">Language</span>
      <select class="cursor-pointer text-[.83rem] font-semibold text-[#e7eaf0] focus:outline-none [&>option]:bg-[#12151c]" name="language"><option value="en-GB">English (UK)</option><option value="de" lang="de">Deutsch</option><option value="fr" lang="fr">Français</option><option value="es" lang="es">Español</option><option value="ja" lang="ja">日本語</option></select></label>
    <label class="flex items-center gap-[9px] rounded-[10px] border border-[#5d6576] bg-white/5 px-[11px] py-[7px] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[#a5b4fc]"><svg class="size-[15px] shrink-0 fill-none stroke-[#8a93a3] stroke-2" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3v18M8 7h6a3 3 0 010 6H9a3 3 0 000 6h7"/></svg>
      <span class="sr-only">Currency</span>
      <select class="cursor-pointer text-[.83rem] font-semibold text-[#e7eaf0] focus:outline-none [&>option]:bg-[#12151c]" name="currency"><option value="GBP">GBP £</option><option value="EUR">EUR €</option><option value="USD">USD $</option><option value="JPY">JPY ¥</option></select></label>
    <p class="flex max-w-[38ch] items-center text-[.79rem] leading-[1.5] text-[#8a93a3]">Prices and delivery options change with the region you pick.</p>
  </div>
  <div class="mx-auto mt-[26px] flex max-w-[1060px] flex-wrap justify-between gap-4 text-[.81rem]">
    <p>© Northwind Ltd.</p>
    <nav aria-label="Legal"><ul class="flex gap-[18px] [&_a]:hover:text-white [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#a5b4fc]"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul></nav>
  </div>
</footer>

About this set

A dark footer for a product sold in several countries. The top row pairs the brand and a one-line description with three link columns (Product, Company, Resources). Under a hairline divider sits a preferences row: a language picker with a globe icon and a currency picker with a currency icon, both real select elements dressed as rounded pills, followed by a short note that prices and delivery depend on the region. A legal bar with the copyright line and Privacy, Terms and Cookies links finishes it. Use it on a shop, SaaS or travel site where visitors expect to change language or currency from any page. Because the pickers are native selects they work with the keyboard, submit with a form and show the platform’s own option list on phones. Language options carry a lang attribute, so a screen reader pronounces Deutsch, Français and 日本語 correctly. The pill takes the focus outline when the select inside it is focused. The Bootstrap version sets data-bs-theme=”dark” so .form-select draws a light chevron.

What’s included

  • Language and currency pickers built on native select elements
  • lang attributes on each language option for correct pronunciation
  • Pill outline drawn with :focus-within when the select has focus
  • Pill border lightened to meet 3:1 against the dark background
  • Bootstrap version uses .form-select under data-bs-theme="dark"

Accessibility

Each select is named by visually hidden text inside its label (Language, Currency). Link columns sit in a nav labelled Footer and the legal links in one labelled Legal. Keyboard focus shows a 2px lavender outline on links and around the whole pill for the selects, and the grey note text meets 4.5:1 on #12151c.

Customise it

Change #12151c (background), #5d6576 (pill border) and #a5b4fc (focus) in the .fl rules. In Bootstrap the link colours are --bs-nav-link-* on .fl .nav; in Tailwind edit the bg-[#12151c], border-[#5d6576] and outline-[#a5b4fc] utilities. Add or remove option elements for your locales.