Search-Engine-Style Hero — Free HTML CSS JS Snippet

<section class="sbc-hero">
  <div class="sbc-inner">
    <div class="sbc-logo">Findly</div>

    <div class="sbc-searchwrap">
      <svg class="sbc-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
      <input class="sbc-input" id="sbcInput" type="text" placeholder="Search docs, guides, and API references" aria-label="Search" autocomplete="off">
      <button class="sbc-clear" id="sbcClear" aria-label="Clear search" type="button">✕</button>
    </div>

    <div class="sbc-chips" id="sbcChips">
      <button class="sbc-chip" type="button">Getting started</button>
      <button class="sbc-chip" type="button">Authentication</button>
      <button class="sbc-chip" type="button">Webhooks</button>
      <button class="sbc-chip" type="button">Rate limits</button>
      <button class="sbc-chip" type="button">Pricing</button>
    </div>
  </div>
</section>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #fff; }

.sbc-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.sbc-inner { width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; }

.sbc-logo { font-size: 32px; font-weight: 900; letter-spacing: -0.02em; color: #1e293b; margin-bottom: 36px; }

.sbc-searchwrap { position: relative; width: 100%; }
.sbc-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.sbc-input {
  width: 100%; padding: 17px 48px; border-radius: 999px; border: 1.5px solid #e2e8f0;
  font-family: inherit; font-size: 16px; color: #0f172a; outline: none;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  transition: border-color .15s, box-shadow .15s;
}
.sbc-input::placeholder { color: #94a3b8; }
.sbc-input:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), 0 1px 4px rgba(15, 23, 42, 0.04); }
.sbc-clear {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: none; background: #f1f5f9; color: #64748b;
  font-size: 12px; cursor: pointer; display: none; align-items: center; justify-content: center;
  transition: background .15s;
}
.sbc-clear:hover { background: #e2e8f0; }
.sbc-searchwrap.has-value .sbc-clear { display: flex; }

.sbc-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 20px; }
.sbc-chip {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.sbc-chip:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

@media (max-width: 480px) {
  .sbc-logo { font-size: 26px; }
  .sbc-input { padding: 15px 44px; font-size: 15px; }
}

const wrap = document.querySelector('.sbc-searchwrap');
const input = document.getElementById('sbcInput');
const clearBtn = document.getElementById('sbcClear');
const chips = document.querySelectorAll('.sbc-chip');

function syncClearButton() {
  wrap.classList.toggle('has-value', input.value.length > 0);
}

// Real focus/typing state — the clear button only appears once there's text
input.addEventListener('input', syncClearButton);

clearBtn.addEventListener('click', () => {
  input.value = '';
  syncClearButton();
  input.focus();
});

// Suggestion chips fill the input and focus it, like a real search-engine homepage
chips.forEach((chip) => {
  chip.addEventListener('click', () => {
    input.value = chip.textContent;
    syncClearButton();
    input.focus();
  });
});