Color palette

main palette	#15162F dark #292C52 blue-dark #EA3434 red #F9D026 yellow
secondary palette	#00B5AF green #43B7E9 blue-picton #3264FA blue #C1DBFC blue-lavender
gray scale	#15162F gray #828F96 gray-light #A5B1B8 gray-lighter #D2D5DA gray-silver #E6EDF0 gray-lightest #F5F8FA white-ish
other colors	#333333 dark-charcoal #9CAFC8 blue-wind
fullcalendar	#434884 fullcalendar-event-1 #5C62B2 fullcalendar-event-2 #6D73CB fullcalendar-event-3 #848CF0 fullcalendar-event-4


  You can use the color palette to colorize your texts. 
    i.e <span class="text-red">text in red</span> will produce an span in #EA3434 color.
  additionally can use the palette as background colors. 
    i.e <div class="bg-red">text in red</div> will produce an div in #EA3434 color.
  Controll the opacity of the colors by using the slash modifier. 
    i.e <span class="text-red/50">text in red</span> will produce an span in #EA3434 color with 50% opacity."

For more information about how to use the color palette, please refer to the customizing colors section of the Tailwind documentation.
Also please check out the text color and background color sections of the Tailwind documentation.

Calendar


  Sips and Bits offers a fullcalendar customized theme.
  Please refer to the fullcalendar documentation for the specifics of the implementation.

For more information about how to use the calendar, please refer to the fullcalendar documentation.

Menus


  <div class="menu sidebar">
    <div class="mb-10">
      <img class="logo" src="..." alt="logo michelada">
    </div>
  
    <div class="w-full mb-10">
      <ul>
        <li class="active">
          <svg ...> </svg> <span>link01</span>
        </li>
        <li>
          <svg ...> </svg> <span>link con nombre largo</span>
        </li>
        ...
        <li>
          <svg ...> </svg> <span>link04</span>
        </li>
      </ul>
    </div>
  
    <div class="toggle-menu">
      <svg class="expand" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M9.49491 12.6479L5.35714 16.7857L6.82688 18.1709C7.50188 18.8459 7.02384 20 6.06929 20H1.06929C0.477545 20 0 19.5203 0 18.9286V13.9286C0 12.974 1.15192 12.496 1.82688 13.1709L3.21429 14.6429L7.35205 10.5051C7.63098 10.2262 8.08326 10.2262 8.36219 10.5051L9.49491 11.6378C9.77388 11.9167 9.77388 12.369 9.49491 12.6479V12.6479ZM10.5051 7.35205L14.6429 3.21429L13.1731 1.82906C12.4981 1.15406 12.9762 0 13.9307 0H18.9307C19.5225 0 20 0.479688 20 1.07143V6.07143C20 7.02598 18.8481 7.50402 18.1731 6.82906L16.7857 5.35714L12.6479 9.49491C12.369 9.77384 11.9167 9.77384 11.6378 9.49491L10.5051 8.36219C10.2261 8.08326 10.2261 7.63103 10.5051 7.35205V7.35205Z"
          fill="currentColor" />
      </svg>
      <svg class="compress" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M0.209196 17.6479L4.64286 13.2143L3.17313 11.8291C2.49813 11.1541 2.97616 10 3.93071 10H8.93071C9.52246 10 10 10.4797 10 11.0714V16.0714C10 17.026 8.84808 17.504 8.17313 16.8291L6.78571 15.3571L2.35205 19.7908C2.07313 20.0697 1.62085 20.0697 1.34192 19.7908L0.209196 18.6581C-0.0697322 18.3792 -0.0697322 17.9269 0.209196 17.6479V17.6479ZM19.7908 2.35205L15.3571 6.78571L16.8269 8.17094C17.5019 8.84594 17.0238 10 16.0693 10H11.0693C10.4775 10 10 9.52031 10 8.92857V3.92857C10 2.97402 11.1519 2.49598 11.8269 3.17094L13.2143 4.64286L17.6479 0.209196C17.9269 -0.0697322 18.3792 -0.0697322 18.6581 0.209196L19.7908 1.34192C20.0697 1.62085 20.0697 2.07312 19.7908 2.35205V2.35205Z"
          fill="currentColor" />
      </svg>
    </div>
  </div>

Tabs

Tab 1 Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1Tab 1

Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2 Tab2

Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3 Tab3


    <section class="mt-10" data-controller="tabs" id="tabs">
      <ul class="nav nav-tabs" data-action="click->tabs#handleTab">
        <li class="nav-item" data-tabs-target="tab">
          <a href="#" class="pointer-events-none">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">... </svg>
            <span>Tab 1</span>
          </a> 
        </li>
        <li class="nav-item" data-tabs-target="tab">
          <a href="#" class="pointer-events-none">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">... </svg>
            <span>Tab 2</span>
          </a> 
        </li>
        <li class="nav-item" data-tabs-target="tab">
          <a href="#" class="pointer-events-none">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">... </svg>
            <span>Tab 3</span>
          </a> 
        </li>
      </ul>
      <section class="tab-contents">
        <article class="content" data-tabs-target="content">Tab 1 Content Tab 2 Content </article>
        <article class="content" data-tabs-target="content">Tab 2 Content Tab 2 Content </article>
        <article class="content" data-tabs-target="content">Tab 3 Content Ta 3 Content </article>
      </section>
    </section>

Sidebar - mobile


    <div class="relative bg-white h-full">
      <div class="sidebar-mobile block">
        <div class="flex items-center justify-between pt-5 px-5">
          <div>
            <img class="h-8 w-auto" src="assets/img/logo-mobile.svg" alt="ctrl^">
          </div>
          <div class="flex">
            <div class="mr-4">
              <button type="button" class="btn-sb-header">
                <span class="text-white">(0)</span>
                <img class="ml-2" src="assets/img/bell.svg" alt="Notificaciones">
              </button>
            </div>
            <div class="-mr-2 self-center">
              <button type="button" class="btn-sb-header">
                <span class="sr-only">Close menu</span>
                <img class="" src="assets/img/x-gray.svg" alt="Cerrar">
              </button>
            </div>
          </div>
        </div>
        <div data-section="1" class="menu-items">
          <nav class="items">
            <a href="#" class="item slide-next is-selected">
              <img class="selected-icon" src="assets/img/icon-heart.svg" alt="link01">
              <span class="ml-3 text-base">
                link01
              </span>
            </a>
            <a href="#" class="item">
              <img class="" src="assets/img/icon-users.svg" alt="link02">
              <span class="ml-3 text-base">
                link02
              </span>
            </a>
            ...
  
          </nav>
        </div>
      </div>
    </div>

Headers

Basic Header


  <header class="page-header">
    <div class="content-wrapper">
      <section class="content">
        <h1>Header title example</h1>
        <p>Header description example</p>
      </section>
    </div>
  </header>

Header with buttons


  <header class="page-header">
    <div class="content-wrapper">
      <section class="content">
        <h1>Header title example</h1>
        <p>Header description example</p>
      </section>
    </header>
    <aside>
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      ...
      </svg>
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      ...
      </svg>
    </aside>
  </div>
</header>

Header with search bar


<header class="page-header">
  <div class="content-wrapper">
    <section class="content">
      <h1>Header title example</h1>
      <p>Header description example</p>
    </section>
    <aside>
      <div class="input-icon">
        <input type='text' id='full-name' placeholder="Search your name" />
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 icon" fill="none" viewBox="0 0 24 24"
          stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>
    </aside>
  </div>
</header>

Buttons

Primary

Text Sample


  <button class='btn primary'>Text Sample</button>
  <button class='btn primary' disabled>Text</button>

Primary outline


  <button class='btn outline-primary'>Text Sample</button>
  <button class='btn outline-primary' disabled>Text</button>

Secondary


<button class='btn secondary'>Text Sample</button>
<button class='btn secondary' disabled>Text</button>

Secondary outline


<button class='btn outline-secondary'>Text Sample</button>
<button class='btn outline-secondary' disabled>Text</button>

Text buttons


<button class='btn text'>Text Button</button>
<button class='btn text' disabled>Text</button>

Note: Buttons are full-width on mobile & tablet.

Forms

Full Name

Disabled field

Valid field

Invalid field


  <div>
    <label for='full-name'>Full Name</label>
    <input type='text' id='full-name' placeholder="Enter your name" />
  </div>
  <div>
    <label for='full-name'>Disabled field</label>
    <input type='text' id='full-name' placeholder="Enter your name" disabled value="Disabled value" />
  </div>
  <div>
    <label for='full-name'>Valid field</label>
    <input type='text' id='full-name' class="valid" placeholder="Enter your name" value="Valid value" />
  </div>
  <div>
    <label for='full-name'>Invalid field</label>
    <input type='text' id='full-name' class="invalid" placeholder="Enter your name" />
  </div>

Field with icon


  <div class="input-icon">
    <input type='text' id='full-name' placeholder="Search your name" />
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 icon" fill="none" viewBox="0 0 24 24"
      stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
  </div>

Select


  <div>
    <label for=''>Select</label>
    <select>
      <option>Corporate event</option>
      <option>Wedding</option>
      <option>Birthday</option>
      <option>Other</option>
    </select>
  </div>

Checkboxes

Option 1

Option 2

Option 3


  <div>
    <label class="inline-flex items-center font-normal">
      <input type="checkbox" checked="">
      <span class="ml-2">Option 1</span>
    </label>
  </div>
  <div>
    <label class="inline-flex items-center font-normal">
      <input type="checkbox">
      <span class="ml-2">Option 2</span>
    </label>
  </div>
  <div>
    <label class="inline-flex items-center font-normal">
      <input type="checkbox">
      <span class="ml-2">Option 3</span>
    </label>
  </div>

Radio Buttons

Option 1

Option 2

Option 3


  <div>
    <label class="inline-flex items-center font-normal">
      <input type="radio" checked="" name="radio-direct" value="1">
      <span class="ml-2">Option 1</span>
    </label>
  </div>
  <div>
    <label class="inline-flex items-center font-normal">
      <input type="radio" name="radio-direct" value="2">
      <span class="ml-2">Option 2</span>
    </label>
  </div>
  <div>
    <label class="inline-flex items-center font-normal">
      <input type="radio" name="radio-direct" value="3">
      <span class="ml-2">Option 3</span>
    </label>
  </div>

Alerts

Message info ipsum dolor sit amet


  <div class="block mt-4 ">
    <div class="alert info">
      <span class="message">Message info ipsum dolor sit amet</span>
      <button class="btn-close">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
          stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

Message error ipsum dolor sit amet

Message success ipsum dolor sit amet

Message warning iipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit amipsum dolor sit ampsum dolor sit amet


  error | success | warning
  
  <div class="alert warning">
    <span class="left-icon">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd"
          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
          clip-rule="evenodd" />
      </svg>
    </span>
    <span class="message">Message warning ipsum dolor sit amet</span>
    <button class="btn-close">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

Large error message ipsum dolor sit amet, consectetur

Short success msg

Super large warning message ipsum dolor sit amet, consectetur adipiscing elit ipsum dolor sit amet, consectetur adipiscing elit


  error | success | warning
  
  <div class="alert warning">
    <span class="message">Super large warning message ipsum dolor sit amet, consectetur adipiscing elit ipsum
      dolor sit amet, consectetur adipiscing elit</span>
    <button class="btn-close">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

Message info w/ image ipsum dolor sit amet


  error | success | warning
  
  <div class="alert info">
    <div class="image"><img src="assets/img/img-none.png" alt="Blank image" /></div>
    <span class="message">Message info w/ image ipsum dolor sit amet</span>
    <button class="btn-close">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

Tables

Titulo 01	Titulo 02	Titulo 03	Titulo 04	Titulo 05
Sección colapsable focus
Info 01_1 Info 01_2	Info 02	Info 03	Info 04	123456789
Info 01_hover Info 01_2	Info 02	Info 03	Info 04	123456789
Info 01_1 Info 01_2	Info 02	Info 03	Info 04	123456789
Sección colapsable 02
Sección colapsable 03


  <table class="w-full table-fixed">
    <thead>
      <tr>
        <th class=" text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 01</th>
        ...
        <th class=" text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 05</th>
      </tr>
    </thead>
    <tr class="w-full bg-blue-dark text-white ">
      <td colspan="4" class="text-white py-4 pl-4">
        Sección colapsable focus
      </td>
      <td class="flex justify-end items-center h-14">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4" fill="none" viewBox="0 0 24 24"
          stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
        </svg>
      </td>
    </tr>
    <tr class="border-b-2 border-light-gray">
      <td class="font-bold pl-4 py-4 flex flex-col">
        <span class="w-full">
          Info 01_1
        </span>
        <span class="font-normal w-full">
          Info 01_2
        </span>
      </td>
      <td class="pl-4 py-4 font-bold">Info 02</td>
      <td class="pl-4 py-4">
        <a href='http://www.michelada.io' class="underline">Info 03</a>
      </td>
      <td class="pl-4 py-4 italic">Info 04</td>
      <td class="pl-4 py-4 ">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
          fill="currentColor">
          <path fill-rule="evenodd"
            d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
            clip-rule="evenodd" />
        </svg>
        123456789
      </td>
    </tr>
    <tr class="bg-white-ish border-b-2 border-light-gray">
      <td class="pl-4 py-4 font-bold flex flex-col">
        Info 01_hover
        <span class="font-normal">
          Info 01_2
        </span>
      </td>
      <td class="pl-4 py-4 font-bold">Info 02</td>
      <td class="pl-4 py-4">
        <a href='http://www.michelada.io' class="underline">Info 03</a>
      </td>
      <td class="pl-4 py-4 italic">Info 04</td>
      <td class="pl-4 py-4 ">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
          fill="currentColor">
          <path fill-rule="evenodd"
            d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
            clip-rule="evenodd" />
        </svg>
        123456789
      </td>
    </tr>
    <tr class=" border-b-2 border-light-gray  w-full py-4">
      <td colspan="4" class=" pl-4 py-6 w-full text-white font-bold text-blue">
        Sección colapsable 02
      </td>
      <td class=" flex justify-end items-center h-14">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue mr-4" fill="currentColor"
          viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
      </td>
    </tr>
  </table>

Titulo 01	Titulo 02	Titulo 03	Titulo 04	Titulo 05
Info con foto_1 Info con foto_2	Info 02	Info 03	Info 04	123456789
Info con foto_1 Info con foto_2	Info 02	Info 03	Info 04	123456789


    <table class="w-full table-fixed mt-10">
      <thead>
        <tr>
          <th class="text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 01</th>
          ...
          <th class="text-left text-gray-lighter font-normal pl-4 py-4 ">Titulo 05</th>
        </tr>
      </thead>
  
      <tr class="border-b-2 border-light-gray">
        <td class="pl-4 py-4 font-bold">
          <div class=" flex items-center">
            <img class="mtd_img w-10 rounded-3xl mr-4" alt="staff at michelada" src="..." />
            <div class="flex flex-col">
              Info con foto_1
              <span class="font-normal">
                Info con foto_2
              </span>
            </div>
          </div>
        </td>
        <td class="pl-4 py-4 font-bold">Info 02</td>
        <td class="pl-4 py-4">
          <a href='http://www.michelada.io' class="underline">Info 03</a>
        </td>
        <td class="pl-4 py-4 italic">Info 04</td>
        <td class="pl-4 py-4 ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
              d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd" />
          </svg>
          123456789
        </td>
      </tr>
      ...
    </table>

Cards


    <div class="card">
      ...
    </div>

Notifications


   <dialog  class="relative card flex-col justify-around items-center w-full h-72 mt-10  md:mt-0  md:w-80 p-3 ">
        <figure class=""><img class="w-30" src="assets/img/img-none.png" alt="image"/></figure>
        <figure class="flex flex-col justify-around items-center h-20 self-center">
            <figcaption class='font-bold mt-8'>Title ipsum dolor</figcaption>
            <figcaption class='w-56 text-center py-3'>Message info w/ image ipsum dolor sit amet</figcaption>
        </figure>
        <button class="text-blue top-0">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 absolute top-3 right-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </dialog>

Table Collapsable Mobile


    <div id="tbl-collapse-mobile" class="h-full bg-white-ish">
    <table class="tbl-collapsable-mbl">
      <tr class="container-expand isSelected" data-toggle="collapse">
        <td>
          <p class="font-bold ">La Barra
            <span>6 personas</span>
          </p>
          <input id="collapsible" checked type="checkbox">
          <img alt="open" class="icon-see-less" src="assets/img/tbl-collapse-mbl/icon-less.svg" />
        </td>
      </tr>
      <tr class="expandable" data-container="barra">
        <td class="pt-0">
          <ul>
            <li class="user-profile">
              <img class="img-user" alt="user" src="assets/img/tbl-collapse-mbl/icon-user.svg" />
              <div>
                <p class="font-bold">Lilia Bustillos </p>
                <p>Directora de Recursos Humanos</p>
              </div>
              <img alt="next" class="icon-chevron-left" src="assets/img/tbl-collapse-mbl/icon-chevron-r.svg" />
            </li>
            <li>
              <img alt="slack" src="assets/img/tbl-collapse-mbl/icon-slack.svg" />
              @amado
            </li>
            <li>
              <img alt="email" src="assets/img/tbl-collapse-mbl/icon-email.svg" />
              <a href='mailto:lilia.bustillos@michelada.io'>lilia.bustillos@michelada.io</a>
            </li>
            <li>
              <img alt="phone" src="assets/img/tbl-collapse-mbl/icon-phone.svg" />
              <a href='tel:312 123 1234'>312 123 1234</a>
            </li>
            <li>
              <img alt="location" src="assets/img/tbl-collapse-mbl/icon-location.svg" />
              Gdl.
            </li>
          </ul>
        </td>

      </tr>
      ...

      <tr class="container-expand" data-toggle="collapse">
        <td>
          <p class="font-bold text-blue">Development
            <span>50 personas</span>
          </p>
          <input id="collapsible" checked class="toggle" type="checkbox">
          <img alt="open" class="icon-plus" src="assets/img/tbl-collapse-mbl/icon-plus.svg" />
        </td>
      </tr>
    </table  >
  </div>

NavBar


        <header class="bg-dark">
          <nav class="navbar" data-controller="header">
            <a href="#" class="brand">
              <img src="assets/img/logo.svg">
            </a>
            <section class="close-toggle" data-action="click->header#toggleMenu">
              <div class="action-wrapper">
                <svg data-header-target="close" xmlns="http://www.w3.org/2000/svg" width="32" class="h-8 w-8 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
                <img data-header-target="avatar" src="assets/img/avatar.png" alt="E" class="avatar"/>
              </div>
            </section>
            <section class="nav-links" data-header-target="menu">
              <ul>
                <li>
                  <a href="#" class="nav-link">
                    <svg xmlns="http://www.w3.org/2000/svg" width="19" class="h-6 w-6 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                    </svg>
                    <span>Configuration</span>
                  </a>
                </li>
                <li >
                  <a href="#" class="nav-link">
                    <svg xmlns="http://www.w3.org/2000/svg" width="19" class="h-6 w-6 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                    </svg>
                    <span>Experimental</span>
                  </a>
                </li>
                <li class="my-profile">
                  <a href="#" class="nav-link" data-action="click->header#toggleSubmenu">
                    <img src="assets/img/avatar.png" alt="E" class="avatar"/>
                    <span class="md:hidden">My Profile</span>
                  </a>
                  <ul class="hidden submenu" data-header-target="submenu">
                    <li>
                      <a href="#" class="nav-link">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
                        </svg> 
                        <span>Link Link Link</span>
                      </a>
                    </li>
                    <li>
                      <a href="#" class="nav-link">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <span>Link</span>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </section>
          </nav>
        </header>

Typography

H1 ITC Avant Garde Gothic - Bold 39px

H2 ITC Avant Garde Gothic - Bold 31px

H3 ITC Avant Garde Gothic - Bold 25px

H4 ITC Avant Garde Gothic - Bold 20px

Lists

Simple list

with title / subtitle

Color palette

Calendar

Menus

Tabs

Sidebar - mobile

Headers

Basic Header

Header title example

Header with buttons

Header title example

Header with search bar

Header title example

Buttons

Primary

Primary outline

Secondary

Secondary outline

Text buttons

Utils

Stretched link

Forms

Alerts

Tables

Cards

Notifications

Table Collapsable Mobile

NavBar