Preparar el viaje de 4
Checklist con barra de progreso
Cuatro tareas que llenan una barra y actualizan un contador según las marcas, sin nada de JavaScript.
Ajustes
Código
<div class="uv-cpg"><ul><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Pasaporte</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Cargador del móvil</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Gafas de sol</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Reservar el taxi</span></label></li></ul><p class="hd"><span class="ti">Preparar el viaje</span><span class="ct"><span class="n"></span> <span>de 4</span></span></p><div class="br"><i></i></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Checkboxes
Ver todos: CheckboxesDónde usarlo
Esta tarjeta de checklist cuenta las tareas hechas con contadores CSS y llena su barra de progreso con el selector :has, así que no necesita script. Cada elemento es un checkbox nativo con un check redondo, y las tareas completadas se atenúan y se tachan. Va bien para listas de equipaje, pasos de bienvenida, checklists de lanzamiento y registros de hábitos.
Cambia el título con el control de texto y sustituye las cuatro tareas en el HTML. La barra usa un degradado entre los dos colores y el título pasa al secundario cuando todo está hecho, una meta discreta.