Chalkboard text area
A text area on a framed green board: the writing looks like chalk, colors sit on the ledge and an eraser sweeps it clean.
Settings
Code
<div class="uvq06-ch"><svg class="fx" aria-hidden="true" width="0" height="0"><filter id="uvq06-ch-f"><feTurbulence type="fractalNoise" baseFrequency="1.1" numOctaves="2" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="2"/></filter></svg><div class="bd"><label class="sl"><span class="sr">Write on the board</span><textarea rows="4" spellcheck="false" placeholder="Write on the board"></textarea></label><span class="er" aria-hidden="true"></span></div><div class="lg"><div class="ck" role="radiogroup" aria-label="Chalk color"><label style="--k:#f4f1e8"><input type="radio" name="uvq06-ch-k"><span class="sr">White</span></label><label style="--k:var(--c1)"><input type="radio" name="uvq06-ch-k"><span class="sr">Main color</span></label><label style="--k:var(--c2)"><input type="radio" name="uvq06-ch-k"><span class="sr">Secondary color</span></label></div><button type="button" class="rb"><span>Clear</span></button></div></div>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 Inputs
See all InputsWhere to use it
A text area set on a slate board with a wooden frame and ledge. A small SVG turbulence filter roughens the letters so they look like chalk, faint smudges sit on the slate, and the sticks on the ledge are real radio buttons that change the chalk color. The felt eraser sweeps across the board and leaves a cloud that fades.
Use the two colors for the yellow and pink chalk sticks and keep the white one as the default. It fits café menus, classroom apps, daily specials and to-do boards, and three or four short lines read best in that handwriting.