With Prefix 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
31
32
33
34
35
36
37
38
39
40
41
42
43

<!-- With Prefix - HTTP -->
<div class="relative">
  <label class="block text-sm font-medium text-gray-700 mb-1">Website</label>
  <div class="relative">
    <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-10">
      <span class="pl-3 pr-2 text-gray-500 text-sm bg-gray-50 border border-r-0 border-gray-300 rounded-l-lg h-full flex items-center">https://</span>
    </div>
    <input type="text" placeholder="example.com" class="w-full pl-24 pr-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
  </div>
</div>

<!-- With Prefix - @ Symbol -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Social Handle</label>
  <div class="relative">
    <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-10">
      <span class="pl-4 pr-1 text-gray-500 bg-gray-50 border border-r-0 border-gray-300 rounded-l-lg h-full flex items-center">@</span>
    </div>
    <input type="text" placeholder="username" class="w-full pl-9 pr-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors" />
  </div>
</div>

<!-- With Prefix - Phone -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
  <div class="relative">
    <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-10">
      <span class="pl-3 pr-2 text-gray-500 bg-gray-50 border border-r-0 border-gray-300 rounded-l-lg h-full flex items-center">+1</span>
    </div>
    <input type="tel" placeholder="(555) 123-4567" class="w-full pl-14 pr-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors" />
  </div>
</div>

<!-- With Prefix - Domain -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
  <div class="relative">
    <input type="text" placeholder="myworkspace" class="w-full pl-4 pr-20 py-2.5 bg-white border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
    <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none z-10">
      <span class="pr-4 pl-2 text-gray-500 text-sm bg-gray-50 border border-l-0 border-gray-300 rounded-r-lg h-full flex items-center">.company.com</span>
    </div>
  </div>
</div>

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

# With Prefix

Input with prefix addon.

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

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