Open demo

CSS code

HTML 
<div><span class="lbl">Photo library with popular searches</span>
<section class="hr hr-photo" aria-labelledby="hr-photo-title">
  <h2 id="hr-photo-title">38,000 free photos from independent photographers</h2>
  <p class="hr-sub">Every image on Stillframe is free to use, with new sets added every Monday.</p>
  <form class="hr-form" role="search" aria-label="Photos">
    <label class="sr-only" for="hr-photos">Search photos</label>
    <svg class="hr-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="hr-input" id="hr-photos" type="search" name="q" placeholder="Try “foggy harbour”">
    <button class="hr-btn" type="submit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="hr-btn-text">Search</span></button>
  </form>
  <div class="hr-tags">
    <span id="hr-popular">Popular:</span>
    <ul aria-labelledby="hr-popular">
      <li><a href="?q=mountains">Mountains</a></li><li><a href="?q=coffee">Coffee</a></li><li><a href="?q=workspace">Workspace</a></li>
      <li><a href="?q=autumn">Autumn</a></li><li><a href="?q=architecture">Architecture</a></li>
    </ul>
  </div>
</section></div>

<div><span class="lbl">Help centre with top articles</span>
<section class="hr hr-help" aria-labelledby="hr-help-title">
  <span class="hr-eyebrow">Ledgerly Help Centre</span>
  <h2 id="hr-help-title">How can we help?</h2>
  <p class="hr-sub">Search 240 articles on invoicing, payments and your account.</p>
  <form class="hr-form" role="search" aria-label="Help articles">
    <label class="sr-only" for="hr-help-q">Search help articles</label>
    <svg class="hr-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="hr-input" id="hr-help-q" type="search" name="q" placeholder="Ask a question">
    <button class="hr-btn" type="submit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="hr-btn-text">Search</span></button>
  </form>
  <ul class="hr-links" aria-label="Top articles">
    <li><a href="/help/billing-address"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Change your billing address</a></li>
    <li><a href="/help/export-csv"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Export invoices to CSV</a></li>
    <li><a href="/help/team-members"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Add a team member</a></li>
    <li><a href="/help/recurring-invoices"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Set up recurring invoices</a></li>
  </ul>
</section></div>
CSS 
/* Hero search: the search is the page's main action. A big field with the button inside, then one-tap links
   (popular searches or top articles) so people who don't know what to type still have somewhere to go. */
.hr{--hr-accent:#6d28d9;--hr-accent-dark:#5b21b6;--hr-ink:#0f172a;--hr-muted:#64748b;
  position:relative;overflow:hidden;padding:clamp(40px,7vw,76px) clamp(20px,5vw,56px);border-radius:24px;text-align:center}
.hr *{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hr h2{margin:0 auto 10px;max-width:22ch;font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.hr-sub{margin:0 auto 28px;max-width:46ch;font-size:clamp(.95rem,2vw,1.08rem)}
.hr-form{position:relative;max-width:620px;margin:0 auto;text-align:left}
.hr-ico{position:absolute;left:22px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--hr-muted);pointer-events:none}
.hr-input{width:100%;height:64px;margin:0;padding:0 138px 0 58px;font:inherit;font-size:1.06rem;color:var(--hr-ink);background:#fff;
  border:1px solid transparent;border-radius:999px;-webkit-appearance:none;appearance:none;box-shadow:0 20px 50px -18px rgba(15,23,42,.45);
  transition:box-shadow .2s}
.hr-input::placeholder{color:var(--hr-muted);opacity:1}
.hr-input:focus{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.55),0 20px 50px -18px rgba(15,23,42,.45)}
.hr-btn{position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;gap:8px;height:48px;margin:0;padding:0 24px;border:0;border-radius:999px;
  background:var(--hr-accent);color:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .15s}
.hr-btn:hover{background:var(--hr-accent-dark)}
.hr-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hr-btn svg{width:18px;height:18px}
.hr-tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:20px auto 0;max-width:620px;font-size:.88rem}
.hr-tags ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.hr-tags a{display:inline-block;padding:5px 13px;border-radius:999px;text-decoration:none;transition:background-color .15s}
.hr-tags a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* A: photo library — dark mesh gradient, translucent tags */
.hr-photo{background:#1e1b4b;color:#fff;
  background-image:radial-gradient(60% 80% at 12% 10%,#7c3aed 0,transparent 60%),radial-gradient(50% 70% at 92% 90%,#db2777 0,transparent 60%),
  radial-gradient(40% 60% at 80% 0,#2563eb 0,transparent 60%)}
.hr-photo .hr-sub{color:#e0e7ff}
.hr-photo .hr-tags span{color:#e0e7ff;font-weight:600}
.hr-photo .hr-tags a{color:#fff;background:rgba(15,12,50,.38);border:1px solid rgba(255,255,255,.28)}
.hr-photo .hr-tags a:hover{background:rgba(15,12,50,.6)}
/* B: help centre — light, with a bordered field and article links */
.hr-help{--hr-accent:#047857;--hr-accent-dark:#065f46;background:#ecfdf5;color:var(--hr-ink);
  background-image:radial-gradient(70% 90% at 50% 0,#d1fae5 0,transparent 70%)}
.hr-eyebrow{display:inline-block;margin-bottom:12px;padding:4px 12px;border-radius:999px;background:#fff;color:#065f46;font-size:.8rem;font-weight:700;letter-spacing:.02em}
.hr-help .hr-sub{color:#334155}
.hr-help .hr-input{border-color:#6b8f80;box-shadow:0 14px 34px -18px rgba(6,78,59,.35)}
.hr-help .hr-input:focus{border-color:var(--hr-accent);box-shadow:0 0 0 1px var(--hr-accent),0 0 0 5px rgba(4,120,87,.2)}
.hr-help .hr-btn:focus-visible{outline-color:var(--hr-accent)}
.hr-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:620px;margin:22px auto 0;padding:0;list-style:none;text-align:left}
.hr-links a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #cfe3da;color:#1f2937;
  font-size:.92rem;font-weight:500;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.hr-links a:hover{border-color:var(--hr-accent);box-shadow:0 6px 16px -8px rgba(6,78,59,.3)}
.hr-links a:focus-visible{outline:2px solid var(--hr-accent);outline-offset:2px}
.hr-links svg{flex:none;width:18px;height:18px;color:var(--hr-accent)}
@media (max-width:520px){
  .hr-input{height:58px;padding-right:66px;padding-left:50px}
  .hr-ico{left:18px}
  .hr-btn{width:44px;height:44px;padding:0;justify-content:center;top:7px;right:7px}
  .hr-btn-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .hr-links{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.hr-input,.hr-btn,.hr-tags a,.hr-links a{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Photo library with popular searches</span>
<section class="hr hr-photo text-center" aria-labelledby="hr-photo-title">
  <h2 id="hr-photo-title">38,000 free photos from independent photographers</h2>
  <p class="hr-sub">Every image on Stillframe is free to use, with new sets added every Monday.</p>
  <form class="hr-form" role="search" aria-label="Photos">
    <label class="visually-hidden" for="hr-photos">Search photos</label>
    <svg class="hr-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="form-control rounded-pill" id="hr-photos" type="search" name="q" placeholder="Try “foggy harbour”">
    <button class="btn rounded-pill hr-btn" type="submit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="hr-btn-text">Search</span></button>
  </form>
  <div class="hr-tags d-flex flex-wrap align-items-center justify-content-center gap-2">
    <span id="hr-popular">Popular:</span>
    <ul class="list-unstyled d-flex flex-wrap justify-content-center gap-2 m-0" aria-labelledby="hr-popular">
      <li><a class="btn rounded-pill hr-tag" href="?q=mountains">Mountains</a></li><li><a class="btn rounded-pill hr-tag" href="?q=coffee">Coffee</a></li><li><a class="btn rounded-pill hr-tag" href="?q=workspace">Workspace</a></li>
      <li><a class="btn rounded-pill hr-tag" href="?q=autumn">Autumn</a></li><li><a class="btn rounded-pill hr-tag" href="?q=architecture">Architecture</a></li>
    </ul>
  </div>
</section></div>

<div><span class="lbl">Help centre with top articles</span>
<section class="hr hr-help text-center" aria-labelledby="hr-help-title">
  <span class="badge rounded-pill">Ledgerly Help Centre</span>
  <h2 id="hr-help-title">How can we help?</h2>
  <p class="hr-sub">Search 240 articles on invoicing, payments and your account.</p>
  <form class="hr-form" role="search" aria-label="Help articles">
    <label class="visually-hidden" for="hr-help-q">Search help articles</label>
    <svg class="hr-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="form-control rounded-pill" id="hr-help-q" type="search" name="q" placeholder="Ask a question">
    <button class="btn rounded-pill hr-btn" type="submit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="hr-btn-text">Search</span></button>
  </form>
  <div class="hr-links">
  <ul class="row row-cols-1 row-cols-sm-2 list-unstyled mb-0" aria-label="Top articles">
    <li class="col"><a href="/help/billing-address"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Change your billing address</a></li>
    <li class="col"><a href="/help/export-csv"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Export invoices to CSV</a></li>
    <li class="col"><a href="/help/team-members"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Add a team member</a></li>
    <li class="col"><a href="/help/recurring-invoices"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Set up recurring invoices</a></li>
  </ul>
  </div>
</section></div>
CSS 
/* Hero search on Bootstrap: .form-control.rounded-pill with the .btn inside, tag links as small pill buttons and a .row of article links. */
.hr{--hr-accent:#6d28d9;--hr-accent-dark:#5b21b6;--hr-ink:#0f172a;--hr-muted:#64748b;
  position:relative;overflow:hidden;padding:clamp(40px,7vw,76px) clamp(20px,5vw,56px);border-radius:24px}
.hr h2{margin:0 auto 10px;max-width:22ch;font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.hr-sub{margin:0 auto 28px;max-width:46ch;font-size:clamp(.95rem,2vw,1.08rem)}
.hr-form{position:relative;max-width:620px;margin:0 auto;text-align:left}
.hr-ico{position:absolute;left:22px;top:50%;z-index:1;width:22px;height:22px;margin-top:-11px;color:var(--hr-muted);pointer-events:none}
.hr .form-control{height:64px;padding:0 138px 0 58px;font-size:1.06rem;color:var(--hr-ink);border-color:transparent;-webkit-appearance:none;appearance:none;
  box-shadow:0 20px 50px -18px rgba(15,23,42,.45)}
.hr .form-control::placeholder{color:var(--hr-muted);opacity:1}
.hr .form-control:focus{border-color:transparent;box-shadow:0 0 0 4px rgba(255,255,255,.55),0 20px 50px -18px rgba(15,23,42,.45)}
.hr .hr-btn{--bs-btn-padding-x:24px;--bs-btn-font-weight:700;--bs-btn-border-width:0;--bs-btn-bg:var(--hr-accent);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--hr-accent-dark);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--hr-accent-dark);--bs-btn-active-color:#fff;
  position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;gap:8px;height:48px}
.hr .hr-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:none}
.hr-btn svg{width:18px;height:18px}
.hr-tags{max-width:620px;margin:20px auto 0;font-size:.88rem}
.hr .hr-tag{--bs-btn-padding-x:13px;--bs-btn-padding-y:5px;--bs-btn-font-size:.88rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5}
.hr .hr-tag:focus-visible{outline:2px solid currentColor;outline-offset:2px;box-shadow:none}
/* A: photo library */
.hr-photo{background:#1e1b4b;color:#fff;
  background-image:radial-gradient(60% 80% at 12% 10%,#7c3aed 0,transparent 60%),radial-gradient(50% 70% at 92% 90%,#db2777 0,transparent 60%),
  radial-gradient(40% 60% at 80% 0,#2563eb 0,transparent 60%)}
.hr-photo .hr-sub,.hr-photo .hr-tags span{color:#e0e7ff}
.hr-photo .hr-tags span{font-weight:600}
.hr-photo .hr-tag{--bs-btn-color:#fff;--bs-btn-bg:rgba(15,12,50,.38);--bs-btn-border-color:rgba(255,255,255,.28);--bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:rgba(15,12,50,.6);--bs-btn-hover-border-color:rgba(255,255,255,.28)}
/* B: help centre */
.hr-help{--hr-accent:#047857;--hr-accent-dark:#065f46;background:#ecfdf5;color:var(--hr-ink);
  background-image:radial-gradient(70% 90% at 50% 0,#d1fae5 0,transparent 70%)}
.hr-help .badge{margin-bottom:12px;padding:4px 12px;background:#fff;color:#065f46;font-size:.8rem;font-weight:700;letter-spacing:.02em;line-height:1.5}
.hr-help .hr-sub{color:#334155}
.hr-help .form-control{border-color:#6b8f80;box-shadow:0 14px 34px -18px rgba(6,78,59,.35)}
.hr-help .form-control:focus{border-color:var(--hr-accent);box-shadow:0 0 0 1px var(--hr-accent),0 0 0 5px rgba(4,120,87,.2)}
.hr-help .hr-btn:focus-visible{outline-color:var(--hr-accent)}
.hr-links{max-width:620px;margin:22px auto 0;text-align:left}
.hr-links .row{--bs-gutter-x:10px;--bs-gutter-y:10px}
.hr-links a{display:flex;align-items:center;gap:10px;height:100%;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #cfe3da;color:#1f2937;
  font-size:.92rem;font-weight:500;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.hr-links a:hover{border-color:var(--hr-accent);box-shadow:0 6px 16px -8px rgba(6,78,59,.3)}
.hr-links a:focus-visible{outline:2px solid var(--hr-accent);outline-offset:2px}
.hr-links svg{flex:none;width:18px;height:18px;color:var(--hr-accent)}
@media (max-width:520px){
  .hr .form-control{height:58px;padding-right:66px;padding-left:50px}
  .hr-ico{left:18px}
  .hr .hr-btn{width:44px;height:44px;padding:0;justify-content:center;top:7px;right:7px}
  .hr-btn-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.hr-links a{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Photo library with popular searches</span>
<section class="bg-mesh-photo relative overflow-hidden rounded-3xl px-[clamp(20px,5vw,56px)] py-[clamp(40px,7vw,76px)] text-center text-white" aria-labelledby="hr-photo-title">
  <h2 class="mx-auto mb-2.5 max-w-[22ch] text-[clamp(1.6rem,4vw,2.5rem)] leading-[1.12] font-extrabold tracking-[-.025em]" id="hr-photo-title">38,000 free photos from independent photographers</h2>
  <p class="mx-auto mb-7 max-w-[46ch] text-[clamp(.95rem,2vw,1.08rem)] text-[#e0e7ff]">Every image on Stillframe is free to use, with new sets added every Monday.</p>
  <form class="relative mx-auto max-w-[620px] text-left" role="search" aria-label="Photos">
    <label class="sr-only" for="hr-photos">Search photos</label>
    <svg class="pointer-events-none absolute top-1/2 left-[22px] size-[22px] -translate-y-1/2 text-hr-muted max-[520px]:left-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="h-16 w-full appearance-none rounded-full border border-transparent bg-white pr-[138px] pl-[58px] text-[1.06rem] text-hr-ink shadow-[0_20px_50px_-18px_rgba(15,23,42,.45)] transition-shadow duration-200 placeholder:text-hr-muted focus:shadow-[0_0_0_4px_rgba(255,255,255,.55),0_20px_50px_-18px_rgba(15,23,42,.45)] focus:outline-none motion-reduce:transition-none max-[520px]:h-[58px] max-[520px]:pr-[66px] max-[520px]:pl-[50px]" id="hr-photos" type="search" name="q" placeholder="Try “foggy harbour”">
    <button class="absolute top-2 right-2 inline-flex h-12 cursor-pointer items-center gap-2 rounded-full bg-hr-violet px-6 text-base font-bold text-white transition-colors duration-150 hover:bg-hr-violet-dark focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:transition-none max-[520px]:top-[7px] max-[520px]:right-[7px] max-[520px]:size-11 max-[520px]:justify-center max-[520px]:p-0" type="submit"><svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="max-[520px]:sr-only">Search</span></button>
  </form>
  <div class="mx-auto mt-5 flex max-w-[620px] flex-wrap items-center justify-center gap-2 text-[.88rem]">
    <span class="font-semibold text-[#e0e7ff]" id="hr-popular">Popular:</span>
    <ul class="flex flex-wrap justify-center gap-2" aria-labelledby="hr-popular">
      <li><a class="inline-block rounded-full border border-white/28 bg-[rgba(15,12,50,.38)] px-[13px] py-[5px] text-white transition-colors duration-150 hover:bg-[rgba(15,12,50,.6)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current motion-reduce:transition-none" href="?q=mountains">Mountains</a></li><li><a class="inline-block rounded-full border border-white/28 bg-[rgba(15,12,50,.38)] px-[13px] py-[5px] text-white transition-colors duration-150 hover:bg-[rgba(15,12,50,.6)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current motion-reduce:transition-none" href="?q=coffee">Coffee</a></li><li><a class="inline-block rounded-full border border-white/28 bg-[rgba(15,12,50,.38)] px-[13px] py-[5px] text-white transition-colors duration-150 hover:bg-[rgba(15,12,50,.6)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current motion-reduce:transition-none" href="?q=workspace">Workspace</a></li>
      <li><a class="inline-block rounded-full border border-white/28 bg-[rgba(15,12,50,.38)] px-[13px] py-[5px] text-white transition-colors duration-150 hover:bg-[rgba(15,12,50,.6)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current motion-reduce:transition-none" href="?q=autumn">Autumn</a></li><li><a class="inline-block rounded-full border border-white/28 bg-[rgba(15,12,50,.38)] px-[13px] py-[5px] text-white transition-colors duration-150 hover:bg-[rgba(15,12,50,.6)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current motion-reduce:transition-none" href="?q=architecture">Architecture</a></li>
    </ul>
  </div>
</section></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6477] uppercase">Help centre with top articles</span>
<section class="bg-mesh-help relative overflow-hidden rounded-3xl px-[clamp(20px,5vw,56px)] py-[clamp(40px,7vw,76px)] text-center text-hr-ink" aria-labelledby="hr-help-title">
  <span class="mb-3 inline-block rounded-full bg-white px-3 py-1 text-[.8rem] font-bold tracking-[.02em] text-hr-green-dark">Ledgerly Help Centre</span>
  <h2 class="mx-auto mb-2.5 max-w-[22ch] text-[clamp(1.6rem,4vw,2.5rem)] leading-[1.12] font-extrabold tracking-[-.025em]" id="hr-help-title">How can we help?</h2>
  <p class="mx-auto mb-7 max-w-[46ch] text-[clamp(.95rem,2vw,1.08rem)] text-[#334155]">Search 240 articles on invoicing, payments and your account.</p>
  <form class="relative mx-auto max-w-[620px] text-left" role="search" aria-label="Help articles">
    <label class="sr-only" for="hr-help-q">Search help articles</label>
    <svg class="pointer-events-none absolute top-1/2 left-[22px] size-[22px] -translate-y-1/2 text-hr-muted max-[520px]:left-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="h-16 w-full appearance-none rounded-full border border-[#6b8f80] bg-white pr-[138px] pl-[58px] text-[1.06rem] text-hr-ink shadow-[0_14px_34px_-18px_rgba(6,78,59,.35)] transition-shadow duration-200 placeholder:text-hr-muted focus:border-hr-green focus:shadow-[0_0_0_1px_var(--color-hr-green),0_0_0_5px_rgba(4,120,87,.2)] focus:outline-none motion-reduce:transition-none max-[520px]:h-[58px] max-[520px]:pr-[66px] max-[520px]:pl-[50px]" id="hr-help-q" type="search" name="q" placeholder="Ask a question">
    <button class="absolute top-2 right-2 inline-flex h-12 cursor-pointer items-center gap-2 rounded-full bg-hr-green px-6 text-base font-bold text-white transition-colors duration-150 hover:bg-hr-green-dark focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-hr-green motion-reduce:transition-none max-[520px]:top-[7px] max-[520px]:right-[7px] max-[520px]:size-11 max-[520px]:justify-center max-[520px]:p-0" type="submit"><svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="max-[520px]:sr-only">Search</span></button>
  </form>
  <ul class="mx-auto mt-[22px] grid max-w-[620px] grid-cols-2 gap-2.5 text-left max-[520px]:grid-cols-1" aria-label="Top articles">
    <li><a class="flex h-full items-center gap-2.5 rounded-xl border border-[#cfe3da] bg-white px-3.5 py-3 text-[.92rem] font-medium text-[#1f2937] transition-[border-color,box-shadow] duration-150 hover:border-hr-green hover:shadow-[0_6px_16px_-8px_rgba(6,78,59,.3)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hr-green motion-reduce:transition-none" href="/help/billing-address"><svg class="size-[18px] flex-none text-hr-green" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Change your billing address</a></li>
    <li><a class="flex h-full items-center gap-2.5 rounded-xl border border-[#cfe3da] bg-white px-3.5 py-3 text-[.92rem] font-medium text-[#1f2937] transition-[border-color,box-shadow] duration-150 hover:border-hr-green hover:shadow-[0_6px_16px_-8px_rgba(6,78,59,.3)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hr-green motion-reduce:transition-none" href="/help/export-csv"><svg class="size-[18px] flex-none text-hr-green" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Export invoices to CSV</a></li>
    <li><a class="flex h-full items-center gap-2.5 rounded-xl border border-[#cfe3da] bg-white px-3.5 py-3 text-[.92rem] font-medium text-[#1f2937] transition-[border-color,box-shadow] duration-150 hover:border-hr-green hover:shadow-[0_6px_16px_-8px_rgba(6,78,59,.3)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hr-green motion-reduce:transition-none" href="/help/team-members"><svg class="size-[18px] flex-none text-hr-green" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Add a team member</a></li>
    <li><a class="flex h-full items-center gap-2.5 rounded-xl border border-[#cfe3da] bg-white px-3.5 py-3 text-[.92rem] font-medium text-[#1f2937] transition-[border-color,box-shadow] duration-150 hover:border-hr-green hover:shadow-[0_6px_16px_-8px_rgba(6,78,59,.3)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hr-green motion-reduce:transition-none" href="/help/recurring-invoices"><svg class="size-[18px] flex-none text-hr-green" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>Set up recurring invoices</a></li>
  </ul>
</section></div>
CSS 
@theme {
  --color-hr-ink: #0f172a;
  --color-hr-muted: #64748b;
  --color-hr-violet: #6d28d9;
  --color-hr-violet-dark: #5b21b6;
  --color-hr-green: #047857;
  --color-hr-green-dark: #065f46;
}
@utility bg-mesh-photo {
  background-color: #1e1b4b;
  background-image: radial-gradient(60% 80% at 12% 10%, #7c3aed 0, transparent 60%), radial-gradient(50% 70% at 92% 90%, #db2777 0, transparent 60%),
    radial-gradient(40% 60% at 80% 0, #2563eb 0, transparent 60%);
}
@utility bg-mesh-help {
  background-color: #ecfdf5;
  background-image: radial-gradient(70% 90% at 50% 0, #d1fae5 0, transparent 70%);
}

About this set

Big search sections for the top of a landing page, where the search box is the main action. The photo library hero sets a headline, a line of supporting copy and a 64 pixel pill search on a dark mesh gradient drawn with three radial gradients, then offers popular searches as tag links underneath. The help centre hero is a light variant for support sites: an eyebrow label, the question How can we help, a bordered pill search and four top article links in a two-column grid. Both give people who do not know what to type somewhere to go with one tap, which matters on help and stock-photo sites where many visitors arrive without a query. On phones the Search button shrinks to an icon button while keeping its text for screen readers, and the article grid drops to one column. Headline and padding sizes use clamp(), so the section scales smoothly between phone and desktop. No images or JavaScript are used, so the sections load instantly and are easy to recolour.

What’s included

  • Dark gradient hero with popular search tags
  • Light help centre hero with top article links
  • 64px pill field with the button inside
  • Button text visually hidden on phones, still read by screen readers
  • Fluid type and padding with clamp()

Accessibility

Each section is labelled by its heading, the forms have role="search" with their own aria-label, and the inputs have visually hidden labels. The popular tags and top articles are lists labelled by their captions. Text on the gradient keeps at least 4.5:1, links and buttons show visible outlines on :focus-visible, and transitions are removed under prefers-reduced-motion.

Customise it

Change --hr-accent on .hr-photo or .hr-help for the button colour, and edit the radial-gradient stops on .hr-photo for the background. Bootstrap uses the same properties with --bs-btn-* variables on the tags; in Tailwind edit the --color-hr-* theme colours and the bg-mesh-photo and bg-mesh-help utilities.