Shop Footer with Trust Row in CSS, Bootstrap & Tailwind

<footer class="fe">
  <div class="fe-trust">
    <ul>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7h11v8H4zM15 10h4l2 3v2h-6z"/><circle cx="7.5" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></svg><span><b>Free delivery over £40</b><span>2–4 working days</span></span></li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 12a8 8 0 11-2.3-5.7"/><path d="M20 4v5h-5"/></svg><span><b>60-day returns</b><span>No questions asked</span></span></li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg><span><b>Secure checkout</b><span>3-D Secure on every card</span></span></li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span><b>Support 9–6</b><span>Real people, UK based</span></span></li>
    </ul>
  </div>
  <div class="fe-cols">
    <nav class="fe-links" aria-label="Footer">
      <div><h2>Shop</h2><ul><li><a href="#">New in</a></li><li><a href="#">Kitchen</a></li><li><a href="#">Tableware</a></li><li><a href="#">Sale</a></li></ul></div>
      <div><h2>Help</h2><ul><li><a href="#">Track an order</a></li><li><a href="#">Delivery</a></li><li><a href="#">Returns</a></li><li><a href="#">Contact</a></li></ul></div>
      <div><h2>About</h2><ul><li><a href="#">Our story</a></li><li><a href="#">Makers</a></li><li><a href="#">Sustainability</a></li><li><a href="#">Stockists</a></li></ul></div>
      <div><h2>Account</h2><ul><li><a href="#">Sign in</a></li><li><a href="#">Orders</a></li><li><a href="#">Wishlist</a></li><li><a href="#">Gift cards</a></li></ul></div>
    </nav>
    <div class="fe-news">
      <h2>Newsletter</h2>
      <p>New arrivals and the occasional discount. One email a month, never more.</p>
      <form action="#" method="post" onsubmit="event.preventDefault()">
        <label class="fe-sr" for="fe-email">Email address</label>
        <input id="fe-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required>
        <button type="submit">Join</button>
      </form>
      <div class="fe-pay" role="img" aria-label="We accept Visa, Mastercard, American Express, PayPal and Apple Pay">
        <span style="background:#1a1f71">VISA</span><span style="background:#eb001b">MC</span><span style="background:#016fd0">AMEX</span><span style="background:#003087">PAYPAL</span><span style="background:#111">APPLE PAY</span>
      </div>
    </div>
  </div>
  <div class="fe-base">
    <div>
      <p>© Copperleaf Ltd. Registered in England and Wales, company no. 00000000.</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>

/* Shop footer: a trust row, four link columns, a newsletter form with payment marks, and a legal bar. */
.fe{background:#fff;border-top:1px solid #e8eaef;color:#5a6273}
.fe,.fe *{box-sizing:border-box}
:where(.fe) a{color:inherit;text-decoration:none}
:where(.fe) ul{list-style:none;margin:0;padding:0}
:where(.fe) :is(p,h2){margin:0}
:where(.fe) svg{display:block}
.fe a:focus-visible,.fe button:focus-visible{outline:2px solid #0f766e;outline-offset:2px}
.fe-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.fe-trust{background:#f6f8fb;border-bottom:1px solid #e8eaef;padding:20px 34px}
.fe-trust ul{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fe-trust li{display:flex;gap:11px;align-items:center}
.fe-trust svg{width:20px;height:20px;stroke:#0f766e;fill:none;stroke-width:2;flex-shrink:0}
.fe-trust b{display:block;color:#141a24;font-size:.83rem}
.fe-trust span span{font-size:.76rem}

.fe-cols{max-width:1100px;margin:0 auto;padding:40px 34px 30px;display:grid;grid-template-columns:4fr 1.4fr;gap:32px}
.fe-links{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.fe h2{color:#141a24;font-size:.77rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:13px}
.fe-links ul{display:flex;flex-direction:column;gap:9px;font-size:.85rem}
.fe-links a:hover,.fe-base a:hover{color:#141a24}

.fe-news p{font-size:.85rem;line-height:1.6;margin-bottom:12px}
.fe-news form{display:flex;gap:7px}
.fe-news input{flex:1;min-width:0;border:1px solid #8a93a3;border-radius:9px;padding:10px 12px;
  font:inherit;font-size:.85rem;color:#141a24;background:#fff}
.fe-news input:focus{outline:none;border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.25)}
.fe-news button{border:0;background:#0f766e;color:#fff;font:inherit;font-size:.85rem;font-weight:700;
  padding:10px 16px;border-radius:9px;cursor:pointer}
.fe-news button:hover{background:#0d5f59}
.fe-pay{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap}
.fe-pay span{font-size:.62rem;font-weight:800;letter-spacing:.03em;color:#fff;padding:5px 9px;border-radius:5px}

.fe-base{border-top:1px solid #e8eaef;padding:18px 34px}
.fe-base>div{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.81rem}
.fe-base ul{display:flex;gap:18px}

@media (max-width:900px){.fe-cols{grid-template-columns:1fr}.fe-links{grid-template-columns:1fr 1fr}.fe-trust ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fe-trust{padding:20px}.fe-cols{padding:36px 20px 28px}.fe-base{padding:18px 20px}
  .fe-links{grid-template-columns:1fr}.fe-trust ul{grid-template-columns:1fr}}

<footer class="fe border-top">
  <div class="fe-trust border-bottom">
    <div class="fe-in"><ul class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4 list-unstyled mb-0">
      <li class="col d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7h11v8H4zM15 10h4l2 3v2h-6z"/><circle cx="7.5" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></svg><span><b>Free delivery over £40</b><small>2–4 working days</small></span></li>
      <li class="col d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 12a8 8 0 11-2.3-5.7"/><path d="M20 4v5h-5"/></svg><span><b>60-day returns</b><small>No questions asked</small></span></li>
      <li class="col d-flex align-items-center gap-2"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg><span><b>Secure checkout</b><small>3-D Secure on every card</small></span></li>
      <li class="col 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="M12 7v5l3 2"/></svg><span><b>Support 9–6</b><small>Real people, UK based</small></span></li>
    </ul></div>
  </div>
  <div class="fe-cols">
    <div class="fe-in"><div class="row g-4">
      <nav class="col-lg-9" aria-label="Footer">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4">
          <div class="col"><h2>Shop</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">New in</a></li><li class="nav-item"><a class="nav-link" href="#">Kitchen</a></li><li class="nav-item"><a class="nav-link" href="#">Tableware</a></li><li class="nav-item"><a class="nav-link" href="#">Sale</a></li></ul></div>
          <div class="col"><h2>Help</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Track an order</a></li><li class="nav-item"><a class="nav-link" href="#">Delivery</a></li><li class="nav-item"><a class="nav-link" href="#">Returns</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul></div>
          <div class="col"><h2>About</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Our story</a></li><li class="nav-item"><a class="nav-link" href="#">Makers</a></li><li class="nav-item"><a class="nav-link" href="#">Sustainability</a></li><li class="nav-item"><a class="nav-link" href="#">Stockists</a></li></ul></div>
          <div class="col"><h2>Account</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Sign in</a></li><li class="nav-item"><a class="nav-link" href="#">Orders</a></li><li class="nav-item"><a class="nav-link" href="#">Wishlist</a></li><li class="nav-item"><a class="nav-link" href="#">Gift cards</a></li></ul></div>
        </div>
      </nav>
      <div class="col-lg-3 fe-news">
        <h2>Newsletter</h2>
        <p class="mb-3">New arrivals and the occasional discount. One email a month, never more.</p>
        <form action="#" method="post" onsubmit="event.preventDefault()">
          <label class="visually-hidden" for="fe-email">Email address</label>
          <div class="input-group">
            <input class="form-control" id="fe-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required>
            <button class="btn" type="submit">Join</button>
          </div>
        </form>
        <div class="fe-pay d-flex flex-wrap gap-2 mt-3" role="img" aria-label="We accept Visa, Mastercard, American Express, PayPal and Apple Pay">
          <span class="badge" style="background:#1a1f71">VISA</span><span class="badge" style="background:#eb001b">MC</span><span class="badge" style="background:#016fd0">AMEX</span><span class="badge" style="background:#003087">PAYPAL</span><span class="badge" style="background:#111">APPLE PAY</span>
        </div>
      </div>
    </div></div>
  </div>
  <div class="fe-base border-top">
    <div class="fe-in d-flex flex-wrap justify-content-between gap-3">
      <p class="mb-0">© Copperleaf Ltd. Registered in England and Wales, company no. 00000000.</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>

/* Bootstrap grid (.row/.col-*), .nav.flex-column link lists and an .input-group newsletter form,
   restyled through the --bs-* variables on .fe. */
.fe{--bs-border-color:#e8eaef;background:#fff;color:#5a6273}
.fe a{text-decoration:none}
.fe a:focus-visible,.fe .btn:focus-visible{outline:2px solid #0f766e;outline-offset:2px;box-shadow:none}
.fe-in{max-width:1100px;margin:0 auto}
.fe-trust{background:#f6f8fb;padding:20px 34px}
.fe-trust svg{width:20px;height:20px;stroke:#0f766e;fill:none;stroke-width:2;flex-shrink:0}
.fe-trust b{display:block;color:#141a24;font-size:.83rem}
.fe-trust small{font-size:.76rem}
.fe-cols{padding:40px 34px 30px}
.fe h2{color:#141a24;font-size:.77rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:13px;line-height:normal}
.fe .nav{--bs-nav-link-color:#5a6273;--bs-nav-link-hover-color:#141a24;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.85rem;gap:9px}
.fe-news p{font-size:.85rem;line-height:1.6}
.fe-news .input-group{gap:7px}
.fe-news .form-control{border-color:#8a93a3;font-size:.85rem;padding:10px 12px;color:#141a24}
.fe-news .form-control:focus{border-color:#0f766e;box-shadow:0 0 0 3px rgba(15,118,110,.25)}
.fe-news .input-group>.form-control,.fe-news .input-group>.btn{border-radius:9px!important;margin-left:0!important}
.fe-news .btn{--bs-btn-bg:#0f766e;--bs-btn-border-color:#0f766e;--bs-btn-color:#fff;--bs-btn-hover-bg:#0d5f59;
  --bs-btn-hover-border-color:#0d5f59;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#0d5f59;--bs-btn-active-border-color:#0d5f59;
  --bs-btn-font-size:.85rem;--bs-btn-font-weight:700;--bs-btn-padding-x:16px;--bs-btn-padding-y:10px}
.fe-pay .badge{--bs-badge-font-size:.62rem;--bs-badge-font-weight:800;--bs-badge-padding-x:9px;--bs-badge-padding-y:5px;letter-spacing:.03em;border-radius:5px}
.fe-base{padding:18px 34px;font-size:.81rem}
.fe-base .nav{--bs-nav-link-font-size:.81rem;gap:18px}
@media (max-width:575.98px){.fe-trust{padding:20px}.fe-cols{padding:36px 20px 28px}.fe-base{padding:18px 20px}}

<footer class="border-t border-[#e8eaef] bg-white text-[#5a6273]">
  <div class="border-b border-[#e8eaef] bg-[#f6f8fb] px-5 py-5 min-[561px]:px-[34px]">
    <ul class="mx-auto grid max-w-[1100px] grid-cols-1 gap-[22px] min-[561px]:grid-cols-2 min-[901px]:grid-cols-4">
      <li class="flex items-center gap-[11px]"><svg class="size-5 shrink-0 fill-none stroke-[#0f766e] stroke-2" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7h11v8H4zM15 10h4l2 3v2h-6z"/><circle cx="7.5" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></svg><span><b class="block text-[.83rem] text-[#141a24]">Free delivery over £40</b><span class="text-[.76rem]">2–4 working days</span></span></li>
      <li class="flex items-center gap-[11px]"><svg class="size-5 shrink-0 fill-none stroke-[#0f766e] stroke-2" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 12a8 8 0 11-2.3-5.7"/><path d="M20 4v5h-5"/></svg><span><b class="block text-[.83rem] text-[#141a24]">60-day returns</b><span class="text-[.76rem]">No questions asked</span></span></li>
      <li class="flex items-center gap-[11px]"><svg class="size-5 shrink-0 fill-none stroke-[#0f766e] stroke-2" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg><span><b class="block text-[.83rem] text-[#141a24]">Secure checkout</b><span class="text-[.76rem]">3-D Secure on every card</span></span></li>
      <li class="flex items-center gap-[11px]"><svg class="size-5 shrink-0 fill-none stroke-[#0f766e] stroke-2" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span><b class="block text-[.83rem] text-[#141a24]">Support 9–6</b><span class="text-[.76rem]">Real people, UK based</span></span></li>
    </ul>
  </div>
  <div class="mx-auto grid max-w-[1100px] grid-cols-1 gap-8 px-5 pt-9 pb-7 min-[561px]:px-[34px] min-[561px]:pt-10 min-[561px]:pb-[30px] min-[901px]:grid-cols-[4fr_1.4fr]">
    <nav class="grid grid-cols-1 gap-8 min-[561px]:grid-cols-2 min-[901px]:grid-cols-4" aria-label="Footer">
      <div><h2 class="mb-[13px] text-[.77rem] font-extrabold tracking-[.08em] text-[#141a24] uppercase">Shop</h2><ul class="flex flex-col gap-[9px] text-[.85rem] [&_a]:hover:text-[#141a24] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#0f766e]"><li><a href="#">New in</a></li><li><a href="#">Kitchen</a></li><li><a href="#">Tableware</a></li><li><a href="#">Sale</a></li></ul></div>
      <div><h2 class="mb-[13px] text-[.77rem] font-extrabold tracking-[.08em] text-[#141a24] uppercase">Help</h2><ul class="flex flex-col gap-[9px] text-[.85rem] [&_a]:hover:text-[#141a24] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#0f766e]"><li><a href="#">Track an order</a></li><li><a href="#">Delivery</a></li><li><a href="#">Returns</a></li><li><a href="#">Contact</a></li></ul></div>
      <div><h2 class="mb-[13px] text-[.77rem] font-extrabold tracking-[.08em] text-[#141a24] uppercase">About</h2><ul class="flex flex-col gap-[9px] text-[.85rem] [&_a]:hover:text-[#141a24] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#0f766e]"><li><a href="#">Our story</a></li><li><a href="#">Makers</a></li><li><a href="#">Sustainability</a></li><li><a href="#">Stockists</a></li></ul></div>
      <div><h2 class="mb-[13px] text-[.77rem] font-extrabold tracking-[.08em] text-[#141a24] uppercase">Account</h2><ul class="flex flex-col gap-[9px] text-[.85rem] [&_a]:hover:text-[#141a24] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#0f766e]"><li><a href="#">Sign in</a></li><li><a href="#">Orders</a></li><li><a href="#">Wishlist</a></li><li><a href="#">Gift cards</a></li></ul></div>
    </nav>
    <div>
      <h2 class="mb-[13px] text-[.77rem] font-extrabold tracking-[.08em] text-[#141a24] uppercase">Newsletter</h2>
      <p class="mb-3 text-[.85rem] leading-[1.6]">New arrivals and the occasional discount. One email a month, never more.</p>
      <form class="flex gap-[7px]" action="#" method="post" onsubmit="event.preventDefault()">
        <label class="sr-only" for="fe-email">Email address</label>
        <input class="min-w-0 flex-1 rounded-[9px] border border-[#8a93a3] bg-white px-3 py-2.5 text-[.85rem] text-[#141a24] placeholder:text-[#6b7382] focus:border-[#0f766e] focus:shadow-[0_0_0_3px_rgba(15,118,110,.25)] focus:outline-none" id="fe-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required>
        <button class="cursor-pointer rounded-[9px] bg-[#0f766e] px-4 py-2.5 text-[.85rem] font-bold text-white hover:bg-[#0d5f59] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e]" type="submit">Join</button>
      </form>
      <div class="mt-4 flex flex-wrap gap-[7px] text-[.62rem] font-extrabold tracking-[.03em] text-white [&>span]:rounded-[5px] [&>span]:px-[9px] [&>span]:py-[5px]" role="img" aria-label="We accept Visa, Mastercard, American Express, PayPal and Apple Pay">
        <span class="bg-[#1a1f71]">VISA</span><span class="bg-[#eb001b]">MC</span><span class="bg-[#016fd0]">AMEX</span><span class="bg-[#003087]">PAYPAL</span><span class="bg-[#111]">APPLE PAY</span>
      </div>
    </div>
  </div>
  <div class="border-t border-[#e8eaef] px-5 py-[18px] min-[561px]:px-[34px]">
    <div class="mx-auto flex max-w-[1100px] flex-wrap justify-between gap-4 text-[.81rem]">
      <p>© Copperleaf Ltd. Registered in England and Wales, company no. 00000000.</p>
      <nav aria-label="Legal"><ul class="flex gap-[18px] [&_a]:hover:text-[#141a24] [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2 [&_a]:focus-visible:outline-[#0f766e]"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul></nav>
    </div>
  </div>
</footer>