Loading...
Back

#Headings

typography

Standard Headings

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>

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>

#Sub Headings

typography

Sub Headings

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>

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>

#Buttons

actions

Standard Action Buttons

<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>
<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>
<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>
<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>
<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>
<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>

#Buttons (Outline)

actions

Outline Buttons

<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>
<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>
<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>
<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>
<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>
<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>

#Button Group

actions

Grouped buttons

<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>
<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>
<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>
<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>
<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>
<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 Button

actions

Input with attached copy button

<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>
<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>
<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>
<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>
<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>
<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>

#Badge

feedback

Status Badges

Badge S 
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Badge S</span>
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>
Badge M 
<span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">Badge M</span>
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>
Badge L 
<span class="bg-blue-100 text-blue-800 text-base font-medium px-3.5 py-1.5 rounded">Badge L</span>
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>

#Tag

feedback

Dismissible Tags

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>
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>
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>
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>
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>
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>

#Callout

feedback

Info/Alert Box

<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>
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>
<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>
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>
<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>
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>

#Progress Bar

feedback

Linear Progress

<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>
<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>
<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>
<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>
<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>
<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>

#Spinner

feedback

Loading Indicator

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>
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>
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>
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>
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>
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>

#Tooltip

feedback

Hover Tooltip

<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>
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>
<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>
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>
<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>
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>

#Progress Ring

feedback

Circular Progress

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>
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>
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>
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>
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>
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>

#Inputs

forms

Standard Text Inputs

<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">
<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">
<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">
<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">
<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">
<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">

#Inputs (Icon Start)

forms

Input with icon at start

<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>
<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>
<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>
<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>
<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>
<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>

#Textarea

forms

Standard Textarea

<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>
<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>
<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>
<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>
<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>
<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>

#Selects

forms

Native Select Dropdown

<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>
<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>
<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>
<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>
<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>
<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>

#Checkboxes

forms

Standard Checkbox

<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>
<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>
<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>
<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>
<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>
<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>

#Radio

forms

Standard Radio Button

<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>
<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>
<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>
<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>
<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>
<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>

#Switch

forms

Toggle Switch

<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>
<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>
<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>
<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>
<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>
<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>

#Slider

forms

Range Slider

<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>
<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>
<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>
<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>
<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>
<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>

#Color Picker

forms

Color Input

<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>
<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>
<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>
<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>
<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>
<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>

#Rating

forms

Star Rating

<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>
<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>
<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>
<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>
<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>
<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>

#Forms

layout

Layout Forms

Contact Form S 
<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="[email protected]">
  </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>
Contact Form S 
<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="[email protected]">
  </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>
Contact Form M 
<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="[email protected]">
  </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>
Contact Form M 
<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="[email protected]">
  </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>
Contact Form L 
<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="[email protected]">
  </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>
Contact Form L 
<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="[email protected]">
  </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>

#Modals

layout

Overlay Modals

Modal Title Here

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

<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>
Modal 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="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>
Modal Title Here

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

<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>
Modal 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="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>
Modal Title Here

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

<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>
Modal 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="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>

#Cards (Simple Filled)

layout

Cards (Simple)

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>
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>

#Cards (Simple Outline)

layout

Cards (Simple Outline)

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>
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>

#Cards (Icon Start Filled)

layout

Cards (Icon Start Filled)

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>
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>

#Cards (Icon Start Outline)

layout

Cards (Icon Start Outline)

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>
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>

#Cards (Image Outline)

layout

Cards (Image Outline)

Card title here...

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

<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>
Card title here...

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

<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>

#Cards (Image Filled)

layout

Cards (Image Filled)

Card title here...

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

<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>
Card title here...

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

<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>

#Cards (Image Action Filled)

layout

Cards (Image Action Filled)

Card title here...

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

Learn More 
<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>

Card title here...

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

<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>

#Cards (Image Action Outline)

layout

Cards (Image Action Outline)

Card title here...

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

Learn More 
<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>

Card title here...

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

<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>