Mention Input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!-- Mention Input - Standard -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Tag someone</label>
  <input type="text" placeholder="@username" 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" />
  <p class="mt-2 text-sm text-gray-500">Type @ to mention someone</p>
</div>

<!-- Mention Input - Tag Style -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-2">Notify team members</label>
  <div class="p-3 bg-white border border-gray-300 rounded-lg focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500 transition-colors">
    <div class="flex flex-wrap gap-2 mb-2">
      <span class="px-2 py-1 bg-blue-100 text-blue-700 text-sm rounded flex items-center gap-1">
        <span>@</span>johndoe
        <button class="hover:text-blue-900">×</button>
      </span>
      <span class="px-2 py-1 bg-purple-100 text-purple-700 text-sm rounded flex items-center gap-1">
        <span>@</span>alicesmith
        <button class="hover:text-purple-900">×</button>
      </span>
    </div>
    <input type="text" placeholder="Add more mentions..." class="w-full bg-transparent border-0 focus:outline-none text-sm" />
  </div>
</div>

<!-- Mention Input - Dark -->
<div class="mt-4 p-4 bg-slate-900 rounded-xl">
  <label class="block text-sm font-medium text-gray-300 mb-2">Share with</label>
  <input type="text" placeholder="@search users" class="w-full px-4 py-3 bg-slate-800 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-colors" />
</div>

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

# Mention Input

Input with @mention support UI.

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

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