Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Modals
Category: layout
Description: Overlay Modals
## Small Variant
### SenangStart CSS Code
```html
<div layout="grid" space="max-w:[360px] w:[100%]" visual="border:neutral-200 border-w:regular rounded:medium bg:white shadow:giant">
<div layout="flex justify:between items:center" space="p-y:small p-x:medium" visual="border:neutral-200" class="border-b">
<h6 space="m:none" visual="text-size:base tw-lg:text-size:large capitalize font:tw-bold">
Modal Title Here
</h6>
<button layout="flex items:center justify:center" space="w:large h:large" visual="hover:bg:red-600 hover:text:white rounded:small transition:colors text-size:large">
<i class="ss ss-x-mark"></i>
</button>
</div>
<div space="p-y:medium p-x:medium">
<p visual="text:gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div layout="flex justify:end" space="p-y:small p-x:medium g:small" visual="border:neutral-200" class="border-t">
<button type="button" space="p-x:medium p-y:small" visual="border:blue-600 border-w:regular text:blue-600 rounded:medium text-size:small font:tw-semibold hover:bg:blue-50 transition:colors">
Cancel
</button>
<button type="submit" space="p-x:medium p-y:small" visual="bg:blue-600 text:white rounded:medium text-size:small font:tw-semibold hover:bg:blue-700 transition:colors">
Submit
</button>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="grid border-neutral-200 border-2 rounded-xl bg-white shadow-xl max-w-sm w-full">
<div class="py-2 px-4 border-b border-neutral-200 flex justify-between items-center">
<h6 class="text-base lg:text-lg capitalize font-bold m-0">
Modal Title Here
</h6>
<button class="flex items-center justify-center w-8 h-8 hover:bg-red-600 hover:text-white rounded transition-colors">
<i class="fas fa-times"></i>
</button>
</div>
<div class="py-4 px-4">
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="py-2 px-4 border-t border-neutral-200 flex justify-end gap-2">
<button type="button" class="border-blue-600 border-2 text-blue-600 rounded-lg text-sm font-semibold px-4 py-2 hover:bg-blue-50 transition-colors">
Cancel
</button>
<button type="submit" class="bg-blue-600 text-white rounded-lg text-sm font-semibold px-4 py-2 hover:bg-blue-700 transition-colors">
Submit
</button>
</div>
</div>
```
## Medium Variant
### SenangStart CSS Code
```html
<div layout="grid" space="max-w:[480px] w:[100%]" visual="border:neutral-200 border-w:regular rounded:medium bg:white shadow:giant">
<div layout="flex justify:between items:center" space="p-y:small-3x p-x:medium-2x" visual="border:neutral-200" class="border-b">
<h6 space="m:none" visual="text-size:large tw-lg:text-size:big capitalize font:tw-bold">
Modal Title Here
</h6>
<button layout="flex items:center justify:center" space="w:large h:large" visual="hover:bg:red-600 hover:text:white rounded:small transition:colors text-size:large">
<i class="ss ss-x-mark"></i>
</button>
</div>
<div space="p-y:medium-2x p-x:medium-2x">
<p visual="text:gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div layout="flex justify:end" space="p-y:small-3x p-x:medium-2x g:small-3x" visual="border:neutral-200" class="border-t">
<button type="button" space="p-x:medium-2x p-y:small" visual="border:blue-600 border-w:regular text:blue-600 rounded:medium text-size:base font:tw-semibold hover:bg:blue-50 transition:colors">
Cancel
</button>
<button type="submit" space="p-x:medium-2x p-y:small" visual="bg:blue-600 text:white rounded:medium text-size:base font:tw-semibold hover:bg:blue-700 transition:colors">
Submit
</button>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="grid border-neutral-200 border-2 rounded-xl bg-white shadow-xl max-w-md w-full">
<div class="py-3 px-5 border-b border-neutral-200 flex justify-between items-center">
<h6 class="text-lg lg:text-xl capitalize font-bold m-0">
Modal Title Here
</h6>
<button class="flex items-center justify-center w-8 h-8 hover:bg-red-600 hover:text-white rounded transition-colors">
<i class="fas fa-times"></i>
</button>
</div>
<div class="py-5 px-5">
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="py-3 px-5 border-t border-neutral-200 flex justify-end gap-3">
<button type="button" class="border-blue-600 border-2 text-blue-600 rounded-lg text-base font-semibold px-5 py-2 hover:bg-blue-50 transition-colors">
Cancel
</button>
<button type="submit" class="bg-blue-600 text-white rounded-lg text-base font-semibold px-5 py-2 hover:bg-blue-700 transition-colors">
Submit
</button>
</div>
</div>
```
## Large Variant
### SenangStart CSS Code
```html
<div layout="grid" space="max-w:[720px] w:[100%]" visual="border:neutral-200 border-w:regular rounded:medium bg:white shadow:giant">
<div layout="flex justify:between items:center" space="p-y:medium p-x:medium-3x" visual="border:neutral-200" class="border-b">
<h5 space="m:none" visual="text-size:big tw-lg:text-size:huge capitalize font:tw-bold">
Modal Title Here
</h5>
<button layout="flex items:center justify:center" space="w:large-3x h:large-3x" visual="hover:bg:red-600 hover:text:white rounded:small transition:colors text-size:large">
<i class="ss ss-x-mark"></i>
</button>
</div>
<div space="p-y:medium-3x p-x:medium-3x">
<p visual="text:gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div layout="flex justify:end" space="p-y:medium p-x:medium-3x g:medium" visual="border:neutral-200" class="border-t">
<button type="button" space="p-x:medium-3x p-y:small-2x" visual="border:blue-600 border-w:regular text:blue-600 rounded:medium text-size:large font:tw-semibold hover:bg:blue-50 transition:colors">
Cancel
</button>
<button type="submit" space="p-x:medium-3x p-y:small-2x" visual="bg:blue-600 text:white rounded:medium text-size:large font:tw-semibold hover:bg:blue-700 transition:colors">
Submit
</button>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="grid border-neutral-200 border-2 rounded-xl bg-white shadow-xl max-w-lg w-full">
<div class="py-4 px-6 border-b border-neutral-200 flex justify-between items-center">
<h5 class="text-xl lg:text-2xl capitalize font-bold m-0">
Modal Title Here
</h5>
<button class="flex items-center justify-center w-10 h-10 hover:bg-red-600 hover:text-white rounded transition-colors">
<i class="fas fa-times"></i>
</button>
</div>
<div class="py-6 px-6">
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="py-4 px-6 border-t border-neutral-200 flex justify-end gap-4">
<button type="button" class="border-blue-600 border-2 text-blue-600 rounded-lg text-lg font-semibold px-6 py-2.5 hover:bg-blue-50 transition-colors">
Cancel
</button>
<button type="submit" class="bg-blue-600 text-white rounded-lg text-lg font-semibold px-6 py-2.5 hover:bg-blue-700 transition-colors">
Submit
</button>
</div>
</div>
```