Focus

html

<div class="focus-demo" style="--accent:#241430;--thickness:2px;">
  <label class="focus-demo__label">Search</label>
  <div class="focus-demo__input is-focused">sneakers<span class="focus-demo__caret"></span></div>
  <p class="focus-demo__caption">shown with keyboard focus &mdash; the ring is the only thing outline:none should ever remove and replace{{unless focused}}rest state

tailwind

<div style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <label class="block text-xs font-semibold mb-1.5">Search</label>
  <div class="focus-tw is-focused px-3 py-2.5 rounded-lg border-[1.5px]" style="border-color:#24143033;background:#FAF7F2;--accent:#241430;--thickness:2px">sneakers<span class="focus-tw__caret inline-block w-px h-3.5 ml-0.5 align-middle" style="background:#241430"></span></div>
  <p class="mt-2.5 text-xs text-[#241430aa]">shown with keyboard focus &mdash; the ring is the only thing outline:none should ever remove and replace{{unless focused}}rest state

react

export function FocusDemo({
  label = "Search",
  value = "sneakers",
  focused = true,
  accent = "#241430",
  thickness = 2,
}) {
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <label style={{ display: "block", fontSize: 12, fontWeight: 600, marginBottom: 6 }}>{label}</label>
      <div style={{ padding: "10px 12px", borderRadius: 8, border: "1.5px solid " + (focused ? accent : "#24143033"), background: "#FAF7F2",
        outline: focused ? thickness + "px solid " + accent : "none", outlineOffset: 2 }}>
        {value}{focused && <span style={{ display: "inline-block", width: 1, height: 14, background: accent, marginLeft: 2 }} />}
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{focused ? "shown with keyboard focus" : "rest state"}</p>
    </div>
  );
}