Monstera del salón
Humedad de la tierra22 %
Necesita agua
HTML + CSSCards
Terracotta plant you can water
A potted plant in terracotta: watering it drops water from the can, raises the soil moisture and lifts the drooping leaves.
Settings
16px
1x
Code
<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>Living room monstera</h3><p class="mt"><span>Soil moisture</span><b>22 %</b><i></i></p><p class="st" aria-live="polite" data-a="Needs water" data-b="Well watered">Needs water</p><div class="bs"><button type="button" class="wa">Water</button><button type="button" class="wk">Skip a week</button></div></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
A small story told with SVG and CSS: the leaves start droopy and yellowish, the can tilts, drops fall into the soil, the moisture bar rises and the leaves spring back with a bouncy curve. A second button skips a week and lets them sag again. It suits plant care apps, garden shops, habit trackers and smart sensor dashboards.
The main color is the terracotta pot and the warning text, the second the healthy leaf green. Rename the plant, adjust the moisture values in the script, or reuse the drooping effect for any status that needs care.