Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Copy Button
Category: actions
Description: Input with attached copy button
## Small Variant
### SenangStart CSS Code
```html
<div layout="relative" space="w:[100%] max-w:[300px]">
<input type="text" space="w:[100%] h:large-3x p-l:small-3x p-r:large-3x" visual="border-w:regular border:neutral-200 rounded:medium text-size:small focus:outline:none focus:border:blue-600" value="Copy this text S" readonly />
<button layout="absolute right:none top:none flex items:center justify:center" space="h:large-3x w:large-3x" visual="text:gray-500 hover:text:blue-600 text-size:base">
<i class="ss ss-document-duplicate"></i>
</button>
</div>
```
### Tailwind CSS Code
```html
<div class="relative w-full max-w-[300px]">
<input type="text" class="w-full h-10 pl-3 pr-10 border-2 border-neutral-200 rounded-lg text-sm focus:outline-none focus:border-blue-600" value="Copy this text S" readonly />
<button class="absolute right-0 top-0 h-10 w-10 text-gray-500 hover:text-blue-600 flex items-center justify-center text-sm">
<i class="fas fa-copy"></i>
</button>
</div>
```
## Medium Variant
### SenangStart CSS Code
```html
<div layout="relative" space="w:[100%] max-w:[300px]">
<input type="text" space="w:[100%] h:big p-l:small-3x p-r:big" visual="border-w:regular border:neutral-200 rounded:medium text-size:base focus:outline:none focus:border:blue-600" value="Copy this text M" readonly />
<button layout="absolute right:none top:none flex items:center justify:center" space="h:big w:big" visual="text:gray-500 hover:text:blue-600 text-size:large">
<i class="ss ss-document-duplicate"></i>
</button>
</div>
```
### Tailwind CSS Code
```html
<div class="relative w-full max-w-[300px]">
<input type="text" class="w-full h-12 pl-3 pr-12 border-2 border-neutral-200 rounded-lg text-base focus:outline-none focus:border-blue-600" value="Copy this text M" readonly />
<button class="absolute right-0 top-0 h-12 w-12 text-gray-500 hover:text-blue-600 flex items-center justify-center text-base">
<i class="fas fa-copy"></i>
</button>
</div>
```
## Large Variant
### SenangStart CSS Code
```html
<div layout="relative" space="w:[100%] max-w:[300px]">
<input type="text" space="w:[100%] h:big-2x p-l:small-3x p-r:big-2x" visual="border-w:regular border:neutral-200 rounded:medium text-size:large focus:outline:none focus:border:blue-600" value="Copy this text L" readonly />
<button layout="absolute right:none top:none flex items:center justify:center" space="h:big-2x w:big-2x" visual="text:gray-500 hover:text:blue-600 text-size:big">
<i class="ss ss-document-duplicate"></i>
</button>
</div>
```
### Tailwind CSS Code
```html
<div class="relative w-full max-w-[300px]">
<input type="text" class="w-full h-14 pl-3 pr-14 border-2 border-neutral-200 rounded-lg text-lg focus:outline-none focus:border-blue-600" value="Copy this text L" readonly />
<button class="absolute right-0 top-0 h-14 w-14 text-gray-500 hover:text-blue-600 flex items-center justify-center text-lg">
<i class="fas fa-copy"></i>
</button>
</div>
```