input

User input control.

html

<label class="in-wrap" style="--accent:#BFD9F2;">
  <span class="in-wrap__label">Real <code>&lt;input type="text"&gt;</code></span>
  <input class="in-el" type="text" placeholder="Type something…">
</label>
<style>
.in-wrap { display: block; width: 260px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; }
.in-wrap__label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #241430aa; }
.in-wrap__label code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
.in-el { width: 100%; box-sizing: border-box; font: 14px system-ui, sans-serif; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #24143035; }
.in-el:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.in-el:required { border-left: 3px solid var(--accent); }
</style>

tailwind

<label class="block w-[260px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl">
  <span class="block mb-2 text-xs font-semibold text-[#241430]/65">Real <code class="bg-[#24143012] px-1.5 py-0.5 rounded">&lt;input type="text"&gt;</code></span>
  <input type="text" placeholder="Type something…" class="w-full box-border text-sm px-3 py-2.5 rounded-lg border-[1.5px] border-[#24143035] focus-visible:outline focus-visible:outline-2" style="outline-color:#BFD9F2">
</label>

react

export function InputElement({
  type = "text",
  placeholder = "Type something…",
  accent = "#BFD9F2",
  required = false,
}) {
  return (
    <label style={{ display: "block", width: 260, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12 }}>
      <span style={{ display: "block", marginBottom: 8, fontSize: 12, fontWeight: 600, color: "#241430aa" }}>
        Real <code style={{ background: "#24143012", padding: "1px 5px", borderRadius: 4 }}>{`<input type="${type}">`}</code>
      </span>
      <input type={type} placeholder={placeholder} required={required}
        style={{ width: "100%", boxSizing: "border-box", font: "14px system-ui, sans-serif", padding: "10px 12px", borderRadius: 8, border: "1.5px solid #24143035", borderLeft: required ? `3px solid ${accent}` : "1.5px solid #24143035" }} />
    </label>
  );
}