Tailwind CSS Components

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="mx-auto pt-5 pb-16 px-6 bg-white rounded">
      <h3 class="text-xl font-bold mb-12">Subscriptions monitoring</h3>
      <div class="chart mb-10" data-type="donut"></div>
      <div class="flex items-center mb-3">
        <div class="flex items-center">
          <span class="mr-2">
            <svg class="text-blue-500" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.4" d="M8 16C12.4183 16 16 12.4183 16 8H8V16Z" fill="currentColor"></path>
              <path d="M0 8C0 12.4183 3.58172 16 8 16V0C3.58172 0 0 3.58172 0 8Z" fill="currentColor"></path>
            </svg>
          </span>
          <span class="text-xs text-gray-500">Yearly</span>
        </div>
        <div class="ml-auto">
          <span class="text-xs">$65.450</span>
        </div>
      </div>
      <div class="flex items-center mb-3">
        <div class="flex items-center">
          <span class="mr-2">
            <svg class="text-indigo-500" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.4" d="M8 16C12.4183 16 16 12.4183 16 8H8V16Z" fill="currentColor"></path>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-indigo-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM11 14C11 14.6 10.6 15 10 15C9.4 15 9 14.6 9 14V10C9 9.4 9.4 9 10 9C10.6 9 11 9.4 11 10V14ZM10 7C9.4 7 9 6.6 9 6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6C11 6.6 10.6 7 10 7Z" fill="#382CDD"></path>
        </svg>
      </span>
      <h3 class="text-indigo-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-indigo-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-gray-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 0C3.6 0 0 3.6 0 8C0 13.4 7 19.5 7.3 19.8C7.7 20.1 8.2 20.1 8.6 19.8C9 19.5 16 13.4 16 8C16 3.6 12.4 0 8 0ZM8 12C5.8 12 4 10.2 4 8C4 5.8 5.8 4 8 4C10.2 4 12 5.8 12 8C12 10.2 10.2 12 8 12Z" fill="#67798E"></path>
        </svg>
      </span>
      <h3 class="text-gray-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-gray-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-orange-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22.7 15.5001L14.6 1.50011C13.8 0.100109 11.9 -0.399891 10.5 0.400109C10 0.700109 9.60001 1.10011 9.40001 1.50011L1.30001 15.5001C0.500011 16.9001 1.00001 18.8001 2.40001 19.6001C2.90001 19.9001 3.40001 20.0001 3.90001 20.0001H20C21.7 20.0001 23 18.6001 23 17.0001C23.1 16.4001 22.9 15.9001 22.7 15.5001ZM12 16.0001C11.4 16.0001 11 15.6001 11 15.0001C11 14.4001 11.4 14.0001 12 14.0001C12.6 14.0001 13 14.4001 13 15.0001C13 15.6001 12.6 16.0001 12 16.0001ZM13 11.0001C13 11.6001 12.6 12.0001 12 12.0001C11.4 12.0001 11 11.6001 11 11.0001V7.00011C11 6.40011 11.4 6.00011 12 6.00011C12.6 6.00011 13 6.40011 13 7.00011V11.0001Z" fill="#F67A28"></path>
        </svg>
      </span>
      <h3 class="text-orange-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-orange-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-green-500 rounded-r-lg">
    <div class="flex items-center">
      <span class="inline-block mr-2">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM14.2 8.3L9.4 13.1C9 13.5 8.4 13.5 8 13.1L5.8 10.9C5.4 10.5 5.4 9.9 5.8 9.5C6.2 9.1 6.8 9.1 7.2 9.5L8.7 11L12.8 6.9C13.2 6.5 13.8 6.5 14.2 6.9C14.6 7.3 14.6 7.9 14.2 8.3Z" fill="#17BB84"></path>
        </svg>
      </span>
      <h3 class="text-green-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-green-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="relative p-6 bg-white shadow rounded">
      <button class="absolute top-0 right-0 mt-7 mr-6 focus:outline-none">
        <svg class="h-3 w-3 text-gray-200" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 0.666656C5.26667 0.666656 4.66667 1.26666 4.66667 1.99999C4.66667 2.73332 5.26667 3.33332 6 3.33332C6.73333 3.33332 7.33333 2.73332 7.33333 1.99999C7.33333 1.26666 6.73333 0.666656 6 0.666656ZM1.33333 0.666656C0.6 0.666656 0 1.26666 0 1.99999C0 2.73332 0.6 3.33332 1.33333 3.33332C2.06667 3.33332 2.66667 2.73332 2.66667 1.99999C2.66667 1.26666 2.06667 0.666656 1.33333 0.666656ZM10.6667 0.666656C9.93333 0.666656 9.33333 1.26666 9.33333 1.99999C9.33333 2.73332 9.93333 3.33332 10.6667 3.33332C11.4 3.33332 12 2.73332 12 1.99999C12 1.26666 11.4 0.666656 10.6667 0.666656Z" fill="currentColor"></path>
        </svg>
      </button>
      <img class="w-20 h-20 p-1 mb-4 mx-auto rounded-full object-cover border border-indigo-50" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4MTQwNjI0Nw&amp;ixlib=rb-4.0.3&amp;q=80&amp;utm_campaign=api-credit&amp;utm_medium=referral&amp;utm_source=unsplash_source&amp;w=1080" alt="">
      <h3 class="text-center font-medium">Jane Grant</h3>
      <p class="mb-6 text-center text-sm text-gray-500">Marketing Manager</p>
      <p class="mb-6 text-xs">She has worked with major companies for years. She has won numerous awards. She runs her website and is willing to support the marketing activities of any company.</p>
      <p class="flex items-center mb-4 text-sm">
        <span class="inline-block mr-2">
          <svg class="h-4 w-4 text-indigo-500" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.8332 3.41668H12.3332V2.58334C12.3332 1.9203 12.0698 1.28442 11.6009 0.815577C11.1321 0.346736 10.4962 0.0833435 9.83317 0.0833435H8.1665C7.50346 0.0833435 6.86758 0.346736 6.39874 0.815577C5.9299 1.28442 5.6665 1.9203 5.6665 2.58334V3.41668H3.1665C2.50346 3.41668 1.86758 3.68007 1.39874 4.14891C0.929896 4.61775 0.666504 5.25363 0.666504 5.91668V13.4167C0.666504 14.0797 0.929896 14.7156 1.39874 15.1844C1.86758 15.6533 2.50346 15.9167 3.1665 15.9167H14.8332C15.4962 15.9167 16.1321 15.6533 16.6009 15.1844C17.0698 14.7156 17.3332 14.0797 17.3332 13.4167V5.91668C17.3332 5.25363 17.0698 4.61775 16.6009 4.14891C16.1321 3.68007 15.4962 3.41668 14.8332 3.41668ZM7.33317 2.58334C7.33317 2.36233 7.42097 2.15037 7.57725 1.99409C7.73353 1.83781 7.94549 1.75001 8.1665 1.75001H9.83317C10.0542 1.75001 10.2661 1.83781 10.4224 1.99409C10.5787 2.15037 10.6665 2.36233 10.6665 2.58334V3.41668H7.33317V2.58334ZM15.6665 13.4167C15.6665 13.6377 15.5787 13.8497 15.4224 14.0059C15.2661 14.1622 15.0542 14.25 14.8332 14.25H3.1665C2.94549 14.25 2.73353 14.1622 2.57725 14.0059C2.42097 13.8497 2.33317 13.6377 2.33317 13.4167V9.20834H4.83317V10.0833C4.83317 10.3044 4.92097 10.5163 5.07725 10.6726C5.23353 10.8289 5.44549 10.9167 5.6665 10.9167C5.88752 10.9167 6.09948 10.8289 6.25576 10.6726C6.41204 10.5163 6.49984 10.3044 6.49984 10.0833V9.20834H11.4998V10.0833C11.4998 10.3044 11.5876 10.5163 11.7439 10.6726C11.9002 10.8289 12.1122 10.9167 12.3332 10.9167C12.5542 10.9167 12.7661 10.8289 12.9224 10.6726C13.0787 10.5163 13.1665 10.3044 13.1665 10.0833V9.20834H15.6665V13.4167ZM15.6665 7.58334H2.33317V5.91668C2.33317 5.69566 2.42097 5.4837 2.57725 5.32742C2.73353 5.17114 2.94549 5.08334 3.1665 5.08334H14.8332C15.0542 5.08334 15.2661 5.17114 15.4224 5.32742C15.5787 5.4837 15.6665 5.69566 15.6665 5.91668V7.58334Z" fill="currentColor"></path>
          </svg>
        </span>
        <span>Shuffle</span>
      </p>
      <p class="flex items-center mb-4 text-sm">
        <span class="inline-block mr-2">
          <svg class="h-4 w-4 text-indigo-500" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.6413 9.65834C10.5396 9.61785 10.4308 9.5978 10.3213 9.59934C10.2118 9.60088 10.1036 9.62397 10.003 9.66731C9.90243 9.71064 9.81135 9.77337 9.73499 9.8519C9.65864 9.93043 9.5985 10.0232 9.55801 10.125C9.51752 10.2268 9.49747 10.3355 9.49901 10.4451C9.50054 10.5546 9.52364 10.6627 9.56697 10.7633C9.61031 10.8639 9.67303 10.955 9.75156 11.0314C9.8301 11.1077 9.9229 11.1678 10.0247 11.2083C11.2413 11.6917 11.9997 12.4417 11.9997 13.1667C11.9997 14.35 9.94967 15.6667 6.99967 15.6667C4.04967 15.6667 1.99967 14.35 1.99967 13.1667C1.99967 12.4417 2.75801 11.6917 3.97467 11.2083C4.18022 11.1266 4.34486 10.9665 4.43237 10.7633C4.51989 10.5602 4.52312 10.3305 4.44134 10.125C4.35957 9.91946 4.19949 9.75482 3.99632 9.66731C3.79316 9.57979 3.56355 9.57656 3.35801 9.65834C1.46634 10.4083 0.333008 11.7167 0.333008 13.1667C0.333008 15.5 3.25801 17.3333 6.99967 17.3333C10.7413 17.3333 13.6663 15.5 13.6663 13.1667C13.6663 11.7167 12.533 10.4083 10.6413 9.65834ZM6.16634 7.21667V13.1667C6.16634 13.3877 6.25414 13.5996 6.41042 13.7559C6.5667 13.9122 6.77866 14 6.99967 14C7.22069 14 7.43265 13.9122 7.58893 13.7559C7.74521 13.5996 7.83301 13.3877 7.83301 13.1667V7.21667C8.61856 7.01384 9.30316 6.53148 9.75851 5.86C10.2139 5.18852 10.4087 4.37402 10.3064 3.56917C10.2042 2.76433 9.81196 2.0244 9.2032 1.48807C8.59445 0.951747 7.81098 0.655853 6.99967 0.655853C6.18836 0.655853 5.4049 0.951747 4.79615 1.48807C4.18739 2.0244 3.79514 2.76433 3.69291 3.56917C3.59068 4.37402 3.7855 5.18852 4.24084 5.86C4.69618 6.53148 5.38079 7.01384 6.16634 7.21667ZM6.99967 2.33334C7.32931 2.33334 7.65154 2.43109 7.92562 2.61422C8.19971 2.79736 8.41333 3.05766 8.53947 3.3622C8.66562 3.66674 8.69862 4.00185 8.63432 4.32516C8.57001 4.64846 8.41127 4.94543 8.17818 5.17852C7.9451 5.41161 7.64813 5.57034 7.32482 5.63465C7.00152 5.69896 6.66641 5.66595 6.36187 5.53981C6.05732 5.41366 5.79703 5.20004 5.61389 4.92596C5.43076 4.65187 5.33301 4.32964 5.33301 4.00001C5.33301 3.55798 5.5086 3.13406 5.82116 2.82149C6.13372 2.50893 6.55765 2.33334 6.99967 2.33334Z" fill="currentColor"></path>

<section class="py-8" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="pt-4 bg-white shadow rounded">
        <div class="px-6 border-b border-blue-50">
          <div class="flex flex-wrap items-center mb-4">
            <div>
              <h3 class="text-xl font-bold">Project Progress Data</h3>
              <p class="text-sm text-gray-500 font-medium">List of recent contracts and freelancers</p>
            </div>
            <a class="ml-auto flex items-center py-2 px-3 text-xs text-white bg-indigo-500 hover:bg-indigo-600 rounded" href="#">
              <span class="mr-1">
                <svg class="h-3 w-3 text-indigo-300" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13 8.33337C12.6 8.33337 12.3333 8.60004 12.3333 9.00004V11.6667C12.3333 12.0667 12.0666 12.3334 11.6666 12.3334H2.33331C1.93331 12.3334 1.66665 12.0667 1.66665 11.6667V9.00004C1.66665 8.60004 1.39998 8.33337 0.99998 8.33337C0.59998 8.33337 0.333313 8.60004 0.333313 9.00004V11.6667C0.333313 12.8 1.19998 13.6667 2.33331 13.6667H11.6666C12.8 13.6667 13.6666 12.8 13.6666 11.6667V9.00004C13.6666 8.60004 13.4 8.33337 13 8.33337ZM4.79998 4.13337L6.33331 2.60004V9.00004C6.33331 9.40004 6.59998 9.66671 6.99998 9.66671C7.39998 9.66671 7.66665 9.40004 7.66665 9.00004V2.60004L9.19998 4.13337C9.46665 4.40004 9.86665 4.40004 10.1333 4.13337C10.4 3.86671 10.4 3.46671 10.1333 3.20004L7.46665 0.533374C7.19998 0.266707 6.79998 0.266707 6.53331 0.533374L3.86665 3.20004C3.59998 3.46671 3.59998 3.86671 3.86665 4.13337C4.13331 4.40004 4.53331 4.40004 4.79998 4.13337Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Report</span>
            </a>
          </div>
          <div>
            <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{'text-indigo-500 border-indigo-500': tab == $refs.tab1.textContent, 'text-gray-500 border-transparent': tab != $refs.tab1.textContent }" class="inline-block px-4 pb-2 text-sm font-medium border-b-2 text-indigo-500 border-indigo-500" href="#">Progress</a>
            <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{'text-indigo-500 border-indigo-500': tab == $refs.tab2.textContent, 'text-gray-500 border-transparent': tab != $refs.tab2.textContent }" class="inline-block px-4 pb-2 text-sm font-medium text-gray-500 border-b-2 border-transparent" href="#">Completed</a>
            <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{'text-indigo-500 border-indigo-500': tab == $refs.tab3.textContent, 'text-gray-500 border-transparent': tab != $refs.tab3.textContent }" class="inline-block px-4 pb-2 text-sm font-medium text-gray-500 border-b-2 border-transparent" href="#">Invoices</a>
          </div>
        </div>

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded shadow">
          <span>
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.9998 0.666656C12.2489 0.666656 10.5151 1.01153 8.89738 1.6816C7.2797 2.35166 5.80985 3.33379 4.57173 4.5719C2.07125 7.07238 0.666488 10.4638 0.666488 14C0.654832 17.0788 1.72088 20.0647 3.67982 22.44L1.01315 25.1067C0.828145 25.2942 0.702816 25.5323 0.652984 25.7909C0.603152 26.0496 0.631049 26.3172 0.733155 26.56C0.843899 26.7999 1.02343 27.0015 1.24895 27.1392C1.47447 27.2769 1.73582 27.3444 1.99982 27.3333H13.9998C17.536 27.3333 20.9274 25.9286 23.4279 23.4281C25.9284 20.9276 27.3332 17.5362 27.3332 14C27.3332 10.4638 25.9284 7.07238 23.4279 4.5719C20.9274 2.07141 17.536 0.666656 13.9998 0.666656V0.666656ZM13.9998 24.6667H5.21316L6.45316 23.4267C6.70149 23.1768 6.84088 22.8389 6.84088 22.4867C6.84088 22.1344 6.70149 21.7965 6.45316 21.5467C4.70727 19.8027 3.62005 17.5074 3.37674 15.0517C3.13343 12.5961 3.74908 10.132 5.11879 8.07935C6.4885 6.02671 8.52754 4.51247 10.8885 3.79462C13.2495 3.07677 15.7863 3.19973 18.0668 4.14254C20.3473 5.08535 22.2303 6.78969 23.3951 8.96518C24.5599 11.1407 24.9343 13.6527 24.4547 16.0733C23.975 18.494 22.6709 20.6734 20.7645 22.2403C18.8582 23.8072 16.4675 24.6647 13.9998 24.6667V24.6667ZM20.6665 12.6667H7.33316C6.97953 12.6667 6.6404 12.8071 6.39035 13.0572C6.1403 13.3072 5.99982 13.6464 5.99982 14C5.99982 14.3536 6.1403 14.6928 6.39035 14.9428C6.6404 15.1928 6.97953 15.3333 7.33316 15.3333H20.6665C21.0201 15.3333 21.3593 15.1928 21.6093 14.9428C21.8593 14.6928 21.9998 14.3536 21.9998 14C21.9998 13.6464 21.8593 13.3072 21.6093 13.0572C21.3593 12.8071 21.0201 12.6667 20.6665 12.6667ZM17.9998 18H9.99982C9.6462 18 9.30706 18.1405 9.05701 18.3905C8.80697 18.6406 8.66649 18.9797 8.66649 19.3333C8.66649 19.6869 8.80697 20.0261 9.05701 20.2761C9.30706 20.5262 9.6462 20.6667 9.99982 20.6667H17.9998C18.3534 20.6667 18.6926 20.5262 18.9426 20.2761C19.1927 20.0261 19.3332 19.6869 19.3332 19.3333C19.3332 18.9797 19.1927 18.6406 18.9426 18.3905C18.6926 18.1405 18.3534 18 17.9998 18ZM9.99982 9.99999H17.9998C18.3534 9.99999 18.6926 9.85951 18.9426 9.60947C19.1927 9.35942 19.3332 9.02028 19.3332 8.66666C19.3332 8.31303 19.1927 7.9739 18.9426 7.72385C18.6926 7.4738 18.3534 7.33332 17.9998 7.33332H9.99982C9.6462 7.33332 9.30706 7.4738 9.05701 7.72385C8.80697 7.9739 8.66649 8.31303 8.66649 8.66666C8.66649 9.02028 8.80697 9.35942 9.05701 9.60947C9.30706 9.85951 9.6462 9.99999 9.99982 9.99999V9.99999Z" fill="#8128DE"></path>
            </svg>
          </span>
          <h3 class="mt-3 mb-1 text-3xl font-bold">1 450</h3>
          <p class="text-sm text-gray-600 font-medium">Responses</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
        <div class="p-6 bg-white rounded shadow">
          <span>
            <svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.3332 5.66668H19.3332V4.33334C19.3332 3.27248 18.9117 2.25506 18.1616 1.50492C17.4115 0.754771 16.394 0.333344 15.3332 0.333344H12.6665C11.6056 0.333344 10.5882 0.754771 9.83808 1.50492C9.08793 2.25506 8.6665 3.27248 8.6665 4.33334V5.66668H4.6665C3.60564 5.66668 2.58822 6.0881 1.83808 6.83825C1.08793 7.58839 0.666504 8.60581 0.666504 9.66668V21.6667C0.666504 22.7275 1.08793 23.745 1.83808 24.4951C2.58822 25.2452 3.60564 25.6667 4.6665 25.6667H23.3332C24.394 25.6667 25.4115 25.2452 26.1616 24.4951C26.9117 23.745 27.3332 22.7275 27.3332 21.6667V9.66668C27.3332 8.60581 26.9117 7.58839 26.1616 6.83825C25.4115 6.0881 24.394 5.66668 23.3332 5.66668ZM11.3332 4.33334C11.3332 3.97972 11.4736 3.64058 11.7237 3.39053C11.9737 3.14049 12.3129 3.00001 12.6665 3.00001H15.3332C15.6868 3.00001 16.0259 3.14049 16.276 3.39053C16.526 3.64058 16.6665 3.97972 16.6665 4.33334V5.66668H11.3332V4.33334ZM24.6665 21.6667C24.6665 22.0203 24.526 22.3594 24.276 22.6095C24.0259 22.8595 23.6868 23 23.3332 23H4.6665C4.31288 23 3.97374 22.8595 3.7237 22.6095C3.47365 22.3594 3.33317 22.0203 3.33317 21.6667V14.3333C4.63376 14.8492 5.97075 15.2681 7.33317 15.5867V16.3733C7.33317 16.727 7.47365 17.0661 7.7237 17.3161C7.97374 17.5662 8.31288 17.7067 8.6665 17.7067C9.02013 17.7067 9.35927 17.5662 9.60931 17.3161C9.85936 17.0661 9.99984 16.727 9.99984 16.3733V16.0933C11.3256 16.2738 12.6618 16.3674 13.9998 16.3733C15.3379 16.3674 16.674 16.2738 17.9998 16.0933V16.3733C17.9998 16.727 18.1403 17.0661 18.3904 17.3161C18.6404 17.5662 18.9796 17.7067 19.3332 17.7067C19.6868 17.7067 20.0259 17.5662 20.276 17.3161C20.526 17.0661 20.6665 16.727 20.6665 16.3733V15.5867C22.0289 15.2681 23.3659 14.8492 24.6665 14.3333V21.6667ZM24.6665 11.4133C23.3697 11.9607 22.0323 12.4065 20.6665 12.7467V12.3333C20.6665 11.9797 20.526 11.6406 20.276 11.3905C20.0259 11.1405 19.6868 11 19.3332 11C18.9796 11 18.6404 11.1405 18.3904 11.3905C18.1403 11.6406 17.9998 11.9797 17.9998 12.3333V13.32C15.3482 13.7201 12.6515 13.7201 9.99984 13.32V12.3333C9.99984 11.9797 9.85936 11.6406 9.60931 11.3905C9.35927 11.1405 9.02013 11 8.6665 11C8.31288 11 7.97374 11.1405 7.7237 11.3905C7.47365 11.6406 7.33317 11.9797 7.33317 12.3333V12.7733C5.96733 12.4331 4.62998 11.9873 3.33317 11.44V9.66668C3.33317 9.31305 3.47365 8.97392 3.7237 8.72387C3.97374 8.47382 4.31288 8.33334 4.6665 8.33334H23.3332C23.6868 8.33334 24.0259 8.47382 24.276 8.72387C24.526 8.97392 24.6665 9.31305 24.6665 9.66668V11.4133Z" fill="#17BB84"></path>
            </svg>
          </span>
          <h3 class="mt-3 mb-1 text-3xl font-bold">54</h3>
          <p class="text-sm text-gray-600 font-medium">Projects</p>
        </div>

<section class="bg-gray-50 py-8 px-4">
  <table class="table-auto w-full bg-white shadow rounded">
    <thead class="border-b border-gray-100">
      <tr>
        <th class="pl-6 py-6">
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Name</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.85956 7.52666L4.99956 10.3933L2.13956 7.52666C2.01403 7.40113 1.84376 7.3306 1.66623 7.3306C1.48869 7.3306 1.31843 7.40113 1.1929 7.52666C1.06736 7.6522 0.996835 7.82246 0.996835 8C0.996835 8.17753 1.06736 8.34779 1.1929 8.47333L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17235 12.0005 5.34132 11.9308 5.46623 11.8067L8.79956 8.47333C8.86172 8.41117 8.91103 8.33738 8.94467 8.25616C8.97831 8.17495 8.99562 8.0879 8.99562 8C8.99562 7.91209 8.97831 7.82504 8.94467 7.74383C8.91103 7.66262 8.86172 7.58882 8.79956 7.52666C8.7374 7.4645 8.66361 7.4152 8.5824 7.38156C8.50118 7.34792 8.41414 7.3306 8.32623 7.3306C8.23832 7.3306 8.15128 7.34792 8.07006 7.38156C7.98885 7.4152 7.91506 7.4645 7.8529 7.52666H7.85956ZM2.13956 4.47333L4.99956 1.60666L7.85956 4.47333C7.98447 4.5975 8.15344 4.66719 8.32956 4.66719C8.50569 4.66719 8.67465 4.5975 8.79956 4.47333C8.92373 4.34842 8.99342 4.17945 8.99342 4.00333C8.99342 3.82721 8.92373 3.65824 8.79956 3.53333L5.46623 0.199997C5.40425 0.137511 5.33052 0.0879151 5.24928 0.0540694C5.16804 0.0202236 5.0809 0.00279808 4.9929 0.00279808C4.90489 0.00279808 4.81775 0.0202236 4.73651 0.0540694C4.65527 0.0879151 4.58154 0.137511 4.51956 0.199997L1.18623 3.53333C1.06158 3.65975 0.992251 3.83051 0.993501 4.00804C0.994751 4.18558 1.06648 4.35534 1.1929 4.48C1.31932 4.60465 1.49008 4.67397 1.66761 4.67272C1.84514 4.67147 2.01491 4.59975 2.13956 4.47333Z" fill="#67798E"></path>
            </svg>
          </a>
        </th>
        <th>
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Position</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.85956 7.52666L4.99956 10.3933L2.13956 7.52666C2.01403 7.40113 1.84376 7.3306 1.66623 7.3306C1.48869 7.3306 1.31843 7.40113 1.1929 7.52666C1.06736 7.6522 0.996835 7.82246 0.996835 8C0.996835 8.17753 1.06736 8.34779 1.1929 8.47333L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17235 12.0005 5.34132 11.9308 5.46623 11.8067L8.79956 8.47333C8.86172 8.41117 8.91103 8.33738 8.94467 8.25616C8.97831 8.17495 8.99562 8.0879 8.99562 8C8.99562 7.91209 8.97831 7.82504 8.94467 7.74383C8.91103 7.66262 8.86172 7.58882 8.79956 7.52666C8.7374 7.4645 8.66361 7.4152 8.5824 7.38156C8.50118 7.34792 8.41414 7.3306 8.32623 7.3306C8.23832 7.3306 8.15128 7.34792 8.07006 7.38156C7.98885 7.4152 7.91506 7.4645 7.8529 7.52666H7.85956ZM2.13956 4.47333L4.99956 1.60666L7.85956 4.47333C7.98447 4.5975 8.15344 4.66719 8.32956 4.66719C8.50569 4.66719 8.67465 4.5975 8.79956 4.47333C8.92373 4.34842 8.99342 4.17945 8.99342 4.00333C8.99342 3.82721 8.92373 3.65824 8.79956 3.53333L5.46623 0.199997C5.40425 0.137511 5.33052 0.0879151 5.24928 0.0540694C5.16804 0.0202236 5.0809 0.00279808 4.9929 0.00279808C4.90489 0.00279808 4.81775 0.0202236 4.73651 0.0540694C4.65527 0.0879151 4.58154 0.137511 4.51956 0.199997L1.18623 3.53333C1.06158 3.65975 0.992251 3.83051 0.993501 4.00804C0.994751 4.18558 1.06648 4.35534 1.1929 4.48C1.31932 4.60465 1.49008 4.67397 1.66761 4.67272C1.84514 4.67147 2.01491 4.59975 2.13956 4.47333Z" fill="#67798E"></path>
            </svg>
          </a>
        </th>
        <th>
          <a class="flex items-center text-xs text-gray-500" href="#">
            <p>Office</p>
            <svg class="ml-1 w-2 h-3" width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-5 px-6 bg-white shadow">
  <nav class="relative">
    <div class="flex items-center">
      <div class="flex items-center mr-auto">
        <a class="flex items-center text-sm hover:text-gray-800" href="#">
          <span class="inline-block mr-2">
            <svg class="text-indigo-500" width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6667 5.66667L9.66668 1.28333C9.20833 0.87337 8.61496 0.646723 8.00002 0.646723C7.38507 0.646723 6.7917 0.87337 6.33335 1.28333L1.33335 5.66667C1.06866 5.90339 0.857435 6.1938 0.713745 6.51854C0.570054 6.84328 0.497195 7.1949 0.500018 7.55V14.8333C0.500018 15.4964 0.76341 16.1323 1.23225 16.6011C1.70109 17.0699 2.33698 17.3333 3.00002 17.3333H13C13.6631 17.3333 14.2989 17.0699 14.7678 16.6011C15.2366 16.1323 15.5 15.4964 15.5 14.8333V7.54167C15.5017 7.18797 15.4282 6.83795 15.2846 6.51473C15.1409 6.19152 14.9303 5.90246 14.6667 5.66667V5.66667ZM9.66668 15.6667H6.33335V11.5C6.33335 11.279 6.42115 11.067 6.57743 10.9107C6.73371 10.7545 6.94567 10.6667 7.16668 10.6667H8.83335C9.05436 10.6667 9.26633 10.7545 9.42261 10.9107C9.57889 11.067 9.66668 11.279 9.66668 11.5V15.6667ZM13.8334 14.8333C13.8334 15.0543 13.7456 15.2663 13.5893 15.4226C13.433 15.5789 13.221 15.6667 13 15.6667H11.3334V11.5C11.3334 10.837 11.07 10.2011 10.6011 9.73223C10.1323 9.26339 9.49639 9 8.83335 9H7.16668C6.50364 9 5.86776 9.26339 5.39892 9.73223C4.93008 10.2011 4.66668 10.837 4.66668 11.5V15.6667H3.00002C2.779 15.6667 2.56704 15.5789 2.41076 15.4226C2.25448 15.2663 2.16668 15.0543 2.16668 14.8333V7.54167C2.16683 7.42334 2.19218 7.30641 2.24103 7.19865C2.28989 7.09088 2.36113 6.99476 2.45002 6.91667L7.45002 2.54167C7.60209 2.40807 7.79759 2.33439 8.00002 2.33439C8.20244 2.33439 8.39794 2.40807 8.55002 2.54167L13.55 6.91667C13.6389 6.99476 13.7101 7.09088 13.759 7.19865C13.8079 7.30641 13.8332 7.42334 13.8334 7.54167V14.8333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Start</span>
        </a>
        <span class="inline-block mx-3">
          <svg class="text-indigo-500" width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.23242 9.3689C1.06762 9.36887 0.906542 9.31997 0.769534 9.2284C0.632526 9.13683 0.525742 9.0067 0.462684 8.85445C0.399625 8.7022 0.383124 8.53467 0.415263 8.37304C0.447403 8.21141 0.526741 8.06294 0.643249 7.9464L3.58916 5L0.643224 2.05364C0.486959 1.89737 0.399171 1.68543 0.39917 1.46444C0.399169 1.24345 0.486957 1.03151 0.64322 0.875248C0.799483 0.718984 1.01142 0.631195 1.23241 0.631194C1.4534 0.631193 1.66534 0.718981 1.82161 0.875244L5.35676 4.41084C5.43416 4.48819 5.49556 4.58004 5.53745 4.68114C5.57934 4.78224 5.6009 4.89059 5.6009 5.00003C5.6009 5.10946 5.57934 5.21782 5.53745 5.31891C5.49556 5.42001 5.43416 5.51186 5.35676 5.58922L1.82161 9.12478C1.74432 9.20228 1.65249 9.26375 1.55137 9.30564C1.45026 9.34754 1.34186 9.36903 1.23242 9.3689Z" fill="currentColor"></path>
          </svg>
        </span>
        <a class="flex items-center text-sm hover:text-gray-800" href="#">
          <span class="inline-block mr-2">
            <svg class="text-indigo-500" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.09179 13.575C3.01254 13.4991 2.91908 13.4397 2.81679 13.4C2.6139 13.3167 2.38634 13.3167 2.18346 13.4C2.08116 13.4397 1.98771 13.4991 1.90846 13.575C1.83259 13.6543 1.77312 13.7477 1.73346 13.85C1.66964 14.0018 1.6522 14.169 1.68335 14.3307C1.71449 14.4923 1.79282 14.6411 1.90846 14.7583C1.98946 14.8319 2.08247 14.8911 2.18346 14.9333C2.28321 14.9774 2.39106 15.0002 2.50012 15.0002C2.60918 15.0002 2.71704 14.9774 2.81679 14.9333C2.91778 14.8911 3.01079 14.8319 3.09179 14.7583C3.20742 14.6411 3.28575 14.4923 3.3169 14.3307C3.34804 14.169 3.33061 14.0018 3.26679 13.85C3.22713 13.7477 3.16766 13.6543 3.09179 13.575ZM5.83346 6.66667H17.5001C17.7211 6.66667 17.9331 6.57887 18.0894 6.42259C18.2457 6.26631 18.3335 6.05435 18.3335 5.83333C18.3335 5.61232 18.2457 5.40036 18.0894 5.24408C17.9331 5.0878 17.7211 5 17.5001 5H5.83346C5.61244 5 5.40048 5.0878 5.2442 5.24408C5.08792 5.40036 5.00012 5.61232 5.00012 5.83333C5.00012 6.05435 5.08792 6.26631 5.2442 6.42259C5.40048 6.57887 5.61244 6.66667 5.83346 6.66667ZM3.09179 9.40833C2.9746 9.2927 2.82579 9.21437 2.66413 9.18323C2.50248 9.15208 2.33521 9.16952 2.18346 9.23333C2.08247 9.27554 1.98946 9.33472 1.90846 9.40833C1.83259 9.48759 1.77312 9.58104 1.73346 9.68333C1.68937 9.78308 1.6666 9.89094 1.6666 10C1.6666 10.1091 1.68937 10.2169 1.73346 10.3167C1.77566 10.4177 1.83485 10.5107 1.90846 10.5917C1.98946 10.6653 2.08247 10.7245 2.18346 10.7667C2.28321 10.8108 2.39106 10.8335 2.50012 10.8335C2.60918 10.8335 2.71704 10.8108 2.81679 10.7667C2.91778 10.7245 3.01079 10.6653 3.09179 10.5917C3.1654 10.5107 3.22459 10.4177 3.26679 10.3167C3.31088 10.2169 3.33365 10.1091 3.33365 10C3.33365 9.89094 3.31088 9.78308 3.26679 9.68333C3.22713 9.58104 3.16766 9.48759 3.09179 9.40833ZM17.5001 9.16667H5.83346C5.61244 9.16667 5.40048 9.25446 5.2442 9.41074C5.08792 9.56703 5.00012 9.77899 5.00012 10C5.00012 10.221 5.08792 10.433 5.2442 10.5893C5.40048 10.7455 5.61244 10.8333 5.83346 10.8333H17.5001C17.7211 10.8333 17.9331 10.7455 18.0894 10.5893C18.2457 10.433 18.3335 10.221 18.3335 10C18.3335 9.77899 18.2457 9.56703 18.0894 9.41074C17.9331 9.25446 17.7211 9.16667 17.5001 9.16667ZM3.09179 5.24167C3.01254 5.1658 2.91908 5.10633 2.81679 5.06667C2.66503 5.00285 2.49777 4.98542 2.33611 5.01656C2.17445 5.04771 2.02564 5.12604 1.90846 5.24167C1.83485 5.32267 1.77566 5.41568 1.73346 5.51667C1.68937 5.61642 1.6666 5.72427 1.6666 5.83333C1.6666 5.94239 1.68937 6.05025 1.73346 6.15C1.77566 6.25099 1.83485 6.344 1.90846 6.425C1.98946 6.49861 2.08247 6.5578 2.18346 6.6C2.33521 6.66382 2.50248 6.68125 2.66413 6.65011C2.82579 6.61896 2.9746 6.54063 3.09179 6.425C3.1654 6.344 3.22459 6.25099 3.26679 6.15C3.31088 6.05025 3.33365 5.94239 3.33365 5.83333C3.33365 5.72427 3.31088 5.61642 3.26679 5.51667C3.22459 5.41568 3.1654 5.32267 3.09179 5.24167ZM17.5001 13.3333H5.83346C5.61244 13.3333 5.40048 13.4211 5.2442 13.5774C5.08792 13.7337 5.00012 13.9457 5.00012 14.1667C5.00012 14.3877 5.08792 14.5996 5.2442 14.7559C5.40048 14.9122 5.61244 15 5.83346 15H17.5001C17.7211 15 17.9331 14.9122 18.0894 14.7559C18.2457 14.5996 18.3335 14.3877 18.3335 14.1667C18.3335 13.9457 18.2457 13.7337 18.0894 13.5774C17.9331 13.4211 17.7211 13.3333 17.5001 13.3333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Main Tasks</span>

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="shadow rounded overflow-hidden">
      <div class="bg-indigo-500">
        <h3 class="p-6 text-xl font-bold text-white">Sales Monitoring</h3>
        <div class="chart" data-type="area" data-variant="dark-bg"></div>
      </div>
      <div class="flex flex-wrap -m-3 px-6 py-10 bg-white">
        <div class="w-1/2 p-3">
          <div class="py-4 px-6 border rounded">
            <p class="text-xs text-gray-500">Sales per user</p>
            <h3 class="text-3xl font-bold">$1035</h3>
          </div>
        </div>
        <div class="w-1/2 p-3">
          <div class="py-4 px-6 border rounded">
            <p class="text-xs text-gray-500">Inventory</p>
            <h3 class="text-3xl font-bold">$435,122</h3>
          </div>
        </div>
        <div class="w-1/2 p-3">
          <div class="py-4 px-6 border rounded">
            <p class="text-xs text-gray-500">Value of refunds</p>
            <h3 class="text-3xl font-bold">$53,525</h3>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-red-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-red-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-red-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-red-700">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-orange-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-indigo-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-orange-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-orange-700">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-gray-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-gray-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-gray-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-gray-700">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-green-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-green-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-green-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-green-700">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-gray-50 border-l-4 border-2 border-indigo-500 rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-indigo-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-indigo-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-indigo-700">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </div>
  </div>
</div>

<section class="pt-5 px-6 bg-white shadow">
  <nav>
    <div class="pb-5 border-b">
      <div class="relative flex items-center">
        <div class="flex items-center mr-auto">
          <button class="flex items-center">
            <span class="flex justify-center items-center mr-3 w-10 h-10 bg-indigo-500 text-sm text-white rounded-full">EP</span>
            <p class="text-sm font-medium mr-2">Example Project</p>
            <span class="inline-block -mb-px">
              <svg class="text-gray-500" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8596 9.52667L7.99958 12.3933L5.13958 9.52667C5.01404 9.40114 4.84378 9.33061 4.66624 9.33061C4.48871 9.33061 4.31845 9.40114 4.19291 9.52667C4.06738 9.65221 3.99685 9.82247 3.99685 10C3.99685 10.1775 4.06738 10.3478 4.19291 10.4733L7.52624 13.8067C7.65115 13.9308 7.82012 14.0005 7.99624 14.0005C8.17237 14.0005 8.34134 13.9308 8.46624 13.8067L11.7996 10.4733C11.8617 10.4112 11.911 10.3374 11.9447 10.2562C11.9783 10.175 11.9956 10.0879 11.9956 10C11.9956 9.9121 11.9783 9.82505 11.9447 9.74384C11.911 9.66262 11.8617 9.58883 11.7996 9.52667C11.7374 9.46451 11.6636 9.41521 11.5824 9.38157C11.5012 9.34793 11.4142 9.33061 11.3262 9.33061C11.2383 9.33061 11.1513 9.34793 11.0701 9.38157C10.9889 9.41521 10.9151 9.46451 10.8529 9.52667H10.8596ZM5.13958 6.47334L7.99958 3.60667L10.8596 6.47334C10.9845 6.59751 11.1535 6.6672 11.3296 6.6672C11.5057 6.6672 11.6747 6.59751 11.7996 6.47334C11.9237 6.34843 11.9934 6.17946 11.9934 6.00334C11.9934 5.82722 11.9237 5.65825 11.7996 5.53334L8.46624 2.20001C8.40427 2.13752 8.33053 2.08792 8.2493 2.05408C8.16806 2.02023 8.08092 2.00281 7.99291 2.00281C7.9049 2.00281 7.81777 2.02023 7.73653 2.05408C7.65529 2.08792 7.58155 2.13752 7.51958 2.20001L4.18624 5.53334C4.06159 5.65976 3.99227 5.83052 3.99352 6.00805C3.99477 6.18559 4.06649 6.35535 4.19291 6.48001C4.31933 6.60466 4.49009 6.67398 4.66762 6.67273C4.84516 6.67148 5.01493 6.59976 5.13958 6.47334Z" fill="currentColor"></path>
              </svg>
            </span>
          </button>
        </div>
        <div class="flex justify-end lg:hidden">
          <button class="flex items-center">
            <svg class="text-indigo-500 bg-indigo-100 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <div class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-10">

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="p-6 text-center bg-white rounded shadow">
          <span class="inline-block mx-auto">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.9998 0.666656C12.2489 0.666656 10.5151 1.01153 8.89738 1.6816C7.2797 2.35166 5.80985 3.33379 4.57173 4.5719C2.07125 7.07238 0.666488 10.4638 0.666488 14C0.654832 17.0788 1.72088 20.0647 3.67982 22.44L1.01315 25.1067C0.828145 25.2942 0.702816 25.5323 0.652984 25.7909C0.603152 26.0496 0.631049 26.3172 0.733155 26.56C0.843899 26.7999 1.02343 27.0015 1.24895 27.1392C1.47447 27.2769 1.73582 27.3444 1.99982 27.3333H13.9998C17.536 27.3333 20.9274 25.9286 23.4279 23.4281C25.9284 20.9276 27.3332 17.5362 27.3332 14C27.3332 10.4638 25.9284 7.07238 23.4279 4.5719C20.9274 2.07141 17.536 0.666656 13.9998 0.666656V0.666656ZM13.9998 24.6667H5.21316L6.45316 23.4267C6.70149 23.1768 6.84088 22.8389 6.84088 22.4867C6.84088 22.1344 6.70149 21.7965 6.45316 21.5467C4.70727 19.8027 3.62005 17.5074 3.37674 15.0517C3.13343 12.5961 3.74908 10.132 5.11879 8.07935C6.4885 6.02671 8.52754 4.51247 10.8885 3.79462C13.2495 3.07677 15.7863 3.19973 18.0668 4.14254C20.3473 5.08535 22.2303 6.78969 23.3951 8.96518C24.5599 11.1407 24.9343 13.6527 24.4547 16.0733C23.975 18.494 22.6709 20.6734 20.7645 22.2403C18.8582 23.8072 16.4675 24.6647 13.9998 24.6667V24.6667ZM20.6665 12.6667H7.33316C6.97953 12.6667 6.6404 12.8071 6.39035 13.0572C6.1403 13.3072 5.99982 13.6464 5.99982 14C5.99982 14.3536 6.1403 14.6928 6.39035 14.9428C6.6404 15.1928 6.97953 15.3333 7.33316 15.3333H20.6665C21.0201 15.3333 21.3593 15.1928 21.6093 14.9428C21.8593 14.6928 21.9998 14.3536 21.9998 14C21.9998 13.6464 21.8593 13.3072 21.6093 13.0572C21.3593 12.8071 21.0201 12.6667 20.6665 12.6667ZM17.9998 18H9.99982C9.6462 18 9.30706 18.1405 9.05701 18.3905C8.80697 18.6406 8.66649 18.9797 8.66649 19.3333C8.66649 19.6869 8.80697 20.0261 9.05701 20.2761C9.30706 20.5262 9.6462 20.6667 9.99982 20.6667H17.9998C18.3534 20.6667 18.6926 20.5262 18.9426 20.2761C19.1927 20.0261 19.3332 19.6869 19.3332 19.3333C19.3332 18.9797 19.1927 18.6406 18.9426 18.3905C18.6926 18.1405 18.3534 18 17.9998 18ZM9.99982 9.99999H17.9998C18.3534 9.99999 18.6926 9.85951 18.9426 9.60947C19.1927 9.35942 19.3332 9.02028 19.3332 8.66666C19.3332 8.31303 19.1927 7.9739 18.9426 7.72385C18.6926 7.4738 18.3534 7.33332 17.9998 7.33332H9.99982C9.6462 7.33332 9.30706 7.4738 9.05701 7.72385C8.80697 7.9739 8.66649 8.31303 8.66649 8.66666C8.66649 9.02028 8.80697 9.35942 9.05701 9.60947C9.30706 9.85951 9.6462 9.99999 9.99982 9.99999V9.99999Z" fill="#8128DE"></path>
            </svg>
          </span>
          <h3 class="mt-3 mb-1 text-3xl font-bold">1 450</h3>
          <p class="text-sm text-gray-600 font-medium">Responses</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="p-6 text-center bg-white rounded shadow">
          <span class="inline-block mx-auto">
            <svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.3332 5.66668H19.3332V4.33334C19.3332 3.27248 18.9117 2.25506 18.1616 1.50492C17.4115 0.754771 16.394 0.333344 15.3332 0.333344H12.6665C11.6056 0.333344 10.5882 0.754771 9.83808 1.50492C9.08793 2.25506 8.6665 3.27248 8.6665 4.33334V5.66668H4.6665C3.60564 5.66668 2.58822 6.0881 1.83808 6.83825C1.08793 7.58839 0.666504 8.60581 0.666504 9.66668V21.6667C0.666504 22.7275 1.08793 23.745 1.83808 24.4951C2.58822 25.2452 3.60564 25.6667 4.6665 25.6667H23.3332C24.394 25.6667 25.4115 25.2452 26.1616 24.4951C26.9117 23.745 27.3332 22.7275 27.3332 21.6667V9.66668C27.3332 8.60581 26.9117 7.58839 26.1616 6.83825C25.4115 6.0881 24.394 5.66668 23.3332 5.66668ZM11.3332 4.33334C11.3332 3.97972 11.4736 3.64058 11.7237 3.39053C11.9737 3.14049 12.3129 3.00001 12.6665 3.00001H15.3332C15.6868 3.00001 16.0259 3.14049 16.276 3.39053C16.526 3.64058 16.6665 3.97972 16.6665 4.33334V5.66668H11.3332V4.33334ZM24.6665 21.6667C24.6665 22.0203 24.526 22.3594 24.276 22.6095C24.0259 22.8595 23.6868 23 23.3332 23H4.6665C4.31288 23 3.97374 22.8595 3.7237 22.6095C3.47365 22.3594 3.33317 22.0203 3.33317 21.6667V14.3333C4.63376 14.8492 5.97075 15.2681 7.33317 15.5867V16.3733C7.33317 16.727 7.47365 17.0661 7.7237 17.3161C7.97374 17.5662 8.31288 17.7067 8.6665 17.7067C9.02013 17.7067 9.35927 17.5662 9.60931 17.3161C9.85936 17.0661 9.99984 16.727 9.99984 16.3733V16.0933C11.3256 16.2738 12.6618 16.3674 13.9998 16.3733C15.3379 16.3674 16.674 16.2738 17.9998 16.0933V16.3733C17.9998 16.727 18.1403 17.0661 18.3904 17.3161C18.6404 17.5662 18.9796 17.7067 19.3332 17.7067C19.6868 17.7067 20.0259 17.5662 20.276 17.3161C20.526 17.0661 20.6665 16.727 20.6665 16.3733V15.5867C22.0289 15.2681 23.3659 14.8492 24.6665 14.3333V21.6667ZM24.6665 11.4133C23.3697 11.9607 22.0323 12.4065 20.6665 12.7467V12.3333C20.6665 11.9797 20.526 11.6406 20.276 11.3905C20.0259 11.1405 19.6868 11 19.3332 11C18.9796 11 18.6404 11.1405 18.3904 11.3905C18.1403 11.6406 17.9998 11.9797 17.9998 12.3333V13.32C15.3482 13.7201 12.6515 13.7201 9.99984 13.32V12.3333C9.99984 11.9797 9.85936 11.6406 9.60931 11.3905C9.35927 11.1405 9.02013 11 8.6665 11C8.31288 11 7.97374 11.1405 7.7237 11.3905C7.47365 11.6406 7.33317 11.9797 7.33317 12.3333V12.7733C5.96733 12.4331 4.62998 11.9873 3.33317 11.44V9.66668C3.33317 9.31305 3.47365 8.97392 3.7237 8.72387C3.97374 8.47382 4.31288 8.33334 4.6665 8.33334H23.3332C23.6868 8.33334 24.0259 8.47382 24.276 8.72387C24.526 8.97392 24.6665 9.31305 24.6665 9.66668V11.4133Z" fill="#17BB84"></path>
            </svg>
          </span>
          <h3 class="mt-3 mb-1 text-3xl font-bold">54</h3>
          <p class="text-sm text-gray-600 font-medium">Projects</p>
        </div>

<section class="py-8" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <div class="px-6 pb-6 pt-4 bg-white shadow rounded">
          <div class="flex flex-wrap items-center mb-3">
            <div>
              <div class="flex items-center">
                <h3 class="mr-2 text-xl font-bold">Projects In Progress</h3>
                <span class="py-1 px-2 bg-indigo-500 text-xs text-white rounded-full">14 New</span>
              </div>
              <p class="text-sm text-gray-500">Information about recent tasks</p>
            </div>
            <a class="ml-auto flex items-center py-2 px-3 text-xs text-white bg-indigo-500 hover:bg-indigo-600 rounded" href="#">
              <span class="mr-1">
                <svg class="h-4 w-4 text-indigo-300" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.8334 0.666656H3.16675C1.75008 0.666656 0.666748 1.74999 0.666748 3.16666V14.8333C0.666748 16.25 1.75008 17.3333 3.16675 17.3333H14.8334C16.2501 17.3333 17.3334 16.25 17.3334 14.8333V3.16666C17.3334 1.74999 16.2501 0.666656 14.8334 0.666656ZM12.3334 9.83332H9.83342V12.3333C9.83342 12.8333 9.50008 13.1667 9.00008 13.1667C8.50008 13.1667 8.16675 12.8333 8.16675 12.3333V9.83332H5.66675C5.16675 9.83332 4.83342 9.49999 4.83342 8.99999C4.83342 8.49999 5.16675 8.16666 5.66675 8.16666H8.16675V5.66666C8.16675 5.16666 8.50008 4.83332 9.00008 4.83332C9.50008 4.83332 9.83342 5.16666 9.83342 5.66666V8.16666H12.3334C12.8334 8.16666 13.1667 8.49999 13.1667 8.99999C13.1667 9.49999 12.8334 9.83332 12.3334 9.83332Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Add new</span>
            </a>
          </div>
          <div class="flex justify-between items-center mb-2 p-4 bg-gray-50 rounded">
            <div class="flex items-center">

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative pt-14 bg-white shadow rounded overflow-hidden">
          <button class="absolute top-0 right-0 mr-6 mt-7 z-10 focus:outline-none">
            <svg class="h-3 w-3 text-white" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 0.666504C5.26667 0.666504 4.66667 1.2665 4.66667 1.99984C4.66667 2.73317 5.26667 3.33317 6 3.33317C6.73333 3.33317 7.33333 2.73317 7.33333 1.99984C7.33333 1.2665 6.73333 0.666504 6 0.666504ZM1.33333 0.666504C0.6 0.666504 0 1.2665 0 1.99984C0 2.73317 0.6 3.33317 1.33333 3.33317C2.06667 3.33317 2.66667 2.73317 2.66667 1.99984C2.66667 1.2665 2.06667 0.666504 1.33333 0.666504ZM10.6667 0.666504C9.93333 0.666504 9.33333 1.2665 9.33333 1.99984C9.33333 2.73317 9.93333 3.33317 10.6667 3.33317C11.4 3.33317 12 2.73317 12 1.99984C12 1.2665 11.4 0.666504 10.6667 0.666504Z" fill="currentColor"></path>
            </svg>
          </button>
          <img class="absolute top-0 left-0 w-full h-24 object-cover" src="https://images.unsplash.com/photo-1592580119984-d31e3833fa78?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80">
          <img class="relative w-16 h-16 mb-4 mx-auto rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="">
          <div class="px-6 text-center">
            <h3 class="font-medium">Jane Thomas</h3>
            <p class="mb-6 text-sm text-gray-500">Designer &amp; Front-End Developer</p>
            <div class="flex items-center justify-center mb-6">
              <span class="mr-2">
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.8332 0.333496H3.16656C2.50352 0.333496 1.86764 0.596888 1.3988 1.06573C0.929957 1.53457 0.666565 2.17045 0.666565 2.8335V11.1668C0.666565 11.8299 0.929957 12.4658 1.3988 12.9346C1.86764 13.4034 2.50352 13.6668 3.16656 13.6668H14.8332C15.4963 13.6668 16.1322 13.4034 16.601 12.9346C17.0698 12.4658 17.3332 11.8299 17.3332 11.1668V2.8335C17.3332 2.17045 17.0698 1.53457 16.601 1.06573C16.1322 0.596888 15.4963 0.333496 14.8332 0.333496ZM3.16656 2.00016H14.8332C15.0542 2.00016 15.2662 2.08796 15.4225 2.24424C15.5788 2.40052 15.6666 2.61248 15.6666 2.8335L8.9999 6.90016L2.33323 2.8335C2.33323 2.61248 2.42103 2.40052 2.57731 2.24424C2.73359 2.08796 2.94555 2.00016 3.16656 2.00016ZM15.6666 11.1668C15.6666 11.3878 15.5788 11.5998 15.4225 11.7561C15.2662 11.9124 15.0542 12.0002 14.8332 12.0002H3.16656C2.94555 12.0002 2.73359 11.9124 2.57731 11.7561C2.42103 11.5998 2.33323 11.3878 2.33323 11.1668V4.7335L8.56657 8.54183C8.69325 8.61497 8.83695 8.65347 8.98323 8.65347C9.12951 8.65347 9.27322 8.61497 9.3999 8.54183L15.6666 4.7335V11.1668Z" fill="#382CDD"></path>
                </svg>
              </span>
              <p class="text-sm">jane.thomas@shuffle.dev</p>
            </div>
            <div class="mb-6">