SenangStart Loading... [Back](https://senangstart.com) typography 2 [ Headings ](#headings) [ Sub Headings ](#sub-headings) actions 7 [ Buttons ](#buttons) [ Buttons (Outline) ](#buttons-outline) [ Button Group ](#button-group) [ Copy Button ](#copy-button) [ Dropdown ](#dropdown) [ Links ](#links) [ Links (Icon End) ](#links-icon-end) feedback 7 [ Badge ](#badge) [ Tag ](#tag) [ Callout ](#callout) [ Progress Bar ](#progress-bar) [ Spinner ](#spinner) [ Tooltip ](#tooltip) [ Progress Ring ](#progress-ring) forms 10 [ Inputs ](#inputs) [ Inputs (Icon Start) ](#inputs-icon-start) [ Textarea ](#textarea) [ Selects ](#selects) [ Checkboxes ](#checkboxes) [ Radio ](#radio) [ Switch ](#switch) [ Slider ](#slider) [ Color Picker ](#color-picker) [ Rating ](#rating) layout 10 [ Forms ](#forms) [ Modals ](#modals) [ Cards (Simple Filled) ](#cards-simple-filled) [ Cards (Simple Outline) ](#cards-simple-outline) [ Cards (Icon Start Filled) ](#cards-icon-start-filled) [ Cards (Icon Start Outline) ](#cards-icon-start-outline) [ Cards (Image Outline) ](#cards-image-outline) [ Cards (Image Filled) ](#cards-image-filled) [ Cards (Image Action Filled) ](#cards-image-action-filled) [ Cards (Image Action Outline) ](#cards-image-action-outline) [![SenangStart](https://senangstart.com/img/ss_logo_text.svg)](https://senangstart.com) #### [\#](https://senangstart.com/components/headings/llms.txt)Headings typography Standard Headings TailwindCSS SenangStart CSS Heading H1 ========== Heading H2 ---------- ### Heading H3 #### Heading H4 ##### Heading H5 ###### Heading H6 <h1 class="text-4xl lg:text-7xl capitalize font-bold text-gray-900">Heading H1</h1> <h2 class="text-3xl lg:text-6xl capitalize font-bold text-gray-900">Heading H2</h2> <h3 class="text-2xl lg:text-4xl capitalize font-bold text-gray-900">Heading H3</h3> <h4 class="text-xl lg:text-2xl capitalize font-bold text-gray-900">Heading H4</h4> <h5 class="text-lg lg:text-xl capitalize font-bold text-gray-900">Heading H5</h5> <h6 class="text-base lg:text-lg capitalize font-bold text-gray-900">Heading H6</h6> COPY ```

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6
``` Heading H1 ========== Heading H2 ---------- ### Heading H3 #### Heading H4 ##### Heading H5 ###### Heading H6 <h1 visual="text-size:giant tw-lg:text-size:giga capitalize font:tw-bold text:gray-900">Heading H1</h1> <h2 visual="text-size:grand tw-lg:text-size:mega capitalize font:tw-bold text:gray-900">Heading H2</h2> <h3 visual="text-size:huge tw-lg:text-size:giant capitalize font:tw-bold text:gray-900">Heading H3</h3> <h4 visual="text-size:big tw-lg:text-size:huge capitalize font:tw-bold text:gray-900">Heading H4</h4> <h5 visual="text-size:large tw-lg:text-size:big capitalize font:tw-bold text:gray-900">Heading H5</h5> <h6 visual="text-size:base tw-lg:text-size:large capitalize font:tw-bold text:gray-900">Heading H6</h6> COPY ```

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6
``` #### [\#](https://senangstart.com/components/sub-headings/llms.txt)Sub Headings typography Sub Headings TailwindCSS SenangStart CSS Sub Heading H1 ================ Sub Heading H2 ---------------- ### Sub Heading H3 #### Sub Heading H4 ##### Sub Heading H5 ###### Sub Heading H6 <h1 class="text-4xl lg:text-7xl capitalize font-semibold text-gray-700"> Sub Heading H1 </h1> <h2 class="text-3xl lg:text-6xl capitalize font-semibold text-gray-700"> Sub Heading H2 </h2> <h3 class="text-2xl lg:text-4xl capitalize font-semibold text-gray-700"> Sub Heading H3 </h3> <h4 class="text-xl lg:text-2xl capitalize font-semibold text-gray-700"> Sub Heading H4 </h4> <h5 class="text-lg lg:text-xl capitalize font-semibold text-gray-700"> Sub Heading H5 </h5> <h6 class="text-base lg:text-lg capitalize font-semibold text-gray-700"> Sub Heading H6 </h6> COPY ```

Sub Heading H1

Sub Heading H2

Sub Heading H3

Sub Heading H4

Sub Heading H5
Sub Heading H6
``` Sub Heading H1 ================ Sub Heading H2 ---------------- ### Sub Heading H3 #### Sub Heading H4 ##### Sub Heading H5 ###### Sub Heading H6 <h1 visual="text-size:giant tw-lg:text-size:giga capitalize font:tw-semibold text:gray-700"> Sub Heading H1 </h1> <h2 visual="text-size:grand tw-lg:text-size:mega capitalize font:tw-semibold text:gray-700"> Sub Heading H2 </h2> <h3 visual="text-size:huge tw-lg:text-size:giant capitalize font:tw-semibold text:gray-700"> Sub Heading H3 </h3> <h4 visual="text-size:big tw-lg:text-size:huge capitalize font:tw-semibold text:gray-700"> Sub Heading H4 </h4> <h5 visual="text-size:large tw-lg:text-size:big capitalize font:tw-semibold text:gray-700"> Sub Heading H5 </h5> <h6 visual="text-size:base tw-lg:text-size:large capitalize font:tw-semibold text:gray-700"> Sub Heading H6 </h6> COPY ```

Sub Heading H1

Sub Heading H2

Sub Heading H3

Sub Heading H4

Sub Heading H5
Sub Heading H6
``` #### [\#](https://senangstart.com/components/buttons/llms.txt)Buttons actions Standard Action Buttons TailwindCSS SenangStart CSS S M L Button S <button type="button" class="bg-blue-600 text-white rounded-lg text-sm font-semibold px-4 h-10 flex items-center justify-center hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 transition-all">Button S</button> COPY ``` ``` Button S <button type="button" layout="flex items:center justify:center" space="p-x:medium h:large-3x" visual="bg:blue-600 text:white rounded:medium text-size:small font:tw-semibold hover:bg:blue-700 focus:ring:medium focus:ring-color:blue-300 transition:all">Button S</button> COPY ``` ``` Button M <button type="button" class="bg-blue-600 text-white rounded-lg text-base font-semibold px-6 h-12 flex items-center justify-center hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 transition-all">Button M</button> COPY ``` ``` Button M <button type="button" layout="flex items:center justify:center" space="p-x:medium-3x h:big" visual="bg:blue-600 text:white rounded:medium text-size:base font:tw-semibold hover:bg:blue-700 focus:ring:medium focus:ring-color:blue-300 transition:all">Button M</button> COPY ``` ``` Button L <button type="button" class="bg-blue-600 text-white rounded-lg text-lg font-semibold px-8 h-14 flex items-center justify-center hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 transition-all">Button L</button> COPY ``` ``` Button L <button type="button" layout="flex items:center justify:center" space="p-x:large h:big-2x" visual="bg:blue-600 text:white rounded:medium text-size:large font:tw-semibold hover:bg:blue-700 focus:ring:medium focus:ring-color:blue-300 transition:all">Button L</button> COPY ``` ``` #### [\#](https://senangstart.com/components/buttons-outline/llms.txt)Buttons (Outline) actions Outline Buttons TailwindCSS SenangStart CSS S M L Button S <button type="button" class="border-2 border-blue-600 text-blue-600 bg-transparent rounded-lg text-sm font-semibold px-4 h-10 flex items-center justify-center hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 transition-all">Button S</button> COPY ``` ``` Button S <button type="button" layout="flex items:center justify:center" space="p-x:medium h:large-3x" visual="border-w:regular border:blue-600 text:blue-600 bg:\[transparent\] rounded:medium text-size:small font:tw-semibold hover:bg:blue-50 focus:ring:medium focus:ring-color:blue-300 transition:all">Button S</button> COPY ``` ``` Button M <button type="button" class="border-2 border-blue-600 text-blue-600 bg-transparent rounded-lg text-base font-semibold px-6 h-12 flex items-center justify-center hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 transition-all">Button M</button> COPY ``` ``` Button M <button type="button" layout="flex items:center justify:center" space="p-x:medium-3x h:big" visual="border-w:regular border:blue-600 text:blue-600 bg:\[transparent\] rounded:medium text-size:base font:tw-semibold hover:bg:blue-50 focus:ring:medium focus:ring-color:blue-300 transition:all">Button M</button> COPY ``` ``` Button L <button type="button" class="border-2 border-blue-600 text-blue-600 bg-transparent rounded-lg text-lg font-semibold px-8 h-14 flex items-center justify-center hover:bg-blue-50 focus:ring-4 focus:ring-blue-300 transition-all">Button L</button> COPY ``` ``` Button L <button type="button" layout="flex items:center justify:center" space="p-x:large h:big-2x" visual="border-w:regular border:blue-600 text:blue-600 bg:\[transparent\] rounded:medium text-size:large font:tw-semibold hover:bg:blue-50 focus:ring:medium focus:ring-color:blue-300 transition:all">Button L</button> COPY ``` ``` #### [\#](https://senangstart.com/components/button-group/llms.txt)Button Group actions Grouped buttons TailwindCSS SenangStart CSS S M L Left Middle Right <div class="inline-flex rounded-lg shadow-sm border-2 border-gray-200 divide-x-2 divide-gray-200 overflow-hidden" role="group"> <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Left</button> <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Middle</button> <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Right</button> </div> COPY ```
``` Left Middle Right <div layout="inline-flex overflow:hidden" visual="rounded:medium shadow:small border-w:regular border:gray-200 divide-x-w:regular divide:gray-200" role="group"> <button type="button" layout="focus:z:top" space="p-x:medium p-y:small" visual="text-size:small font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Left</button> <button type="button" layout="focus:z:top" space="p-x:medium p-y:small" visual="text-size:small font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Middle</button> <button type="button" layout="focus:z:top" space="p-x:medium p-y:small" visual="text-size:small font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Right</button> </div> COPY ```
``` Left Middle Right <div class="inline-flex rounded-lg shadow-sm border-2 border-gray-200 divide-x-2 divide-gray-200 overflow-hidden" role="group"> <button type="button" class="px-5 py-2.5 text-base font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Left</button> <button type="button" class="px-5 py-2.5 text-base font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Middle</button> <button type="button" class="px-5 py-2.5 text-base font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Right</button> </div> COPY ```
``` Left Middle Right <div layout="inline-flex overflow:hidden" visual="rounded:medium shadow:small border-w:regular border:gray-200 divide-x-w:regular divide:gray-200" role="group"> <button type="button" layout="focus:z:top" space="p-x:medium-2x p-y:small-2x" visual="text-size:base font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Left</button> <button type="button" layout="focus:z:top" space="p-x:medium-2x p-y:small-2x" visual="text-size:base font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Middle</button> <button type="button" layout="focus:z:top" space="p-x:medium-2x p-y:small-2x" visual="text-size:base font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Right</button> </div> COPY ```
``` Left Middle Right <div class="inline-flex rounded-lg shadow-sm border-2 border-gray-200 divide-x-2 divide-gray-200 overflow-hidden" role="group"> <button type="button" class="px-6 py-3 text-lg font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Left</button> <button type="button" class="px-6 py-3 text-lg font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Middle</button> <button type="button" class="px-6 py-3 text-lg font-medium text-gray-900 bg-white hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700">Right</button> </div> COPY ```
``` Left Middle Right <div layout="inline-flex overflow:hidden" visual="rounded:medium shadow:small border-w:regular border:gray-200 divide-x-w:regular divide:gray-200" role="group"> <button type="button" layout="focus:z:top" space="p-x:medium-3x p-y:small-3x" visual="text-size:large font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Left</button> <button type="button" layout="focus:z:top" space="p-x:medium-3x p-y:small-3x" visual="text-size:large font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Middle</button> <button type="button" layout="focus:z:top" space="p-x:medium-3x p-y:small-3x" visual="text-size:large font:tw-medium text:gray-900 bg:white hover:bg:gray-100 hover:text:blue-700 focus:ring:regular focus:ring-color:blue-700 focus:text:blue-700">Right</button> </div> COPY ```
``` #### [\#](https://senangstart.com/components/copy-button/llms.txt)Copy Button actions Input with attached copy button TailwindCSS SenangStart CSS S M L <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> COPY ```
``` <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> COPY ```
``` <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> COPY ```
``` <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> COPY ```
``` <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> COPY ```
``` <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> COPY ```
``` #### [\#](https://senangstart.com/components/dropdown/llms.txt)Dropdown actions CSS-only details/summary dropdown TailwindCSS SenangStart CSS S M L Options S [Account settings](#) [Support](#) [License](#) <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> COPY ```
Options S
Account settings Support License
``` Options S [Account settings](#) [Support](#) [License](#) <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> COPY ```
Options S
Account settings Support License
``` Options M [Account settings](#) [Support](#) [License](#) <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> COPY ```
Options M
Account settings Support License
``` Options M [Account settings](#) [Support](#) [License](#) <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> COPY ```
Options M
Account settings Support License
``` Options L [Account settings](#) [Support](#) [License](#) <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> COPY ```
Options L
Account settings Support License
``` Options L [Account settings](#) [Support](#) [License](#) <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> COPY ```
Options L
Account settings Support License
``` #### [\#](https://senangstart.com/components/links/llms.txt)Links actions Standard Text Links TailwindCSS SenangStart CSS S M L [Link S](#) <a href="#" class="text-blue-600 text-sm font-semibold hover:text-blue-800 underline transition-colors">Link S</a> COPY ``` Link S ``` [Link S](#) <a href="#" visual="text:blue-600 text-size:small font:tw-semibold hover:text:blue-800 underline transition:colors">Link S</a> COPY ``` Link S ``` [Link M](#) <a href="#" class="text-blue-600 text-base font-semibold hover:text-blue-800 underline transition-colors">Link M</a> COPY ``` Link M ``` [Link M](#) <a href="#" visual="text:blue-600 text-size:base font:tw-semibold hover:text:blue-800 underline transition:colors">Link M</a> COPY ``` Link M ``` [Link L](#) <a href="#" class="text-blue-600 text-lg font-semibold hover:text-blue-800 underline transition-colors">Link L</a> COPY ``` Link L ``` [Link L](#) <a href="#" visual="text:blue-600 text-size:large font:tw-semibold hover:text:blue-800 underline transition:colors">Link L</a> COPY ``` Link L ``` #### [\#](https://senangstart.com/components/links-icon-end/llms.txt)Links (Icon End) actions Links with icon at end TailwindCSS SenangStart CSS S M L [Link S ](#) <a href="#" class="group text-blue-600 text-sm font-semibold inline-flex items-center gap-1 hover:text-blue-800 transition-colors">Link S <i class="fas fa-arrow-right transform group-hover:translate-x-1 transition-transform"></i></a> COPY ``` Link S ``` [Link S ](#) <a href="#" layout="inline-flex items:center" space="g:tiny" visual="text:blue-600 text-size:small font:tw-semibold hover:text:blue-800 transition:colors">Link S <i visual="transition:transform" class="ss ss-arrow-right"></i></a> COPY ``` Link S ``` [Link M ](#) <a href="#" class="group text-blue-600 text-base font-semibold inline-flex items-center gap-2 hover:text-blue-800 transition-colors">Link M <i class="fas fa-arrow-right transform group-hover:translate-x-1 transition-transform"></i></a> COPY ``` Link M ``` [Link M ](#) <a href="#" layout="inline-flex items:center" space="g:small" visual="text:blue-600 text-size:base font:tw-semibold hover:text:blue-800 transition:colors">Link M <i visual="transition:transform" class="ss ss-arrow-right"></i></a> COPY ``` Link M ``` [Link L ](#) <a href="#" class="group text-blue-600 text-lg font-semibold inline-flex items-center gap-2 hover:text-blue-800 transition-colors">Link L <i class="fas fa-arrow-right transform group-hover:translate-x-1 transition-transform"></i></a> COPY ``` Link L ``` [Link L ](#) <a href="#" layout="inline-flex items:center" space="g:small" visual="text:blue-600 text-size:large font:tw-semibold hover:text:blue-800 transition:colors">Link L <i visual="transition:transform" class="ss ss-arrow-right"></i></a> COPY ``` Link L ``` #### [\#](https://senangstart.com/components/badge/llms.txt)Badge feedback Status Badges TailwindCSS SenangStart CSS S M L Badge S <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Badge S</span> COPY ``` Badge S ``` Badge S <span space="p-x:small-2x p-y:regular" visual="bg:blue-100 text:blue-800 text-size:mini font:tw-medium rounded:small">Badge S</span> COPY ``` Badge S ``` Badge M <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">Badge M</span> COPY ``` Badge M ``` Badge M <span space="p-x:small-3x p-y:tiny" visual="bg:blue-100 text:blue-800 text-size:small font:tw-medium rounded:small">Badge M</span> COPY ``` Badge M ``` Badge L <span class="bg-blue-100 text-blue-800 text-base font-medium px-3.5 py-1.5 rounded">Badge L</span> COPY ``` Badge L ``` Badge L <span space="p-x:small-4x p-y:tiny-2x" visual="bg:blue-100 text:blue-800 text-size:base font:tw-medium rounded:small">Badge L</span> COPY ``` Badge L ``` #### [\#](https://senangstart.com/components/tag/llms.txt)Tag feedback Dismissible Tags TailwindCSS SenangStart CSS S M L Tag S <span id="badge-dismiss-s" class="inline-flex items-center px-2 py-1 text-xs font-medium text-blue-800 bg-blue-100 rounded"> Tag S <button type="button" class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900" aria-label="Remove"> <i class="fas fa-times"></i> </button> </span> COPY ``` Tag S ``` Tag S <span id="badge-dismiss-s" layout="inline-flex items:center" space="p-x:small p-y:tiny" visual="text-size:mini font:tw-medium text:blue-800 bg:blue-100 rounded:small"> Tag S <button type="button" layout="inline-flex items:center" space="p:regular m-l:small" visual="text-size:small text:blue-400 bg:\[transparent\] rounded:small hover:bg:blue-200 hover:text:blue-900" aria-label="Remove"> <i class="ss ss-x-mark"></i> </button> </span> COPY ``` Tag S ``` Tag M <span id="badge-dismiss-m" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-800 bg-blue-100 rounded"> Tag M <button type="button" class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900" aria-label="Remove"> <i class="fas fa-times"></i> </button> </span> COPY ``` Tag M ``` Tag M <span id="badge-dismiss-m" layout="inline-flex items:center" space="p-x:small-3x p-y:tiny-2x" visual="text-size:small font:tw-medium text:blue-800 bg:blue-100 rounded:small"> Tag M <button type="button" layout="inline-flex items:center" space="p:regular m-l:small" visual="text-size:small text:blue-400 bg:\[transparent\] rounded:small hover:bg:blue-200 hover:text:blue-900" aria-label="Remove"> <i class="ss ss-x-mark"></i> </button> </span> COPY ``` Tag M ``` Tag L <span id="badge-dismiss-l" class="inline-flex items-center px-4 py-2 text-base font-medium text-blue-800 bg-blue-100 rounded"> Tag L <button type="button" class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900" aria-label="Remove"> <i class="fas fa-times"></i> </button> </span> COPY ``` Tag L ``` Tag L <span id="badge-dismiss-l" layout="inline-flex items:center" space="p-x:medium p-y:small" visual="text-size:base font:tw-medium text:blue-800 bg:blue-100 rounded:small"> Tag L <button type="button" layout="inline-flex items:center" space="p:regular m-l:small" visual="text-size:small text:blue-400 bg:\[transparent\] rounded:small hover:bg:blue-200 hover:text:blue-900" aria-label="Remove"> <i class="ss ss-x-mark"></i> </button> </span> COPY ``` Tag L ``` #### [\#](https://senangstart.com/components/callout/llms.txt)Callout feedback Info/Alert Box TailwindCSS SenangStart CSS S M L Info alert! Change a few things up and try submitting again. <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 border border-blue-200" role="alert"> <span class="font-medium">Info alert!</span> Change a few things up and try submitting again. </div> COPY ``` ``` Info alert! Change a few things up and try submitting again. <div space="p:medium m-b:medium" visual="text-size:small text:blue-800 rounded:medium bg:blue-50 border-w:thin border:blue-200" role="alert"> <span visual="font:tw-medium">Info alert!</span> Change a few things up and try submitting again. </div> COPY ```
Info alert! Change a few things up and try submitting again.
``` Info alert! Change a few things up and try submitting again. <div class="p-6 mb-4 text-base text-blue-800 rounded-lg bg-blue-50 border border-blue-200" role="alert"> <span class="font-medium">Info alert!</span> Change a few things up and try submitting again. </div> COPY ``` ``` Info alert! Change a few things up and try submitting again. <div space="p:medium-3x m-b:medium" visual="text-size:base text:blue-800 rounded:medium bg:blue-50 border-w:thin border:blue-200" role="alert"> <span visual="font:tw-medium">Info alert!</span> Change a few things up and try submitting again. </div> COPY ```
Info alert! Change a few things up and try submitting again.
``` Info alert! Change a few things up and try submitting again. <div class="p-8 mb-4 text-lg text-blue-800 rounded-lg bg-blue-50 border border-blue-200" role="alert"> <span class="font-medium">Info alert!</span> Change a few things up and try submitting again. </div> COPY ``` ``` Info alert! Change a few things up and try submitting again. <div space="p:large m-b:medium" visual="text-size:large text:blue-800 rounded:medium bg:blue-50 border-w:thin border:blue-200" role="alert"> <span visual="font:tw-medium">Info alert!</span> Change a few things up and try submitting again. </div> COPY ```
Info alert! Change a few things up and try submitting again.
``` #### [\#](https://senangstart.com/components/progress-bar/llms.txt)Progress Bar feedback Linear Progress TailwindCSS SenangStart CSS S M L <div class="w-full bg-neutral-200 rounded-full h-1.5 mb-4"> <div class="bg-blue-600 h-1.5 rounded-full" style="width: 45%"></div> </div> COPY ```
``` <div space="w:\[100%\] h:tiny-2x m-b:medium" visual="bg:neutral-200 rounded:round"> <div space="h:tiny-2x w:\[45%\]" visual="bg:blue-600 rounded:round"></div> </div> COPY ```
``` <div class="w-full bg-neutral-200 rounded-full h-2.5 mb-4"> <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> </div> COPY ```
``` <div space="w:\[100%\] h:small-2x m-b:medium" visual="bg:neutral-200 rounded:round"> <div space="h:small-2x w:\[45%\]" visual="bg:blue-600 rounded:round"></div> </div> COPY ```
``` <div class="w-full bg-neutral-200 rounded-full h-4 mb-4"> <div class="bg-blue-600 h-4 rounded-full" style="width: 45%"></div> </div> COPY ```
``` <div space="w:\[100%\] h:medium m-b:medium" visual="bg:neutral-200 rounded:round"> <div space="h:medium w:\[45%\]" visual="bg:blue-600 rounded:round"></div> </div> COPY ```
``` #### [\#](https://senangstart.com/components/spinner/llms.txt)Spinner feedback Loading Indicator TailwindCSS SenangStart CSS S M L Loading... <div role="status"> <svg aria-hidden="true" class="w-4 h-4 text-gray-200 animate-spin fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg> <span class="sr-only">Loading...</span> </div> COPY ```
Loading...
``` Loading... <div role="status"> <svg aria-hidden="true" space="w:medium h:medium" visual="text:gray-200" class="animate-spin fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg> <span class="sr-only">Loading...</span> </div> COPY ```
Loading...
``` Loading... <div role="status"> <svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg> <span class="sr-only">Loading...</span> </div> COPY ```
Loading...
``` Loading... <div role="status"> <svg aria-hidden="true" space="w:large h:large" visual="text:gray-200" class="animate-spin fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg> <span class="sr-only">Loading...</span> </div> COPY ```
Loading...
``` Loading... <div role="status"> <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg> <span class="sr-only">Loading...</span> </div> COPY ```
Loading...
``` Loading... <div role="status"> <svg aria-hidden="true" space="w:big h:big" visual="text:gray-200" class="animate-spin fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg> <span class="sr-only">Loading...</span> </div> COPY ```
Loading...
``` #### [\#](https://senangstart.com/components/tooltip/llms.txt)Tooltip feedback Hover Tooltip TailwindCSS SenangStart CSS S M L Hover me (S) Tooltip text <div class="relative group inline-block"> <button type="button" class="text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Hover me (S)</button> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block w-max px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-sm transition-opacity duration-300"> Tooltip text <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div> </div> </div> COPY ```
``` Hover me (S) Tooltip text <div layout="relative hoverable focusable pressable expandable inline"> <button type="button" space="p-x:medium-2x p-y:small-2x" visual="text:white bg:blue-600 hover:bg:blue-700 font:tw-medium rounded:medium text-size:small text:center">Hover me (S)</button> <div layout="absolute bottom:full left:half hidden hover:block" space="m-b:small w:\[max-content\] p-x:small p-y:tiny" visual="translate-x:-half bg:gray-900 text:white text-size:mini rounded:small shadow:small transition:opacity duration:slow"> Tooltip text <div layout="absolute top:full left:half" visual="translate-x:-half border-w:tiny border:transparent border-t:gray-900"></div> </div> </div> COPY ```
Tooltip text
``` Hover me (M) Tooltip text <div class="relative group inline-block"> <button type="button" class="text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-base px-6 py-3 text-center">Hover me (M)</button> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block w-max px-3 py-2 bg-gray-900 text-white text-sm rounded shadow-sm transition-opacity duration-300"> Tooltip text <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div> </div> </div> COPY ```
``` Hover me (M) Tooltip text <div layout="relative hoverable focusable pressable expandable inline"> <button type="button" space="p-x:medium-3x p-y:small-3x" visual="text:white bg:blue-600 hover:bg:blue-700 font:tw-medium rounded:medium text-size:base text:center">Hover me (M)</button> <div layout="absolute bottom:full left:half hidden hover:block" space="m-b:small w:\[max-content\] p-x:small-3x p-y:small" visual="translate-x:-half bg:gray-900 text:white text-size:small rounded:small shadow:small transition:opacity duration:slow"> Tooltip text <div layout="absolute top:full left:half" visual="translate-x:-half border-w:tiny border:transparent border-t:gray-900"></div> </div> </div> COPY ```
Tooltip text
``` Hover me (L) Tooltip text <div class="relative group inline-block"> <button type="button" class="text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-lg px-8 py-3.5 text-center">Hover me (L)</button> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block w-max px-4 py-2 bg-gray-900 text-white text-base rounded shadow-sm transition-opacity duration-300"> Tooltip text <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div> </div> </div> COPY ```
``` Hover me (L) Tooltip text <div layout="relative hoverable focusable pressable expandable inline"> <button type="button" space="p-x:large p-y:small-4x" visual="text:white bg:blue-600 hover:bg:blue-700 font:tw-medium rounded:medium text-size:large text:center">Hover me (L)</button> <div layout="absolute bottom:full left:half hidden hover:block" space="m-b:small w:\[max-content\] p-x:medium p-y:small" visual="translate-x:-half bg:gray-900 text:white text-size:base rounded:small shadow:small transition:opacity duration:slow"> Tooltip text <div layout="absolute top:full left:half" visual="translate-x:-half border-w:tiny border:transparent border-t:gray-900"></div> </div> </div> COPY ```
Tooltip text
``` #### [\#](https://senangstart.com/components/progress-ring/llms.txt)Progress Ring feedback Circular Progress TailwindCSS SenangStart CSS S M L 75% <div class="relative w-10 h-10"> <svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36"> <path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" /> <path class="text-blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" /> </svg> <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-\[8px\] font-bold text-blue-600">75%</span> </div> COPY ```
75%
``` 75% <div layout="relative" space="w:large-3x h:large-3x"> <svg space="w:\[100%\] h:\[100%\]" class="transform -rotate-90" viewBox="0 0 36 36"> <path visual="text:gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" /> <path visual="text:blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="4" /> </svg> <span layout="absolute" visual="font:tw-bold text:blue-600" class="top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-\[8px\]">75%</span> </div> COPY ```
75%
``` 75% <div class="relative w-16 h-16"> <svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36"> <path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" /> <path class="text-blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" /> </svg> <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-blue-600">75%</span> </div> COPY ```
75%
``` 75% <div layout="relative" space="w:big-3x h:big-3x"> <svg space="w:\[100%\] h:\[100%\]" class="transform -rotate-90" viewBox="0 0 36 36"> <path visual="text:gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" /> <path visual="text:blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" /> </svg> <span layout="absolute" visual="text-size:mini font:tw-bold text:blue-600" class="top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">75%</span> </div> COPY ```
75%
``` 75% <div class="relative w-24 h-24"> <svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36"> <path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="2.5" /> <path class="text-blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="2.5" /> </svg> <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-base font-bold text-blue-600">75%</span> </div> COPY ```
75%
``` 75% <div layout="relative" space="w:giant h:giant"> <svg space="w:\[100%\] h:\[100%\]" class="transform -rotate-90" viewBox="0 0 36 36"> <path visual="text:gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="2.5" /> <path visual="text:blue-600" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="2.5" /> </svg> <span layout="absolute" visual="text-size:base font:tw-bold text:blue-600" class="top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">75%</span> </div> COPY ```
75%
``` #### [\#](https://senangstart.com/components/inputs/llms.txt)Inputs forms Standard Text Inputs TailwindCSS SenangStart CSS S M L <input type="text" class="h-10 px-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="Input S"> COPY ``` ``` <input type="text" space="h:large-3x p-x: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" class="placeholder-gray-400" placeholder="Input S"> COPY ``` ``` <input type="text" class="h-12 px-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="Input M"> COPY ``` ``` <input type="text" space="h:big p-x: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" class="placeholder-gray-400" placeholder="Input M"> COPY ``` ``` <input type="text" class="h-14 px-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="Input L"> COPY ``` ``` <input type="text" space="h:big-2x p-x: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" class="placeholder-gray-400" placeholder="Input L"> COPY ``` ``` #### [\#](https://senangstart.com/components/inputs-icon-start/llms.txt)Inputs (Icon Start) forms Input with icon at start TailwindCSS SenangStart CSS S M L <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> COPY ```
``` <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> COPY ```
``` <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> COPY ```
``` <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> COPY ```
``` <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> COPY ```
``` <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> COPY ```
``` #### [\#](https://senangstart.com/components/textarea/llms.txt)Textarea forms Standard Textarea TailwindCSS SenangStart CSS S M L <textarea class="w-full py-2 px-3 border-2 border-neutral-200 rounded-lg text-sm focus:outline-none focus:border-blue-600 placeholder-gray-400 transition-colors" rows="3" placeholder="Type here (S)..."></textarea> COPY ``` ``` <textarea space="w:\[100%\] p-y:small p-x:small-3x" visual="border-w:regular border:neutral-200 rounded:medium text-size:small focus:outline:none focus:border:blue-600 transition:colors" class="placeholder-gray-400" rows="3" placeholder="Type here (S)..."></textarea> COPY ``` ``` <textarea class="w-full py-2 px-3 border-2 border-neutral-200 rounded-lg text-base focus:outline-none focus:border-blue-600 placeholder-gray-400 transition-colors" rows="4" placeholder="Type here (M)..."></textarea> COPY ``` ``` <textarea space="w:\[100%\] p-y:small p-x:small-3x" visual="border-w:regular border:neutral-200 rounded:medium text-size:base focus:outline:none focus:border:blue-600 transition:colors" class="placeholder-gray-400" rows="4" placeholder="Type here (M)..."></textarea> COPY ``` ``` <textarea class="w-full py-2 px-3 border-2 border-neutral-200 rounded-lg text-lg focus:outline-none focus:border-blue-600 placeholder-gray-400 transition-colors" rows="5" placeholder="Type here (L)..."></textarea> COPY ``` ``` <textarea space="w:\[100%\] p-y:small p-x:small-3x" visual="border-w:regular border:neutral-200 rounded:medium text-size:large focus:outline:none focus:border:blue-600 transition:colors" class="placeholder-gray-400" rows="5" placeholder="Type here (L)..."></textarea> COPY ``` ``` #### [\#](https://senangstart.com/components/selects/llms.txt)Selects forms Native Select Dropdown TailwindCSS SenangStart CSS S M L Option S 1 Option S 2 <div class="relative"> <select class="appearance-none w-full h-10 px-3 pr-8 border-2 border-neutral-200 rounded-lg text-sm bg-white focus:outline-none focus:border-blue-600"> <option>Option S 1</option> <option>Option S 2</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"> <i class="fas fa-chevron-down text-xs"></i> </div> </div> COPY ```
``` Option S 1 Option S 2 <div layout="relative"> <select space="w:\[100%\] h:large-3x p-l:small-3x p-r:large" visual="appearance:none border-w:regular border:neutral-200 rounded:medium text-size:small bg:white focus:outline:blue-600"> <option>Option S 1</option> <option>Option S 2</option> </select> <div layout="absolute inset-y:0 right:0 flex items:center" space="p-x:small" visual="pointer-events:none text:gray-500"> <i visual="text-size:base" class="ss ss-chevron-down"></i> </div> </div> COPY ```
``` Option M 1 Option M 2 <div class="relative"> <select class="appearance-none w-full h-12 px-3 pr-10 border-2 border-neutral-200 rounded-lg text-base bg-white focus:outline-none focus:border-blue-600"> <option>Option M 1</option> <option>Option M 2</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500"> <i class="fas fa-chevron-down text-sm"></i> </div> </div> COPY ```
``` Option M 1 Option M 2 <div layout="relative"> <select space="w:\[100%\] h:big p-l:small-3x p-r:large-3x" visual="appearance:none border-w:regular border:neutral-200 rounded:medium text-size:base bg:white focus:outline:blue-600"> <option>Option M 1</option> <option>Option M 2</option> </select> <div layout="absolute inset-y:0 right:0 flex items:center" space="p-x:small-3x" visual="pointer-events:none text:gray-500"> <i visual="text-size:large" class="ss ss-chevron-down"></i> </div> </div> COPY ```
``` Option L 1 Option L 2 <div class="relative"> <select class="appearance-none w-full h-14 px-3 pr-12 border-2 border-neutral-200 rounded-lg text-lg bg-white focus:outline-none focus:border-blue-600"> <option>Option L 1</option> <option>Option L 2</option> </select> <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-500"> <i class="fas fa-chevron-down text-base"></i> </div> </div> COPY ```
``` Option L 1 Option L 2 <div layout="relative"> <select space="w:\[100%\] h:big-2x p-l:small-3x p-r:big" visual="appearance:none border-w:regular border:neutral-200 rounded:medium text-size:large bg:white focus:outline:blue-600"> <option>Option L 1</option> <option>Option L 2</option> </select> <div layout="absolute inset-y:0 right:0 flex items:center" space="p-x:medium" visual="pointer-events:none text:gray-500"> <i visual="text-size:big" class="ss ss-chevron-down"></i> </div> </div> COPY ```
``` #### [\#](https://senangstart.com/components/checkboxes/llms.txt)Checkboxes forms Standard Checkbox TailwindCSS SenangStart CSS S M L Checkbox S <div class="flex items-center"> <input id="check-s" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"> <label for="check-s" class="ml-2 text-sm font-medium text-gray-900">Checkbox S</label> </div> COPY ```
``` Checkbox S <div layout="flex items:center"> <input id="check-s" type="checkbox" value="" space="w:medium h:medium" visual="text:blue-600 bg:gray-100 border:gray-300 rounded:small focus:ring-color:blue-500 focus:ring:regular"> <label for="check-s" space="m-l:small" visual="text-size:small font:tw-medium text:gray-900">Checkbox S</label> </div> COPY ```
``` Checkbox M <div class="flex items-center"> <input id="check-m" type="checkbox" value="" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"> <label for="check-m" class="ml-2 text-base font-medium text-gray-900">Checkbox M</label> </div> COPY ```
``` Checkbox M <div layout="flex items:center"> <input id="check-m" type="checkbox" value="" space="w:medium-2x h:medium-2x" visual="text:blue-600 bg:gray-100 border:gray-300 rounded:small focus:ring-color:blue-500 focus:ring:regular"> <label for="check-m" space="m-l:small" visual="text-size:base font:tw-medium text:gray-900">Checkbox M</label> </div> COPY ```
``` Checkbox L <div class="flex items-center"> <input id="check-l" type="checkbox" value="" class="w-6 h-6 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"> <label for="check-l" class="ml-2 text-lg font-medium text-gray-900">Checkbox L</label> </div> COPY ```
``` Checkbox L <div layout="flex items:center"> <input id="check-l" type="checkbox" value="" space="w:medium-3x h:medium-3x" visual="text:blue-600 bg:gray-100 border:gray-300 rounded:small focus:ring-color:blue-500 focus:ring:regular"> <label for="check-l" space="m-l:small" visual="text-size:large font:tw-medium text:gray-900">Checkbox L</label> </div> COPY ```
``` #### [\#](https://senangstart.com/components/radio/llms.txt)Radio forms Standard Radio Button TailwindCSS SenangStart CSS S M L Radio S <div class="flex items-center"> <input id="radio-s" type="radio" value="" name="radio-group-s" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"> <label for="radio-s" class="ml-2 text-sm font-medium text-gray-900">Radio S</label> </div> COPY ```
``` Radio S <div layout="flex items:center"> <input id="radio-s" type="radio" value="" name="radio-group-s" space="w:medium h:medium" visual="text:blue-600 bg:gray-100 border:gray-300 focus:ring-color:blue-500 focus:ring:regular"> <label for="radio-s" space="m-l:small" visual="text-size:small font:tw-medium text:gray-900">Radio S</label> </div> COPY ```
``` Radio M <div class="flex items-center"> <input id="radio-m" type="radio" value="" name="radio-group-m" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"> <label for="radio-m" class="ml-2 text-base font-medium text-gray-900">Radio M</label> </div> COPY ```
``` Radio M <div layout="flex items:center"> <input id="radio-m" type="radio" value="" name="radio-group-m" space="w:medium-2x h:medium-2x" visual="text:blue-600 bg:gray-100 border:gray-300 focus:ring-color:blue-500 focus:ring:regular"> <label for="radio-m" space="m-l:small" visual="text-size:base font:tw-medium text:gray-900">Radio M</label> </div> COPY ```
``` Radio L <div class="flex items-center"> <input id="radio-l" type="radio" value="" name="radio-group-l" class="w-6 h-6 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"> <label for="radio-l" class="ml-2 text-lg font-medium text-gray-900">Radio L</label> </div> COPY ```
``` Radio L <div layout="flex items:center"> <input id="radio-l" type="radio" value="" name="radio-group-l" space="w:medium-3x h:medium-3x" visual="text:blue-600 bg:gray-100 border:gray-300 focus:ring-color:blue-500 focus:ring:regular"> <label for="radio-l" space="m-l:small" visual="text-size:large font:tw-medium text:gray-900">Radio L</label> </div> COPY ```
``` #### [\#](https://senangstart.com/components/switch/llms.txt)Switch forms Toggle Switch TailwindCSS SenangStart CSS S M L Toggle S <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-\[''\] after:absolute after:top-\[2px\] after:left-\[2px\] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div> <span class="ml-3 text-sm font-medium text-gray-900">Toggle S</span> </label> COPY ``` ``` Toggle S <label layout="relative inline-flex items:center" visual="cursor:pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-\[''\] after:absolute after:top-\[2px\] after:left-\[2px\] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div> <span space="m-l:small-3x" visual="text-size:small font:tw-medium text:gray-900">Toggle S</span> </label> COPY ``` ``` Toggle M <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-\[''\] after:absolute after:top-\[2px\] after:left-\[2px\] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span class="ml-3 text-base font-medium text-gray-900">Toggle M</span> </label> COPY ``` ``` Toggle M <label layout="relative inline-flex items:center" visual="cursor:pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-\[''\] after:absolute after:top-\[2px\] after:left-\[2px\] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span space="m-l:small-3x" visual="text-size:base font:tw-medium text:gray-900">Toggle M</span> </label> COPY ``` ``` Toggle L <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-\[''\] after:absolute after:top-0.5 after:left-\[4px\] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div> <span class="ml-3 text-lg font-medium text-gray-900">Toggle L</span> </label> COPY ``` ``` Toggle L <label layout="relative inline-flex items:center" visual="cursor:pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-\[''\] after:absolute after:top-0.5 after:left-\[4px\] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div> <span space="m-l:small-3x" visual="text-size:large font:tw-medium text:gray-900">Toggle L</span> </label> COPY ``` ``` #### [\#](https://senangstart.com/components/slider/llms.txt)Slider forms Range Slider TailwindCSS SenangStart CSS S M L Range S <div class="w-full"> <label for="range-s" class="block mb-2 text-sm font-medium text-gray-900">Range S</label> <input id="range-s" type="range" value="50" class="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm accent-blue-600"> </div> COPY ```
``` Range S <div space="w:\[100%\]"> <label for="range-s" layout="block" space="m-b:small" visual="text-size:small font:tw-medium text:gray-900">Range S</label> <input id="range-s" type="range" value="50" space="w:\[100%\] h:tiny m-b:medium-3x" visual="bg:gray-200 rounded:medium cursor:pointer" class="appearance-none range-sm accent-blue-600"> </div> COPY ```
``` Range M <div class="w-full"> <label for="range-m" class="block mb-2 text-base font-medium text-gray-900">Range M</label> <input id="range-m" type="range" value="50" class="w-full h-2 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"> </div> COPY ```
``` Range M <div space="w:\[100%\]"> <label for="range-m" layout="block" space="m-b:small" visual="text-size:base font:tw-medium text:gray-900">Range M</label> <input id="range-m" type="range" value="50" space="w:\[100%\] h:small m-b:medium-3x" visual="bg:gray-200 rounded:medium cursor:pointer" class="appearance-none accent-blue-600"> </div> COPY ```
``` Range L <div class="w-full"> <label for="range-l" class="block mb-2 text-lg font-medium text-gray-900">Range L</label> <input id="range-l" type="range" value="50" class="w-full h-3 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"> </div> COPY ```
``` Range L <div space="w:\[100%\]"> <label for="range-l" layout="block" space="m-b:small" visual="text-size:large font:tw-medium text:gray-900">Range L</label> <input id="range-l" type="range" value="50" space="w:\[100%\] h:small-3x m-b:medium-3x" visual="bg:gray-200 rounded:medium cursor:pointer" class="appearance-none accent-blue-600"> </div> COPY ```
``` #### [\#](https://senangstart.com/components/color-picker/llms.txt)Color Picker forms Color Input TailwindCSS SenangStart CSS S M L Color S <div class="flex items-center gap-2"> <input type="color" class="p-1 h-8 w-14 block bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="color-s" value="#2563eb" title="Choose your color"> <label for="color-s" class="text-sm text-gray-700">Color S</label> </div> COPY ```
``` Color S <div layout="flex items:center" space="g:small"> <input type="color" layout="block" space="p:tiny h:large w:big-2x" visual="bg:white border-w:thin border:gray-200 cursor:pointer rounded:medium disabled:opacity:50" class="disabled:pointer-events-none" id="color-s" value="#2563eb" title="Choose your color"> <label for="color-s" visual="text-size:small text:gray-700">Color S</label> </div> COPY ```
``` Color M <div class="flex items-center gap-2"> <input type="color" class="p-1 h-10 w-20 block bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="color-m" value="#2563eb" title="Choose your color"> <label for="color-m" class="text-base text-gray-700">Color M</label> </div> COPY ```
``` Color M <div layout="flex items:center" space="g:small"> <input type="color" layout="block" space="p:tiny h:large-3x w:big-4x" visual="bg:white border-w:thin border:gray-200 cursor:pointer rounded:medium disabled:opacity:50" class="disabled:pointer-events-none" id="color-m" value="#2563eb" title="Choose your color"> <label for="color-m" visual="text-size:base text:gray-700">Color M</label> </div> COPY ```
``` Color L <div class="flex items-center gap-2"> <input type="color" class="p-1.5 h-14 w-24 block bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none" id="color-l" value="#2563eb" title="Choose your color"> <label for="color-l" class="text-lg text-gray-700">Color L</label> </div> COPY ```
``` Color L <div layout="flex items:center" space="g:small"> <input type="color" layout="block" space="p:tiny-2x h:big-2x w:giant" visual="bg:white border-w:thin border:gray-200 cursor:pointer rounded:medium disabled:opacity:50" class="disabled:pointer-events-none" id="color-l" value="#2563eb" title="Choose your color"> <label for="color-l" visual="text-size:large text:gray-700">Color L</label> </div> COPY ```
``` #### [\#](https://senangstart.com/components/rating/llms.txt)Rating forms Star Rating TailwindCSS SenangStart CSS S M L <div class="flex items-center space-x-1"> <i class="fas fa-star text-yellow-400 text-sm"></i> <i class="fas fa-star text-yellow-400 text-sm"></i> <i class="fas fa-star text-yellow-400 text-sm"></i> <i class="fas fa-star text-yellow-400 text-sm"></i> <i class="fas fa-star text-gray-300 text-sm"></i> </div> COPY ```
``` <div layout="flex items:center" class="space-x-1"> <i visual="text:yellow-400 text-size:small" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:small" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:small" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:small" class="ss ss-star"></i> <i visual="text:gray-300 text-size:small" class="ss ss-star"></i> </div> COPY ```
``` <div class="flex items-center space-x-1"> <i class="fas fa-star text-yellow-400 text-lg"></i> <i class="fas fa-star text-yellow-400 text-lg"></i> <i class="fas fa-star text-yellow-400 text-lg"></i> <i class="fas fa-star text-yellow-400 text-lg"></i> <i class="fas fa-star text-gray-300 text-lg"></i> </div> COPY ```
``` <div layout="flex items:center" class="space-x-1"> <i visual="text:yellow-400 text-size:large" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:large" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:large" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:large" class="ss ss-star"></i> <i visual="text:gray-300 text-size:large" class="ss ss-star"></i> </div> COPY ```
``` <div class="flex items-center space-x-1"> <i class="fas fa-star text-yellow-400 text-2xl"></i> <i class="fas fa-star text-yellow-400 text-2xl"></i> <i class="fas fa-star text-yellow-400 text-2xl"></i> <i class="fas fa-star text-yellow-400 text-2xl"></i> <i class="fas fa-star text-gray-300 text-2xl"></i> </div> COPY ```
``` <div layout="flex items:center" class="space-x-1"> <i visual="text:yellow-400 text-size:huge" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:huge" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:huge" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:huge" class="ss ss-star"></i> <i visual="text:gray-300 text-size:huge" class="ss ss-star"></i> </div> COPY ```
``` #### [\#](https://senangstart.com/components/forms/llms.txt)Forms layout Layout Forms TailwindCSS SenangStart CSS S M L ###### Contact Form S Name Email Enquiry Submit <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> COPY ```
Contact Form S
``` ###### Contact Form S Name Email Enquiry Submit <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> COPY ```
Contact Form S
``` ###### Contact Form M Name Email Enquiry Submit <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> COPY ```
Contact Form M
``` ###### Contact Form M Name Email Enquiry Submit <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> COPY ```
Contact Form M
``` ###### Contact Form L Name Email Enquiry Submit <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> COPY ```
Contact Form L
``` ###### Contact Form L Name Email Enquiry Submit <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> COPY ```
Contact Form L
``` #### [\#](https://senangstart.com/components/modals/llms.txt)Modals layout Overlay Modals TailwindCSS SenangStart CSS S M L ###### Modal Title Here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cancel Submit <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> COPY ```
Modal Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ###### Modal Title Here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cancel Submit <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> COPY ```
Modal Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ###### Modal Title Here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cancel Submit <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> COPY ```
Modal Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ###### Modal Title Here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cancel Submit <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> COPY ```
Modal Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ##### Modal Title Here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cancel Submit <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> COPY ```
Modal Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ##### Modal Title Here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cancel Submit <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> COPY ```
Modal Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` #### [\#](https://senangstart.com/components/cards-simple-filled/llms.txt)Cards (Simple Filled) layout Cards (Simple) TailwindCSS SenangStart CSS ###### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div class="grid p-6 gap-4 rounded-lg bg-gray-100 border border-transparent hover:border-blue-200 transition-all"> <h6 class="text-base lg:text-lg capitalize font-semibold text-gray-900"> Card title here... </h6> <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> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ###### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div layout="grid" space="p:medium-3x g:medium" visual="rounded:medium bg:gray-100 border-w:thin hover:border:blue-200 transition:all" class="border-transparent"> <h6 visual="text-size:base tw-lg:text-size:large capitalize font:tw-semibold text:gray-900"> Card title here... </h6> <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> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` #### [\#](https://senangstart.com/components/cards-simple-outline/llms.txt)Cards (Simple Outline) layout Cards (Simple Outline) TailwindCSS SenangStart CSS ###### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div class="grid p-6 gap-4 rounded-lg border border-neutral-200 bg-white hover:shadow-md transition-shadow"> <h6 class="text-base lg:text-lg capitalize font-semibold text-gray-900"> Card title here... </h6> <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> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ###### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div layout="grid" space="p:medium-3x g:medium" visual="rounded:medium border-w:thin border:neutral-200 bg:white hover:shadow:medium transition:shadow"> <h6 visual="text-size:base tw-lg:text-size:large capitalize font:tw-semibold text:gray-900"> Card title here... </h6> <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> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` #### [\#](https://senangstart.com/components/cards-icon-start-filled/llms.txt)Cards (Icon Start Filled) layout Cards (Icon Start Filled) TailwindCSS SenangStart CSS ###### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div class="bg-gray-100 rounded-lg p-6 flex flex-col hover:bg-gray-200 transition-colors"> <div class="bg-blue-600 text-white w-14 h-14 rounded-lg mb-4 flex items-center justify-center text-2xl shadow-sm"> <i class="fas fa-cube"></i> </div> <h6 class="mb-2 font-semibold text-base lg:text-lg text-gray-900"> Card title here... </h6> <p class="text-gray-600 text-sm lg:text-base"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ###### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div layout="flex col" space="p:medium-3x" visual="bg:gray-100 rounded:medium hover:bg:gray-200 transition:colors"> <div layout="flex items:center justify:center" space="w:big-2x h:big-2x m-b:medium" visual="bg:blue-600 text:white rounded:medium text-size:huge shadow:small"> <i class="ss ss-cube"></i> </div> <h6 space="m-b:small" visual="font:tw-semibold text-size:base tw-lg:text-size:large text:gray-900"> Card title here... </h6> <p visual="text:gray-600 text-size:small tw-lg:text-size:base"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` #### [\#](https://senangstart.com/components/cards-icon-start-outline/llms.txt)Cards (Icon Start Outline) layout Cards (Icon Start Outline) TailwindCSS SenangStart CSS ###### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div class="border border-neutral-200 rounded-lg p-6 flex flex-col hover:border-blue-400 transition-colors"> <div class="bg-blue-50 text-blue-600 w-14 h-14 rounded-lg mb-4 flex items-center justify-center text-2xl"> <i class="fas fa-cube"></i> </div> <h6 class="mb-2 font-semibold text-base lg:text-lg text-gray-900"> Card title here... </h6> <p class="text-gray-600 text-sm lg:text-base"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ###### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div layout="flex col" space="p:medium-3x" visual="border-w:thin border:neutral-200 rounded:medium hover:border:blue-400 transition:colors"> <div layout="flex items:center justify:center" space="w:big-2x h:big-2x m-b:medium" visual="bg:blue-50 text:blue-600 rounded:medium text-size:huge"> <i class="ss ss-cube"></i> </div> <h6 space="m-b:small" visual="font:tw-semibold text-size:base tw-lg:text-size:large text:gray-900"> Card title here... </h6> <p visual="text:gray-600 text-size:small tw-lg:text-size:base"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` #### [\#](https://senangstart.com/components/cards-image-outline/llms.txt)Cards (Image Outline) layout Cards (Image Outline) TailwindCSS SenangStart CSS ##### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ![](https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image) <div class="max-w-md w-full"> <div class="border border-neutral-200 rounded-xl overflow-hidden hover:shadow-lg transition-shadow"> <div class="p-6"> <h5 class="text-lg lg:text-xl font-semibold mb-2 text-gray-900"> Card title here... </h5> <p class="text-gray-600 mb-4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" class="w-full h-48 object-cover"> </div> </div> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ##### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ![](https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image) <div space="max-w:\[480px\] w:\[100%\]"> <div layout="overflow:hidden" visual="border-w:thin border:neutral-200 rounded:medium hover:shadow:big transition:shadow"> <div space="p:medium-3x"> <h5 space="m-b:small" visual="text-size:large tw-lg:text-size:big font:tw-semibold text:gray-900"> Card title here... </h5> <p space="m-b:medium" 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> <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" layout="object:cover" space="w:\[100%\] h:vast-3x"> </div> </div> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` #### [\#](https://senangstart.com/components/cards-image-filled/llms.txt)Cards (Image Filled) layout Cards (Image Filled) TailwindCSS SenangStart CSS ##### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ![](https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image) <div class="max-w-md w-full"> <div class="bg-gray-100 rounded-xl overflow-hidden hover:bg-gray-200 transition-colors"> <div class="p-6"> <h5 class="text-lg lg:text-xl font-semibold mb-2 text-gray-900"> Card title here... </h5> <p class="text-gray-600 mb-4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" class="w-full h-48 object-cover"> </div> </div> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` ##### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ![](https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image) <div space="max-w:\[480px\] w:\[100%\]"> <div layout="overflow:hidden" visual="bg:gray-100 rounded:medium hover:bg:gray-200 transition:colors"> <div space="p:medium-3x"> <h5 space="m-b:small" visual="text-size:large tw-lg:text-size:big font:tw-semibold text:gray-900"> Card title here... </h5> <p space="m-b:medium" 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> <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" layout="object:cover" space="w:\[100%\] h:vast-3x"> </div> </div> COPY ```
Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` #### [\#](https://senangstart.com/components/cards-image-action-filled/llms.txt)Cards (Image Action Filled) layout Cards (Image Action Filled) TailwindCSS SenangStart CSS #### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [Learn More ](#) ![](https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image) <div class="max-w-md w-full"> <div class="rounded-xl overflow-hidden flex flex-col justify-between bg-gray-100 hover:shadow-lg transition-all"> <div class="p-6 text-center flex flex-col justify-between h-full"> <div> <h4 class="text-xl lg:text-2xl mb-2 font-semibold text-gray-900"> Card title here... </h4> <p class="text-gray-600 mb-6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="flex justify-center"> <a href="#" class="font-semibold text-blue-600 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80 transition-all">Learn More <i class="fas fa-arrow-right"></i></a> </div> </div> <div> <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" class="w-full h-48 object-cover"> </div> </div> </div> COPY ```

Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More
``` #### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [Learn More ](#) ![](https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image) <div space="max-w:\[480px\] w:\[100%\]"> <div layout="overflow:hidden flex col justify:between" visual="rounded:medium bg:gray-100 hover:shadow:big transition:all"> <div layout="flex col justify:between" space="p:medium-3x h:\[100%\]" visual="text:center"> <div> <h4 space="m-b:small" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:gray-900"> Card title here... </h4> <p space="m-b:medium-3x" 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:center"> <a href="#" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 tw-lg:text-size:large hover:opacity:80 transition:all">Learn More <i class="ss ss-arrow-right"></i></a> </div> </div> <div> <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" layout="object:cover" space="w:\[100%\] h:vast-3x"> </div> </div> </div> COPY ```

Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More
``` #### [\#](https://senangstart.com/components/cards-image-action-outline/llms.txt)Cards (Image Action Outline) layout Cards (Image Action Outline) TailwindCSS SenangStart CSS #### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [Learn More ](#) ![](https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image) <div class="max-w-md w-full"> <div class="rounded-xl overflow-hidden flex flex-col justify-between border border-neutral-200 bg-white hover:shadow-lg transition-shadow"> <div class="p-6 text-center flex flex-col justify-between h-full"> <div> <h4 class="text-xl lg:text-2xl mb-2 font-semibold text-gray-900"> Card title here... </h4> <p class="text-gray-600 mb-6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="flex justify-center"> <a href="#" class="font-semibold text-blue-600 lg:text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80 transition-all">Learn More <i class="fas fa-arrow-right"></i></a> </div> </div> <div> <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" class="w-full h-48 object-cover"> </div> </div> </div> COPY ```

Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More
``` #### Card title here... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [Learn More ](#) ![](https://dummyimage.com/600x400/2564eb/ffffff.png&text=SenangStart Image) <div space="max-w:\[480px\] w:\[100%\]"> <div layout="overflow:hidden flex col justify:between" visual="rounded:medium border-w:thin border:neutral-200 bg:white hover:shadow:big transition:shadow"> <div layout="flex col justify:between" space="p:medium-3x h:\[100%\]" visual="text:center"> <div> <h4 space="m-b:small" visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:gray-900"> Card title here... </h4> <p space="m-b:medium-3x" 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:center"> <a href="#" layout="flex items:center" space="g:small p-r:tiny hover:g:small-3x hover:p-r:none" visual="font:tw-semibold text:blue-600 tw-lg:text-size:large hover:opacity:80 transition:all">Learn More <i class="ss ss-arrow-right"></i></a> </div> </div> <div> <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" layout="object:cover" space="w:\[100%\] h:vast-3x"> </div> </div> </div> COPY ```

Card title here...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More
```