Textarea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- Textarea - Default -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
  <textarea rows="4" placeholder="Write your message here..." class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-none"></textarea>
</div>

<!-- Textarea - Auto-resize -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
  <textarea rows="3" placeholder="Tell us more about your project..." class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 focus:bg-white transition-colors resize-y min-h-[80px]"></textarea>
</div>

<!-- Textarea - With Counter -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
  <textarea rows="3" maxlength="150" placeholder="Write a short bio..." class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors resize-none"></textarea>
  <p class="mt-1 text-xs text-gray-500 text-right">0/150 characters</p>
</div>

<!-- Textarea - Minimal / Chat Style -->
<div class="mt-4">
  <textarea rows="4" placeholder="Type your message..." class="w-full px-4 py-4 bg-gray-100 border-0 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors resize-none"></textarea>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# Textarea

Multi-line textarea.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/textarea
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`