Preview
HTML
<search>
<form>
<label for="find">Find</label>
<input id="find" type="search" name="q" />
<button type="submit">Go</button>
</form>
</search>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
form {
display: grid;
grid-template-columns: 1fr auto;
max-width: 16rem;
margin: 0;
color: var(--ink);
}
label {
grid-column: 1 / span 2;
margin-bottom: 0.3rem;
font-size: 0.85rem;
}
input {
min-width: 0;
padding: 0.45rem 0.65rem;
border: 1px solid var(--line);
border-right: 0;
border-radius: 0.55rem 0 0 0.55rem;
background: var(--paper);
color: inherit;
font: inherit;
}
button {
padding: 0.45rem 0.75rem;
border: 1px solid var(--line);
border-radius: 0 0.55rem 0.55rem 0;
background: var(--chip);
color: inherit;
font: inherit;
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
label {
grid-column: 1 / span 2;
}
</style>
<search>
<form class="grid [grid-template-columns:1fr_auto] max-w-[16rem] m-0 text-[var(--ink)]">
<label class="mb-[0.3rem] text-[0.85rem]" for="find">Find</label>
<input class="min-w-[0] p-[0.45rem_0.65rem] [border:1px_solid_var(--line)] [border-right:0] rounded-[0.55rem_0_0_0.55rem] bg-[var(--paper)] text-inherit [font:inherit]" id="find" type="search" name="q" />
<button class="p-[0.45rem_0.75rem] [border:1px_solid_var(--line)] rounded-[0_0.55rem_0.55rem_0] bg-[var(--chip)] text-inherit [font:inherit]" type="submit">Go</button>
</form>
</search>