Tailwind CSS Utility Textareas Blocks

All Blocks
Application UI
Forms
Utility Textareas

Utility Textareas

Utility textareas for hidden panels, collapsible notes, and tucked-away supporting input fields.

Hidden Content Textarea Pro

Collapsible note field hides a labeled textarea behind an inline add-note trigger.

<div id="hs-pro-pytdanc-heading" class="hs-collapse hidden w-full overflow-hidden" aria-labelledby="hs-pro-pytdanc" role="region">
                      
                      <div class="p-0.5">
                        <label for="hs-pro-pytdnt" class="block mb-2 font-medium text-sm text-foreground">
                          Note
                        </label>
                        <textarea id="hs-pro-pytdnt" class="p-3 sm:p-4 block w-full bg-layer border-layer-line rounded-2xl sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus resize-none disabled:opacity-50 disabled:pointer-events-none" placeholder="Add a few notes to help you later" data-hs-textarea-auto-height></textarea>
                      </div>
                      
                    </div>