Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Forms
Category: layout
Description: Layout Forms
## Small Variant
### SenangStart CSS Code
```html
<form layout="grid" space="p:medium-3x g:medium-3x m:none" visual="border:blue-200 border-w:regular rounded:medium bg:blue-50">
<h6 visual="text-size:base tw-lg:text-size:large capitalize font:tw-bold">
Contact Form S
</h6>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="name_s">Name</label>
<input id="name_s" type="text" space="h:large-3x p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:base" placeholder="Name">
</div>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="email_s">Email</label>
<input id="email_s" type="email" space="h:large-3x p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:base" placeholder="yourname@mail.com">
</div>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="enquiry_s">Enquiry</label>
<textarea id="enquiry_S" space="p-y:small p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:base" rows="3" placeholder="Write..."></textarea>
</div>
<div layout="flex justify:end">
<button type="submit" layout="flex items:center justify:center" space="p-x:medium w:[100%] tw-lg:max-w:[max-content] h:large-3x" visual="bg:blue-600 text:white rounded:medium text-size:base font:tw-semibold hover:opacity:80">
Submit
</button>
</div>
</form>
```
### Tailwind CSS Code
```html
<form class="grid p-6 gap-6 border-blue-200 border-2 rounded-xl bg-blue-50 m-0">
<h6 class="text-base lg:text-lg capitalize font-bold">
Contact Form S
</h6>
<div class="grid">
<label class="text-bold text-sm h-6" for="name_s">Name</label>
<input id="name_s" type="text" class="h-10 px-3 border-neutral-200 border-2 rounded-lg text-base" placeholder="Name">
</div>
<div class="grid">
<label class="text-bold text-sm h-6" for="email_s">Email</label>
<input id="email_s" type="email" class="h-10 px-3 border-neutral-200 border-2 rounded-lg text-base" placeholder="yourname@mail.com">
</div>
<div class="grid">
<label class="text-bold text-sm h-6" for="enquiry_s">Enquiry</label>
<textarea id="enquiry_S" class="py-2 px-3 border-neutral-200 border-2 rounded-lg text-base" rows="3" placeholder="Write..."></textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="bg-blue-600 text-white rounded-lg text-base font-semibold px-4 w-full lg:max-w-max h-10 flex items-center justify-center hover:opacity-80">
Submit
</button>
</div>
</form>
```
## Medium Variant
### SenangStart CSS Code
```html
<form layout="grid" space="p:medium-3x g:medium-3x m:none" visual="border:blue-200 border-w:regular rounded:medium bg:blue-50">
<h6 visual="text-size:base tw-lg:text-size:large capitalize font:tw-bold">
Contact Form M
</h6>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="name_m">Name</label>
<input id="name_m" type="text" space="h:big p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:large" placeholder="Name">
</div>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="email_m">Email</label>
<input id="email_m" type="email" space="h:big p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:large" placeholder="yourname@mail.com">
</div>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="enquiry_m">Enquiry</label>
<textarea id="enquiry_m" space="p-y:small p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:large" rows="3" placeholder="Write..."></textarea>
</div>
<div layout="flex justify:end">
<button type="submit" layout="flex items:center justify:center" space="p-x:medium-3x w:[100%] tw-lg:max-w:[max-content] h:big" visual="bg:blue-600 text:white rounded:medium text-size:large font:tw-semibold hover:opacity:80">
Submit
</button>
</div>
</form>
```
### Tailwind CSS Code
```html
<form class="grid p-6 gap-6 border-blue-200 border-2 rounded-xl bg-blue-50 m-0">
<h6 class="text-base lg:text-lg capitalize font-bold">
Contact Form M
</h6>
<div class="grid">
<label class="text-bold text-sm h-6" for="name_m">Name</label>
<input id="name_m" type="text" class="h-12 px-3 border-neutral-200 border-2 rounded-lg text-lg" placeholder="Name">
</div>
<div class="grid">
<label class="text-bold text-sm h-6" for="email_m">Email</label>
<input id="email_m" type="email" class="h-12 px-3 border-neutral-200 border-2 rounded-lg text-lg" placeholder="yourname@mail.com">
</div>
<div class="grid">
<label class="text-bold text-sm h-6" for="enquiry_m">Enquiry</label>
<textarea id="enquiry_m" class="py-2 px-3 border-neutral-200 border-2 rounded-lg text-lg" rows="3" placeholder="Write..."></textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="bg-blue-600 text-white rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80">
Submit
</button>
</div>
</form>
```
## Large Variant
### SenangStart CSS Code
```html
<form layout="grid" space="p:medium-3x g:medium-3x m:none" visual="border:blue-200 border-w:regular rounded:medium bg:blue-50">
<h6 visual="text-size:base tw-lg:text-size:large capitalize font:tw-bold">
Contact Form L
</h6>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="name_l">Name</label>
<input id="name_l" type="text" space="h:big-2x p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:big" placeholder="Name">
</div>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="email_l">Email</label>
<input id="email_l" type="email" space="h:big-2x p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:big" placeholder="yourname@mail.com">
</div>
<div layout="grid">
<label space="h:medium-3x" visual="text-size:small" class="text-bold" for="enquiry_l">Enquiry</label>
<textarea id="enquiry_l" space="p-y:small p-x:small-3x" visual="border:neutral-200 border-w:regular rounded:medium text-size:big" rows="3" placeholder="Write..."></textarea>
</div>
<div layout="flex justify:end">
<button type="submit" layout="flex items:center justify:center" space="p-x:large w:[100%] tw-lg:max-w:[max-content] h:big-2x" visual="bg:blue-600 text:white rounded:medium text-size:big font:tw-semibold hover:opacity:80">
Submit
</button>
</div>
</form>
```
### Tailwind CSS Code
```html
<form class="grid p-6 gap-6 border-blue-200 border-2 rounded-xl bg-blue-50 m-0">
<h6 class="text-base lg:text-lg capitalize font-bold">
Contact Form L
</h6>
<div class="grid">
<label class="text-bold text-sm h-6" for="name_l">Name</label>
<input id="name_l" type="text" class="h-14 px-3 border-neutral-200 border-2 rounded-lg text-xl" placeholder="Name">
</div>
<div class="grid">
<label class="text-bold text-sm h-6" for="email_l">Email</label>
<input id="email_l" type="email" class="h-14 px-3 border-neutral-200 border-2 rounded-lg text-xl" placeholder="yourname@mail.com">
</div>
<div class="grid">
<label class="text-bold text-sm h-6" for="enquiry_l">Enquiry</label>
<textarea id="enquiry_l" class="py-2 px-3 border-neutral-200 border-2 rounded-lg text-xl" rows="3" placeholder="Write..."></textarea>
</div>
<div class="flex justify-end">
<button type="submit" class="bg-blue-600 text-white rounded-lg text-xl font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80">
Submit
</button>
</div>
</form>
```