Buttons

general

Buttons

<button type="button" 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">
  Button S
</button>

<button type="button" 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">
  Button M
</button>

<button type="button" 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">
  Button L
</button>

Buttons (Outline)

general

Buttons (Outline)

<button type="button" class="border-blue-600 border-2 text-blue-600 rounded-lg text-base font-semibold px-4 w-full lg:max-w-max h-10 flex items-center justify-center hover:opacity-80">
  Button S
</button>

<button type="button" class="border-blue-600 border-2 text-blue-600 rounded-lg text-lg font-semibold px-6 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80">
  Button M
</button>

<button type="button" class="border-blue-600 border-2 text-blue-600 rounded-lg text-xl font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80">
  Button L
</button>

Cards (Icon Start Filled)

general

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-200 rounded-lg p-4 flex flex-col">
    <div class="bg-blue-600 text-white w-16 rounded-md mb-4 h-16 flex items-center justify-center text-4xl">
      <i class="fas fa-cube"></i>
    </div>
    <h6 class="mb-2 font-semibold text-base lg:text-lg">
      Card title here...
    </h6>
    <h6 class="text-base lg:text-lg">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
    </h6>
</div>

Cards (Icon Start Outline)

general

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-4 flex flex-col">
    <div class="bg-blue-600 text-white w-16 rounded-md mb-4 h-16 flex items-center justify-center text-4xl">
      <i class="fas fa-cube"></i>
    </div>
    <h6 class="mb-2 font-semibold text-base lg:text-lg">
      Card title here...
    </h6>
    <h6 class="text-base lg:text-lg">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
    </h6>
</div>

Cards (Image Action Filled)

general

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-lg lg:rounded-2xl overflow-hidden flex flex-col justify-between bg-gray-200">
    <div class="p-4 lg:p-8 text-center flex flex-col justify-between h-full">
      <div>
        <h4 class="text-xl lg:text-2xl mb-2 lg:mb-4 font-semibold">
          Card title here...
        </h4>
        <h6 class="text-base lg:text-lg mb-4 lg:mb-8">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
          do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </h6>
      </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">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">
    </div>
  </div>
</div>

Cards (Image Action Outline)

general

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-lg lg:rounded-2xl overflow-hidden flex flex-col justify-between border border-neutral-200">
    <div class="p-4 lg:p-8 text-center flex flex-col justify-between h-full">
      <div>
        <h4 class="text-xl lg:text-2xl mb-2 lg:mb-4 font-semibold">
          Card title here...
        </h4>
        <h6 class="text-base lg:text-lg mb-4 lg:mb-8">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
          do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </h6>
      </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">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">
    </div>
  </div>
</div>

Cards (Image Filled)

general

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-200 rounded-xl px-4 pt-4 flex flex-col justify-between">
        <div>
          <h5 class="text-lg lg:text-xl font-semibold mb-4">
            Card title here...
          </h5>
          <h6 class="text-base lg:text-lg mb-4 lg:mb-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </h6>
        </div>
        <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" class="w-full">
    </div>
</div>

Cards (Image Outline)

general

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 px-4 pt-4 flex flex-col justify-between">
        <div>
          <h5 class="text-lg lg:text-xl font-semibold mb-4">
            Card title here...
          </h5>
          <h6 class="text-base lg:text-lg mb-4 lg:mb-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </h6>
        </div>
        <img src="https://dummyimage.com/600x400/2564eb/ffffff.png&amp;text=SenangStart Image" class="w-full">
    </div>
</div>

Cards (Simple Filled)

general

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-200">
    <h6 class="text-base lg:text-lg capitalize font-semibold">
      Card title here...
    </h6>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</div>

Cards (Simple Outline)

general

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">
    <h6 class="text-base lg:text-lg capitalize font-semibold">
      Card title here...
    </h6>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</div>

Checkboxes

general

Checkboxes

Checkbox S

<label for="checkbox_s" class="select-none grid grid-flow-col gap-3 items-center text-base max-w-max">
  <div class="grid items-center justify-center">
    <input type="checkbox" id="checkbox_s" checked="" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 rounded dark:border-slate-600 checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600 forced-colors:appearance-auto">
    <svg viewBox="0 0 14 14" fill="none" class="invisible peer-checked:visible row-start-1 col-start-1 stroke-white dark:text-blue-300 forced-colors:hidden">
      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </div>
  Checkbox S
</label>

Checkbox M

<label for="checkbox_m" class="select-none grid grid-flow-col gap-3 items-center text-lg max-w-max">
  <div class="grid items-center justify-center">
    <input type="checkbox" id="checkbox_m" checked="" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 rounded dark:border-slate-600 checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600 forced-colors:appearance-auto">
    <svg viewBox="0 0 14 14" fill="none" class="invisible peer-checked:visible row-start-1 col-start-1 stroke-white dark:text-blue-300 forced-colors:hidden">
      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </div>
  Checkbox M
</label>

Checkbox L

<label for="checkbox_l" class="select-none grid grid-flow-col gap-3 items-center text-xl max-w-max">
  <div class="grid items-center justify-center">
    <input type="checkbox" id="checkbox_l" checked="" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 rounded dark:border-slate-600 checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600 forced-colors:appearance-auto">
    <svg viewBox="0 0 14 14" fill="none" class="invisible peer-checked:visible row-start-1 col-start-1 stroke-white dark:text-blue-300 forced-colors:hidden">
      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </div>
  Checkbox L
</label>

Forms

general

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

Headings

general

Heading for title

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

<h1 class="text-4xl lg:text-7xl capitalize font-bold">Heading H1</h1>
<h2 class="text-3xl lg:text-6xl capitalize font-bold">Heading H2</h2>
<h3 class="text-2xl lg:text-4xl capitalize font-bold">Heading H3</h3>
<h4 class="text-xl lg:text-2xl capitalize font-bold">Heading H4</h4>
<h5 class="text-lg lg:text-xl capitalize font-bold">Heading H5</h5>
<h6 class="text-base lg:text-lg capitalize font-bold">Heading H6</h6>

Inputs

general

testing

<input type="text" class="h-10 px-3 border-neutral-200 border-2 rounded-lg text-base" value="Input S">

<input type="text" class="h-12 px-3 border-neutral-200 border-2 rounded-lg text-lg" value="Input M">

<input type="text" class="h-14 px-3 border-neutral-200 border-2 rounded-lg text-xl" value="Input L">

Inputs (Icon End)

general

Inputs (Icon End)

<div class="h-10 border-neutral-200 border-2 rounded-lg text-base flex">
  <input type="text" class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow" value="Input S">
  <span class="min-w-10 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-paper-plane"></i></span>
</div>

<div class="h-12 border-neutral-200 border-2 rounded-lg text-lg flex">
  <input type="text" class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow" value="Input M">
  <span class="min-w-12 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-paper-plane"></i></span>
</div>

<div class="h-14 border-neutral-200 border-2 rounded-lg text-xl flex">
  <input type="text" class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow" value="Input L">
  <span class="min-w-14 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-paper-plane"></i></span>
</div>

Inputs (Icon Start & End)

general

Inputs (Icon Start & End)

<div class="h-10 border-neutral-200 border-2 rounded-lg text-base flex">
  <span class="min-w-10 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-envelope"></i></span>
  <input type="text" class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow" value="Input S">
  <span class="min-w-10 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-paper-plane"></i></span>
</div>

<div class="h-12 border-neutral-200 border-2 rounded-lg text-lg flex">
  <span class="min-w-12 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-envelope"></i></span>
  <input type="text" class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow" value="Input M">
  <span class="min-w-12 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-paper-plane"></i></span>
</div>

<div class="h-14 border-neutral-200 border-2 rounded-lg text-xl flex">
  <span class="min-w-14 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-envelope"></i></span>
  <input type="text" class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow" value="Input L">
  <span class="min-w-14 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg">
    <i class="fas fa-paper-plane"></i></span>
</div>

Inputs (Icon Start)

general

Testing

<div class="h-10 border-neutral-200 border-2 rounded-lg text-base flex">
  <span
    class="min-w-10 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg"
  >
    <i class="fas fa-envelope"></i
  ></span>
  <input
    type="text"
    class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow"
    value="Input S"
  />
</div>

<div class="h-12 border-neutral-200 border-2 rounded-lg text-lg flex">
  <span
    class="min-w-12 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg"
  >
    <i class="fas fa-envelope"></i
  ></span>
  <input
    type="text"
    class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow"
    value="Input M"
  />
</div>

<div class="h-14 border-neutral-200 border-2 rounded-lg text-xl flex">
  <span
    class="min-w-14 bg-neutral-200 flex items-center justify-center last:rounded-r-lg first:rounded-l-lg"
  >
    <i class="fas fa-envelope"></i
  ></span>
  <input
    type="text"
    class="px-3 last:rounded-r-lg first:rounded-l-lg flex-grow"
    value="Input L"
  />
</div>

Labels

general

Labels

Label S

<div class="grid">
  <label class="text-bold text-sm h-6">Label S</label>
  <input type="text" class="h-10 px-3 border-neutral-200 border-2 rounded-lg text-base" value="Input S">
</div>

Label M

<div class="grid">
  <label class="text-bold text-sm h-6">Label M</label>
  <input type="text" class="h-12 px-3 border-neutral-200 border-2 rounded-lg text-lg" value="Input M">
</div>

Label L

<div class="grid">
  <label class="text-bold text-sm h-6">Label L</label>
  <input type="text" class="h-14 px-3 border-neutral-200 border-2 rounded-lg text-xl" value="Input L">
</div>

Links

general

Links

Links S

<a href="#" class="text-blue-600 rounded-lg text-base font-semibold flex items-center justify-center hover:opacity-80 max-w-max">Links S</a>

Links M

<a href="#" class="text-blue-600 rounded-lg text-lg font-semibold flex items-center justify-center hover:opacity-80 max-w-max">Links M</a>

Links L

<a href="#" class="text-blue-600 rounded-lg text-xl font-semibold flex items-center justify-center hover:opacity-80 max-w-max">Links L</a>

Links (Icon End)

general

Links (Icon End)

Links Icon S

<a href="#" class="font-semibold text-blue-600 text-base flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80">Links Icon S<i class="fas fa-arrow-right"></i></a>

Links Icon M

<a href="#" class="font-semibold text-blue-600 text-lg flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80">Links Icon M<i class="fas fa-arrow-right"></i></a>

Links Icon L

<a href="#" class="font-semibold text-blue-600 text-xl flex items-center gap-2 pr-1 hover:gap-3 hover:pr-0 hover:opacity-80">Links Icon L<i class="fas fa-arrow-right"></i></a>

Links (Icon Start)

general

Links (Icon Start)

Links Icon S

<a href="#" class="font-semibold text-blue-600 text-base flex items-center gap-2 pl-1 hover:gap-3 hover:pl-0 hover:opacity-80"><i class="fas fa-arrow-left"></i>Links Icon S</a>

Links Icon M

<a href="#" class="font-semibold text-blue-600 text-lg flex items-center gap-2 pl-1 hover:gap-3 hover:pl-0 hover:opacity-80"><i class="fas fa-arrow-left"></i>Links Icon M</a>

Links Icon L

<a href="#" class="font-semibold text-blue-600 text-xl flex items-center gap-2 pl-1 hover:gap-3 hover:pl-0 hover:opacity-80"><i class="fas fa-arrow-left"></i>Links Icon L</a>

Modals

general

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">
  <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">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="py-2 px-4">
    <p>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-base font-semibold px-4 w-full lg:max-w-max h-10 flex items-center justify-center hover:opacity-80">
      Cancel
    </button>
    <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>
</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">
  <div class="py-4 px-6 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">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="py-4 px-6">
    <p>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 w-full lg:max-w-max h-12 flex items-center justify-center hover:opacity-80">
      Cancel
    </button>
    <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>
</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">
  <div class="py-4 px-6 border-b border-neutral-200 flex justify-between items-center">
    <h5 class="text-lg lg:text-xl capitalize font-bold m-0">
      Modal Title Here
    </h5>
    <button class="flex items-center justify-center w-8 h-8 hover:bg-red-600 hover:text-white rounded">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="py-4 px-6">
    <p>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-xl font-semibold px-8 w-full lg:max-w-max h-14 flex items-center justify-center hover:opacity-80">
      Cancel
    </button>
    <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>
</div>

Radio

general

Radio

Radio S 1

Radio S 2

Radio S 3

<fieldset class="grid">
  <label for="radio_s_1" class="select-none grid grid-flow-col gap-3 items-center text-base max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" checked="" id="radio_s_1" name="radio_s" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio S 1
  </label>
  <label for="radio_s_2" class="select-none grid grid-flow-col gap-3 items-center text-base max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" id="radio_s_2" name="radio_s" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio S 2
  </label>
  <label for="radio_s_3" class="select-none grid grid-flow-col gap-3 items-center text-base max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" id="radio_s_3" name="radio_s" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio S 3
  </label>
</fieldset>

Radio M 1

Radio M 2

Radio M 3

<fieldset class="grid">
  <label for="radio_m_1" class="select-none grid grid-flow-col gap-3 items-center text-lg max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" checked="" id="radio_m_1" name="radio_m" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio M 1
  </label>
  <label for="radio_m_2" class="select-none grid grid-flow-col gap-3 items-center text-lg max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" id="radio_m_2" name="radio_m" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio M 2
  </label>
  <label for="radio_m_3" class="select-none grid grid-flow-col gap-3 items-center text-lg max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" id="radio_m_3" name="radio_m" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio M 3
  </label>
</fieldset>

Radio L 1

Radio L 2

Radio L 3

<fieldset class="grid">
  <label for="radio_l_1" class="select-none grid grid-flow-col gap-3 items-center text-xl max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" checked="" id="radio_l_1" name="radio_l" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio L 1
  </label>
  <label for="radio_l_2" class="select-none grid grid-flow-col gap-3 items-center text-xl max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" id="radio_l_2" name="radio_l" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio L 2
  </label>
  <label for="radio_l_3" class="select-none grid grid-flow-col gap-3 items-center text-xl max-w-max">
    <div class="grid items-center justify-center">
      <input type="radio" id="radio_l_3" name="radio_l" class="peer row-start-1 col-start-1 appearance-none w-4 h-4 border ring-transparent border-slate-300 dark:border-slate-600 forced-colors:appearance-auto rounded-full checked:bg-blue-600 checked:border-blue-600 dark:checked:border-blue-600">
    </div>
    Radio L 3
  </label>
</fieldset>

Selects

general

Selects

<div class="grid">
  <select class="appearance-none row-start-1 col-start-1 px-3 pr-10 h-10 border-neutral-200 border-2 rounded-lg text-base">
    <option selected="">Select a country (S)</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
  </select>
  <svg class="pointer-events-none row-start-1 col-start-1 w-10 justify-self-end p-3" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
  </svg>
</div>

<div class="grid">
  <select class="appearance-none row-start-1 col-start-1 px-3 pr-12 h-12 border-neutral-200 border-2 rounded-lg text-lg">
    <option selected="">Select a country (M)</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
  </select>
  <svg class="pointer-events-none row-start-1 col-start-1 w-12 justify-self-end p-3" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
  </svg>
</div>

<div class="grid">
  <select class="appearance-none row-start-1 col-start-1 px-3 pr-14 h-14 border-neutral-200 border-2 rounded-lg text-xl">
    <option selected="">Select a country (L)</option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
  </select>
  <svg class="pointer-events-none row-start-1 col-start-1 w-14 justify-self-end p-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
  </svg>
</div>

Sub Headings

general

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"> Sub Heading H1 </h1>
<h2 class="text-3xl lg:text-6xl capitalize font-semibold"> Sub Heading H2 </h2>
<h3 class="text-2xl lg:text-4xl capitalize font-semibold"> Sub Heading H3 </h3>
<h4 class="text-xl lg:text-2xl capitalize font-semibold"> Sub Heading H4 </h4>
<h5 class="text-lg lg:text-xl capitalize font-semibold"> Sub Heading H5 </h5>
<h6 class="text-base lg:text-lg capitalize font-semibold"> Sub Heading H6 </h6>

Textarea

general

Textarea

<textarea class="py-2 px-3 border-neutral-200 border-2 rounded-lg text-base" rows="3">Textarea S</textarea>

<textarea class="py-2 px-3 border-neutral-200 border-2 rounded-lg text-lg" rows="3">Textarea M</textarea>

<textarea class="py-2 px-3 border-neutral-200 border-2 rounded-lg text-xl" rows="3">Textarea L</textarea>