Checkboxes

Lista riscando tarefas

por @ravox·tailwind

0
#eef1f6
1<div class="lista w-52 rounded-2xl bg-white p-4 shadow-[0_20px_40px_-20px_rgba(15,23,42,.35)] ring-1 ring-slate-200/70">2  <p class="mb-3 flex items-center justify-between text-[11px] font-bold uppercase tracking-[.18em] text-slate-400">Hoje <span class="barra flex gap-1"><i class="s1"></i><i class="s2"></i><i class="s3"></i></span></p>3  <ul class="grid gap-2.5">4    <li><label class="flex cursor-pointer items-center gap-3">5      <input type="checkbox" class="t1 peer sr-only" checked />6      <span class="caixa grid size-5 shrink-0 place-items-center rounded-md border-2 border-slate-300 transition-all duration-300 ease-[cubic-bezier(.34,1.56,.64,1)] peer-checked:border-emerald-500 peer-checked:bg-emerald-500"><svg viewBox="0 0 24 24" class="size-3.5"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>7      <span class="relative text-sm font-medium text-slate-700 transition-colors duration-300 after:absolute after:-inset-x-0.5 after:top-1/2 after:h-0.5 after:origin-left after:scale-x-0 after:rounded after:bg-slate-400 after:transition-transform after:duration-500 after:ease-[cubic-bezier(.65,0,.35,1)] peer-checked:text-slate-400 peer-checked:after:scale-x-100">Regar as plantas</span>8    </label></li>9    <li><label class="flex cursor-pointer items-center gap-3">10      <input type="checkbox" class="t2 peer sr-only" />11      <span class="caixa grid size-5 shrink-0 place-items-center rounded-md border-2 border-slate-300 transition-all duration-300 ease-[cubic-bezier(.34,1.56,.64,1)] peer-checked:border-emerald-500 peer-checked:bg-emerald-500"><svg viewBox="0 0 24 24" class="size-3.5"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>12      <span class="relative text-sm font-medium text-slate-700 transition-colors duration-300 after:absolute after:-inset-x-0.5 after:top-1/2 after:h-0.5 after:origin-left after:scale-x-0 after:rounded after:bg-slate-400 after:transition-transform after:duration-500 after:ease-[cubic-bezier(.65,0,.35,1)] peer-checked:text-slate-400 peer-checked:after:scale-x-100">Responder e-mails</span>13    </label></li>14    <li><label class="flex cursor-pointer items-center gap-3">15      <input type="checkbox" class="t3 peer sr-only" />16      <span class="caixa grid size-5 shrink-0 place-items-center rounded-md border-2 border-slate-300 transition-all duration-300 ease-[cubic-bezier(.34,1.56,.64,1)] peer-checked:border-emerald-500 peer-checked:bg-emerald-500"><svg viewBox="0 0 24 24" class="size-3.5"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>17      <span class="relative text-sm font-medium text-slate-700 transition-colors duration-300 after:absolute after:-inset-x-0.5 after:top-1/2 after:h-0.5 after:origin-left after:scale-x-0 after:rounded after:bg-slate-400 after:transition-transform after:duration-500 after:ease-[cubic-bezier(.65,0,.35,1)] peer-checked:text-slate-400 peer-checked:after:scale-x-100">Caminhar 30 min</span>18    </label></li>19  </ul>20</div>
#lista#tarefas#riscar#animado#claro

Mais checkboxes

Ver todos