Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Dropdown
Category: actions
Description: CSS-only details/summary dropdown
## Small Variant
### SenangStart CSS Code
```html
<details layout="relative inline" visual="text:left">
<summary layout="inline-flex justify:center" space="w:full g-x:small p-x:small-3x p-y:small" visual="cursor:pointer rounded:small bg:white text-size:small font:tw-semibold text:gray-900 shadow:small ring:thin ring-color:gray-300 hover:bg:gray-50">
Options S
<i space="m-t:regular" visual="text:gray-400 text-size:base" class="ss ss-chevron-down"></i>
</summary>
<div layout="absolute left:none" space="m-t:small w:vast-5x" visual="rounded:small bg:white shadow:big ring:thin ring-color:black focus:outline:none">
<div space="p-y:tiny">
<a href="#" layout="block" space="p-x:medium p-y:small" visual="text:gray-700 text-size:small hover:bg:gray-100">Account settings</a>
<a href="#" layout="block" space="p-x:medium p-y:small" visual="text:gray-700 text-size:small hover:bg:gray-100">Support</a>
<a href="#" layout="block" space="p-x:medium p-y:small" visual="text:gray-700 text-size:small hover:bg:gray-100">License</a>
</div>
</div>
</details>
```
### Tailwind CSS Code
```html
<details class="relative inline-block text-left">
<summary class="list-none cursor-pointer inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
Options S
<i class="fas fa-chevron-down mt-1 text-gray-400"></i>
</summary>
<div class="absolute left-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100">Account settings</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100">Support</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100">License</a>
</div>
</div>
</details>
```
## Medium Variant
### SenangStart CSS Code
```html
<details layout="relative inline" visual="text:left">
<summary layout="inline-flex justify:center" space="w:full g-x:small p-x:medium p-y:small-2x" visual="cursor:pointer rounded:small bg:white text-size:base font:tw-semibold text:gray-900 shadow:small ring:thin ring-color:gray-300 hover:bg:gray-50">
Options M
<i space="m-t:tiny" visual="text:gray-400 text-size:large" class="ss ss-chevron-down"></i>
</summary>
<div layout="absolute left:none" space="m-t:small w:vast-7x" visual="rounded:small bg:white shadow:big ring:thin ring-color:black focus:outline:none">
<div space="p-y:tiny">
<a href="#" layout="block" space="p-x:medium p-y:small-3x" visual="text:gray-700 text-size:base hover:bg:gray-100">Account settings</a>
<a href="#" layout="block" space="p-x:medium p-y:small-3x" visual="text:gray-700 text-size:base hover:bg:gray-100">Support</a>
<a href="#" layout="block" space="p-x:medium p-y:small-3x" visual="text:gray-700 text-size:base hover:bg:gray-100">License</a>
</div>
</div>
</details>
```
### Tailwind CSS Code
```html
<details class="relative inline-block text-left">
<summary class="list-none cursor-pointer inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-4 py-2.5 text-base font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
Options M
<i class="fas fa-chevron-down mt-1 text-gray-400"></i>
</summary>
<div class="absolute left-0 z-10 mt-2 w-64 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1">
<a href="#" class="text-gray-700 block px-4 py-3 text-base hover:bg-gray-100">Account settings</a>
<a href="#" class="text-gray-700 block px-4 py-3 text-base hover:bg-gray-100">Support</a>
<a href="#" class="text-gray-700 block px-4 py-3 text-base hover:bg-gray-100">License</a>
</div>
</div>
</details>
```
## Large Variant
### SenangStart CSS Code
```html
<details layout="relative inline" visual="text:left">
<summary layout="inline-flex justify:center" space="w:full g-x:small p-x:medium-3x p-y:small-3x" visual="cursor:pointer rounded:small bg:white text-size:large font:tw-semibold text:gray-900 shadow:small ring:thin ring-color:gray-300 hover:bg:gray-50">
Options L
<i space="m-t:tiny-2x" visual="text:gray-400 text-size:big" class="ss ss-chevron-down"></i>
</summary>
<div layout="absolute left:none" space="m-t:small w:vast-8x" visual="rounded:small bg:white shadow:big ring:thin ring-color:black focus:outline:none">
<div space="p-y:tiny">
<a href="#" layout="block" space="p-x:medium-3x p-y:medium" visual="text:gray-700 text-size:large hover:bg:gray-100">Account settings</a>
<a href="#" layout="block" space="p-x:medium-3x p-y:medium" visual="text:gray-700 text-size:large hover:bg:gray-100">Support</a>
<a href="#" layout="block" space="p-x:medium-3x p-y:medium" visual="text:gray-700 text-size:large hover:bg:gray-100">License</a>
</div>
</div>
</details>
```
### Tailwind CSS Code
```html
<details class="relative inline-block text-left">
<summary class="list-none cursor-pointer inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-6 py-3 text-lg font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
Options L
<i class="fas fa-chevron-down mt-1.5 text-gray-400"></i>
</summary>
<div class="absolute left-0 z-10 mt-2 w-72 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1">
<a href="#" class="text-gray-700 block px-6 py-4 text-lg hover:bg-gray-100">Account settings</a>
<a href="#" class="text-gray-700 block px-6 py-4 text-lg hover:bg-gray-100">Support</a>
<a href="#" class="text-gray-700 block px-6 py-4 text-lg hover:bg-gray-100">License</a>
</div>
</div>
</details>
```