Monstera del salón
Humedad de la tierra22 %
Necesita agua
HTML + CSSCards
Maceta de barro que se riega
Una planta en maceta de terracota: al regarla caen gotas, sube la humedad de la tierra y las hojas mustias se enderezan.
Ajustes
16px
1x
Código
<article class="uvq07-plt"><div class="stg"><svg viewBox="0 0 120 130" aria-hidden="true"><defs><linearGradient id="uvq07-plt-g" x1="0" x2="1"><stop class="g1" offset="0"/><stop class="g2" offset=".45"/><stop class="g1" offset="1"/></linearGradient></defs><g class="lv"><g transform="translate(60 84) scale(0.8)"><g class="lf" style="--r:-52deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(1)"><g class="lf" style="--r:-24deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(1.14)"><g class="lf" style="--r:2deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(0.96)"><g class="lf" style="--r:27deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g><g transform="translate(60 84) scale(0.78)"><g class="lf" style="--r:50deg"><path class="sm" d="M0 0Q-1-14 0-28"/><path class="lp" d="M0-28C-12-32-15-48-3-60C9-50 9-36 0-28Z"/><path class="vn" d="M0-29L-2.4-55"/></g></g></g><path class="pb" d="M34 92h52l-6 32H40z"/><rect class="rm" x="29" y="83" width="62" height="11" rx="2.5"/><ellipse class="so" cx="60" cy="84" rx="27" ry="2.4"/></svg><span class="dp" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span><span class="can" aria-hidden="true"><svg viewBox="0 0 32 24"><path d="M14 8h12v13H14z" fill="currentColor"/><path d="M14 11L4 5M2 3.5l4.5-.8.6 4.4zM26 10c4.5 0 4.5 8 0 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></div><h3>Monstera del salón</h3><p class="mt"><span>Humedad de la tierra</span><b>22 %</b><i></i></p><p class="st" aria-live="polite" data-a="Necesita agua" data-b="Bien regada">Necesita agua</p><div class="bs"><button type="button" class="wa">Regar</button><button type="button" class="wk">Pasar una semana</button></div></article>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 Cards
Ver todos: CardsDónde usarlo
Una pequeña historia contada con SVG y CSS: las hojas empiezan caídas y amarillentas, la regadera se inclina, caen gotas en la tierra, sube la barra de humedad y las hojas se levantan con un rebote. Otro botón adelanta una semana y vuelven a decaer. Encaja en apps de cuidado de plantas, viveros, registros de hábitos y paneles de sensores.
El color principal es la maceta de barro y el aviso; el secundario, el verde de la hoja sana. Cambia el nombre de la planta, ajusta los valores de humedad en el script o usa el efecto para cualquier estado que pida atención.