Inputs

Busca com atalho

por @ravox·tailwind

0
#0b0d12
1<div class="group w-[210px] font-sans">2  <label class="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 transition group-focus-within:border-violet-400/70 group-focus-within:bg-white/[.07] group-focus-within:shadow-[0_0_0_4px_rgba(139,92,246,.2)]">3    <svg class="size-4 shrink-0 text-white/40 transition group-focus-within:text-violet-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>4    <input type="search" placeholder="Buscar…" class="w-full min-w-0 bg-transparent text-sm text-white outline-none placeholder:text-white/35 [&::-webkit-search-cancel-button]:hidden" />5    <span class="grid shrink-0 [&>*]:col-start-1 [&>*]:row-start-1">6      <span class="flex gap-0.5 transition duration-200 group-focus-within:scale-75 group-focus-within:opacity-0">7        <kbd class="grid h-5 min-w-5 place-items-center rounded-md border border-white/15 border-b-2 bg-white/10 px-1 font-sans text-[10px] text-white/70">⌘</kbd>8        <kbd class="grid h-5 min-w-5 place-items-center rounded-md border border-white/15 border-b-2 bg-white/10 px-1 font-sans text-[10px] text-white/70">K</kbd>9      </span>10      <kbd class="grid h-5 scale-75 place-items-center justify-self-end rounded-md bg-violet-500/25 px-1.5 font-sans text-[10px] font-semibold text-violet-200 opacity-0 transition duration-200 group-focus-within:scale-100 group-focus-within:opacity-100">esc</kbd>11    </span>12  </label>13  <ul class="mt-1.5 max-h-0 overflow-hidden rounded-xl border border-transparent bg-[#141722] text-xs text-white/70 opacity-0 transition-all duration-300 group-focus-within:max-h-32 group-focus-within:border-white/10 group-focus-within:opacity-100">14    <li class="px-3 pt-2 pb-1 text-[9px] font-bold tracking-widest text-white/30 uppercase">Recentes</li>15    <li class="flex items-center justify-between px-3 py-1.5 hover:bg-white/5"><span>Novo projeto</span><span class="text-[10px] text-white/30">⌘N</span></li>16    <li class="flex items-center justify-between px-3 py-1.5 hover:bg-white/5"><span>Abrir configurações</span><span class="text-[10px] text-white/30">⌘,</span></li>17    <li class="flex items-center justify-between px-3 py-1.5 pb-2 hover:bg-white/5"><span>Trocar tema</span><span class="text-[10px] text-white/30">⌘T</span></li>18  </ul>19</div>
#busca#atalho#teclado#escuro

Mais inputs

Ver todos