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>

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>

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

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

actions

Grouped buttons

<div class="inline-flex rounded-lg shadow-sm" role="group">
  <button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg 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 border-t border-b border-gray-200 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 border border-gray-200 rounded-r-lg 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 class="inline-flex rounded-lg shadow-sm" role="group">
  <button type="button" class="px-5 py-2.5 text-base font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg 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 border-t border-b border-gray-200 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 border border-gray-200 rounded-r-lg 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 class="inline-flex rounded-lg shadow-sm" role="group">
  <button type="button" class="px-6 py-3 text-lg font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg 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 border-t border-b border-gray-200 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 border border-gray-200 rounded-r-lg 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 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">
        <i class="fas fa-copy"></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">
        <i class="fas fa-copy"></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">
        <i class="fas fa-copy"></i>
    </button>
</div>

Dropdown

actions

CSS-only details/summary dropdown

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>

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>

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>

Links

actions

Standard Text Links

Link S

<a href="#" class="text-blue-600 text-sm font-semibold hover:text-blue-800 underline transition-colors">Link S</a>

Link M

<a href="#" class="text-blue-600 text-base font-semibold hover:text-blue-800 underline transition-colors">Link M</a>

Link L

<a href="#" class="text-blue-600 text-lg font-semibold hover:text-blue-800 underline transition-colors">Link L</a>

Links (Icon End)

actions

Links with icon at end

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>

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>

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>

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 M

<span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">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>

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

Callout

feedback

Info/Alert Box

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>

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>

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>

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

Spinner

feedback

Loading Indicator

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

Checkboxes

forms

Standard Checkbox

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>

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>

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>

Radio

forms

Standard Radio Button

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>

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>

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>

Switch

forms

Toggle Switch

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>

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>

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>

Slider

forms

Range Slider

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>

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>

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>

Color Picker

forms

Color Input

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>

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>

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>

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

Forms

layout

Layout Forms

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

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

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

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

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

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

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>

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

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

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

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>

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>

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>

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>

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>

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>

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>

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>

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