Concentración con atomizador
Un frasco de perfume con pera de borla: elige la concentración y la pera se aprieta y suelta una nube a su medida.
Ajustes
Código
<div class="uvq05-at"><div class="bt" aria-hidden="true"><i class="ms"><i></i><i></i><i></i></i><i class="hd"></i><i class="nk"></i><i class="tb"></i><i class="bl"></i><i class="gl"><i class="lq"></i></i></div><fieldset><legend>Concentración</legend><label><input type="radio" name="uvq05-at"><span><b>Colonia</b><small>2–5 % · 2 h</small></span></label><label><input type="radio" name="uvq05-at"><span><b>Eau de toilette</b><small>5–15 % · 4 h</small></span></label><label><input type="radio" name="uvq05-at" checked><span><b>Eau de parfum</b><small>15–20 % · 6 h</small></span></label><label><input type="radio" name="uvq05-at"><span><b>Extracto</b><small>20–30 % · 8 h</small></span></label></fieldset></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 Filtros
Ver todos: FiltrosDónde usarlo
Las perfumerías hablan de colonia, eau de toilette, eau de parfum y extracto, pero la diferencia se entiende mejor viéndola que leyéndola. Este filtro de radios va junto a un atomizador antiguo dibujado en CSS: cada opción oscurece el líquido, aprieta la pera con redecilla y suelta una nube cuyo tamaño sigue la concentración. Bajo cada nombre van el porcentaje de esencia y la duración.
El primer color pinta el collar dorado y la redecilla, y el segundo la pera. Edita las cuatro opciones y sus colores para brumas corporales, ambientadores o aceites esenciales, y baja la velocidad para un rociado más lento.