プレビュー
HTML
<label>
<input name="title" placeholder=" " />
<span>Title</span>
</label>
CSS
:root {
--ink: #0f2740;
--paper: #eef6fb;
--accent: #1d6f9a;
--accent-2: #0f2740;
--on-accent: #f4fbff;
--muted: #5b7386;
--line: #c5d8e6;
--chip: #dceaf3;
}
label {
position: relative;
display: block;
color: var(--ink);
}
input {
width: 14rem;
padding: 1.1rem 0.7rem 0.4rem;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
color: inherit;
font: inherit;
}
span {
position: absolute;
left: 0.7rem;
top: 0.85rem;
color: var(--muted);
pointer-events: none;
}
input:focus + span,
input:not(:placeholder-shown) + span {
top: 0.15rem;
font-size: 0.72rem;
}
Tailwind
<style>
:root {
--ink: #0f2740;
--paper: #eef6fb;
--accent: #1d6f9a;
--accent-2: #0f2740;
--on-accent: #f4fbff;
--muted: #5b7386;
--line: #c5d8e6;
--chip: #dceaf3;
}
input:focus + span,
input:not(:placeholder-shown) + span {
top: 0.15rem;
font-size: 0.72rem;
}
</style>
<label class="relative block text-[var(--ink)]">
<input class="w-[14rem] p-[1.1rem_0.7rem_0.4rem] [border:0] [border-bottom:1px_solid_var(--line)] bg-transparent text-inherit [font:inherit]" name="title" placeholder=" " />
<span class="absolute left-[0.7rem] top-[0.85rem] text-[var(--muted)] [pointer-events:none]">Title</span>
</label>