Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Inputs (Icon Start)
Category: forms
Description: Input with icon at start
## Small Variant
### SenangStart CSS Code
```html
<div layout="relative">
<span layout="absolute inset-y:none left:none flex items:center" space="p-l:small-3x" visual="text:gray-500">
<i class="ss ss-envelope"></i>
</span>
<input type="text" space="h:large-3x p-l:large-3x p-r:small-3x w:[100%]" visual="border-w:regular border:neutral-200 rounded:medium text-size:small focus:outline:none focus:border:blue-600 transition:colors" placeholder="Email S">
</div>
```
### Tailwind CSS Code
```html
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fas fa-envelope"></i>
</span>
<input type="text" class="h-10 pl-10 pr-3 w-full border-2 border-neutral-200 rounded-lg text-sm focus:outline-none focus:border-blue-600 placeholder-gray-400 transition-colors" placeholder="Email S">
</div>
```
## Medium Variant
### SenangStart CSS Code
```html
<div layout="relative">
<span layout="absolute inset-y:none left:none flex items:center" space="p-l:small-3x" visual="text:gray-500">
<i visual="text-size:large" class="ss ss-envelope"></i>
</span>
<input type="text" space="h:big p-l:big p-r:small-3x w:[100%]" visual="border-w:regular border:neutral-200 rounded:medium text-size:base focus:outline:none focus:border:blue-600 transition:colors" placeholder="Email M">
</div>
```
### Tailwind CSS Code
```html
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fas fa-envelope text-lg"></i>
</span>
<input type="text" class="h-12 pl-12 pr-3 w-full border-2 border-neutral-200 rounded-lg text-base focus:outline-none focus:border-blue-600 placeholder-gray-400 transition-colors" placeholder="Email M">
</div>
```
## Large Variant
### SenangStart CSS Code
```html
<div layout="relative">
<span layout="absolute inset-y:none left:none flex items:center" space="p-l:medium" visual="text:gray-500">
<i visual="text-size:big" class="ss ss-envelope"></i>
</span>
<input type="text" space="h:big-2x p-l:big-2x p-r:small-3x w:[100%]" visual="border-w:regular border:neutral-200 rounded:medium text-size:large focus:outline:none focus:border:blue-600 transition:colors" placeholder="Email L">
</div>
```
### Tailwind CSS Code
```html
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-500">
<i class="fas fa-envelope text-xl"></i>
</span>
<input type="text" class="h-14 pl-14 pr-3 w-full border-2 border-neutral-200 rounded-lg text-lg focus:outline-none focus:border-blue-600 placeholder-gray-400 transition-colors" placeholder="Email L">
</div>
```