Tailwind CSS Components

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-5 py-4">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-full sm:w-auto p-2">
          <p class="text-sm font-medium text-gray-400">
            <span>Showing</span>
            <span class="text-gray-200">1</span>
            <span>to</span>
            <span class="text-gray-200">10</span>
            <span>of 20 results</span>
          </p>
        </div>
        <div class="w-full sm:w-auto p-2">
          <div class="flex h-8">
            <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-gray-400 hover:text-gray-300 rounded-l-lg" href="#">
              <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.6454 2.99997L3.4154 1.22997C3.50852 1.13629 3.5608 1.00957 3.5608 0.877474C3.5608 0.745381 3.50852 0.618656 3.4154 0.524974C3.36892 0.47811 3.31362 0.440913 3.25269 0.415529C3.19176 0.390144 3.12641 0.377075 3.0604 0.377075C2.99439 0.377075 2.92904 0.390144 2.86811 0.415529C2.80718 0.440913 2.75188 0.47811 2.7054 0.524974L0.585399 2.64497C0.538535 2.69146 0.501338 2.74676 0.475954 2.80769C0.450569 2.86862 0.4375 2.93397 0.4375 2.99997C0.4375 3.06598 0.450569 3.13133 0.475954 3.19226C0.501338 3.25319 0.538535 3.30849 0.585399 3.35497L2.7054 5.49997C2.75212 5.54631 2.80753 5.58298 2.86845 5.60786C2.92936 5.63274 2.9946 5.64536 3.0604 5.64497C3.1262 5.64536 3.19143 5.63274 3.25235 5.60786C3.31327 5.58298 3.36868 5.54631 3.4154 5.49997C3.50852 5.40629 3.5608 5.27957 3.5608 5.14747C3.5608 5.01538 3.50852 4.88866 3.4154 4.79497L1.6454 2.99997Z" fill="currentColor"></path>
              </svg>
            </a>
            <a x-text="inc - 4" x-on:click.prevent="active = inc - 4" :class="{'text-gray-100': active == inc - 4, 'text-gray-400': active !== inc - 4 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-100 font-semibold" href="#">1</a>
            <a x-text="inc - 3" x-on:click.prevent="active = inc - 3" :class="{'text-gray-100': active == inc - 3, 'text-gray-400': active !== inc - 3 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">2</a>
            <a x-text="inc - 2" x-on:click.prevent="active = inc - 2" :class="{'text-gray-100': active == inc - 2, 'text-gray-400': active !== inc - 2 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">3</a>
            <a x-text="inc - 1" x-on:click.prevent="active = inc - 1" :class="{'text-gray-100': active == inc - 1, 'text-gray-400': active !== inc - 1 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">4</a>

<section x-data="{ tab: 'biography' }" class="py-8">
  <div class="container px-4 mx-auto">
    <div class="p-6 mb-8 bg-gray-500 rounded-xl">
      <div class="relative">
        <img class="block w-full h-72 object-cover" src="trizzle-assets/images/banner-do-something.png" alt="">
        <div class="absolute bottom-0 left-0 w-full flex flex-wrap p-6 items-center justify-between">
          <div class="flex items-center w-full md:w-auto mb-5 md:mb-0">
            <img class="w-12 sm:w-16 h-12 sm:h-16 mr-2 md:mr-6 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
            <div>
              <h5 class="text-xl text-blue-50 font-bold">John Doe</h5>
              <span class="text-gray-300">Front-End Developer</span>
            </div>
          </div>
          <a class="inline-block w-64 py-3 px-6 text-center text-sm leading-6 text-white font-bold bg-blue-500 hover:bg-blue-600 transition duration-200 rounded-xl" href="#">Contact</a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="p-3 mb-6 bg-gray-500 rounded-xl">
          <ul>
            <li><a x-on:click.prevent="tab = 'biography'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Biography</a></li>
            <li><a x-on:click.prevent="tab = 'job-experience'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Job Experience</a></li>
            <li><a x-on:click.prevent="tab = 'skills'" class="block py-2 px-3 text-sm leading-6 text-gray-300 hover:text-white font-medium hover:bg-blue-500 rounded-lg transition duration-100" href="#">Skills</a></li>

<div class="z-50 fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-gray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-xl w-full mx-auto p-6 bg-gray-500 rounded-xl">
    <div class="relative">
      <div class="absolute top-0 right-0 mt-2 flex items-center">
        <button class="flex mr-2 items-center justify-center w-8 h-8 bg-gray-600 hover:bg-gray-700 rounded-lg">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.9997 6.99963C12.8229 6.99963 12.6533 7.06987 12.5283 7.1949C12.4032 7.31992 12.333 7.48949 12.333 7.6663V11.6663C12.333 11.8431 12.2628 12.0127 12.1377 12.1377C12.0127 12.2627 11.8432 12.333 11.6663 12.333H2.33301C2.1562 12.333 1.98663 12.2627 1.8616 12.1377C1.73658 12.0127 1.66634 11.8431 1.66634 11.6663V2.33297C1.66634 2.15616 1.73658 1.98659 1.8616 1.86156C1.98663 1.73654 2.1562 1.6663 2.33301 1.6663H6.33301C6.50982 1.6663 6.67939 1.59606 6.80441 1.47104C6.92944 1.34601 6.99967 1.17644 6.99967 0.999634C6.99967 0.822823 6.92944 0.653253 6.80441 0.528229C6.67939 0.403205 6.50982 0.332967 6.33301 0.332967H2.33301C1.80257 0.332967 1.29387 0.543681 0.918794 0.918754C0.543722 1.29383 0.333008 1.80253 0.333008 2.33297V11.6663C0.333008 12.1967 0.543722 12.7054 0.918794 13.0805C1.29387 13.4556 1.80257 13.6663 2.33301 13.6663H11.6663C12.1968 13.6663 12.7055 13.4556 13.0806 13.0805C13.4556 12.7054 13.6663 12.1967 13.6663 11.6663V7.6663C13.6663 7.48949 13.5961 7.31992 13.4711 7.1949C13.3461 7.06987 13.1765 6.99963 12.9997 6.99963ZM2.99967 7.5063V10.333C2.99967 10.5098 3.06991 10.6793 3.19494 10.8044C3.31996 10.9294 3.48953 10.9996 3.66634 10.9996H6.49301C6.58075 11.0001 6.66772 10.9833 6.74895 10.9501C6.83017 10.917 6.90405 10.8681 6.96634 10.8063L11.5797 6.1863L13.473 4.33297C13.5355 4.27099 13.5851 4.19726 13.6189 4.11602C13.6528 4.03478 13.6702 3.94764 13.6702 3.85963C13.6702 3.77163 13.6528 3.68449 13.6189 3.60325C13.5851 3.52201 13.5355 3.44828 13.473 3.3863L10.6463 0.5263C10.5844 0.463815 10.5106 0.414219 10.4294 0.380373C10.3482 0.346527 10.261 0.329102 10.173 0.329102C10.085 0.329102 9.99786 0.346527 9.91662 0.380373C9.83538 0.414219 9.76165 0.463815 9.69967 0.5263L7.81967 2.41297L3.19301 7.03297C3.13122 7.09526 3.08234 7.16914 3.04916 7.25036C3.01598 7.33159 2.99917 7.41856 2.99967 7.5063ZM10.173 1.93963L12.0597 3.8263L11.113 4.77297L9.22634 2.8863L10.173 1.93963ZM4.33301 7.77963L8.28634 3.8263L10.173 5.71297L6.21967 9.6663H4.33301V7.77963Z" fill="#3D485B"></path>
          </svg>
        </button>
        <button class="flex mr-2 items-center justify-center w-8 h-8 bg-gray-600 hover:bg-gray-700 rounded-lg">
          <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 0.666992C5.73629 0.666992 5.47851 0.745191 5.25924 0.891699C5.03998 1.03821 4.86908 1.24645 4.76816 1.49008C4.66724 1.73372 4.64084 2.0018 4.69229 2.26045C4.74373 2.51909 4.87072 2.75666 5.05719 2.94313C5.24366 3.1296 5.48124 3.25659 5.73988 3.30804C5.99852 3.35949 6.26661 3.33308 6.51025 3.23216C6.75388 3.13125 6.96212 2.96035 7.10863 2.74109C7.25514 2.52182 7.33333 2.26403 7.33333 2.00033C7.33333 1.6467 7.19286 1.30757 6.94281 1.05752C6.69276 0.807468 6.35362 0.666992 6 0.666992ZM1.33333 0.666992C1.06963 0.666992 0.811839 0.745191 0.592574 0.891699C0.373308 1.03821 0.202411 1.24645 0.101495 1.49008C0.000577708 1.73372 -0.0258267 2.0018 0.0256202 2.26045C0.0770672 2.51909 0.204055 2.75666 0.390525 2.94313C0.576995 3.1296 0.814572 3.25659 1.07321 3.30804C1.33185 3.35949 1.59994 3.33308 1.84358 3.23216C2.08721 3.13125 2.29545 2.96035 2.44196 2.74109C2.58847 2.52182 2.66667 2.26403 2.66667 2.00033C2.66667 1.6467 2.52619 1.30757 2.27614 1.05752C2.02609 0.807468 1.68696 0.666992 1.33333 0.666992ZM10.6667 0.666992C10.403 0.666992 10.1452 0.745191 9.92591 0.891699C9.70664 1.03821 9.53574 1.24645 9.43483 1.49008C9.33391 1.73372 9.30751 2.0018 9.35895 2.26045C9.4104 2.51909 9.53739 2.75666 9.72386 2.94313C9.91033 3.1296 10.1479 3.25659 10.4065 3.30804C10.6652 3.35949 10.9333 3.33308 11.1769 3.23216C11.4205 3.13125 11.6288 2.96035 11.7753 2.74109C11.9218 2.52182 12 2.26403 12 2.00033C12 1.6467 11.8595 1.30757 11.6095 1.05752C11.3594 0.807468 11.0203 0.666992 10.6667 0.666992Z" fill="#3D485B"></path>
          </svg>
        </button>
      </div>
      <div class="mb-2">
        <span class="text-xs font-semibold text-gray-400">Design /</span>
        <span class="text-xs font-semibold text-gray-300">D-14</span>
      </div>
      <h4 class="text-lg font-semibold text-gray-200 mb-6">Improve button component</h4>
      <div class="pb-8 mb-8 border-b border-gray-400">
        <div class="flex mb-6 items-center">
          <span class="block w-24 text-xs font-semibold text-gray-400">Status</span>
          <span class="text-xs font-semibold text-gray-200">In Progress</span>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-yellow-900 rounded-lg border border-yellow-500">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0005 15C11.8027 15 11.6093 15.0587 11.4449 15.1686C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8001 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4805 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47003C14.3603 2.00354 13.9802 1.61498 13.5196 1.3445C13.0591 1.07401 12.5346 0.931396 12.0005 0.931396C11.4663 0.931396 10.9419 1.07401 10.4813 1.3445C10.0207 1.61498 9.64065 2.00354 9.38046 2.47003L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0166 1.34914 19.4761C1.60883 19.9356 1.98516 20.3185 2.44014 20.5861C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0053 21.1164 20.8689 21.5784 20.6049C22.0403 20.341 22.4238 19.9589 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9814C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.626 20.7249 18.7556 20.5701 18.8453C20.4154 18.935 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.935 3.43077 18.8453C3.27599 18.7556 3.14811 18.626 3.06046 18.47C2.97269 18.318 2.92648 18.1456 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47003C11.1444 3.30623 11.2719 3.16876 11.4289 3.07277C11.5859 2.97678 11.7664 2.92599 11.9505 2.92599C12.1345 2.92599 12.315 2.97678 12.472 3.07277C12.629 3.16876 12.7565 3.30623 12.8405 3.47003L20.8905 17.47C20.9897 17.6199 21.0467 17.7937 21.0555 17.9732C21.0643 18.1527 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7.00003C11.7352 7.00003 11.4809 7.10538 11.2933 7.29292C11.1058 7.48046 11.0005 7.73481 11.0005 8.00003V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8947 11.7352 13 12.0005 13C12.2657 13 12.52 12.8947 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8.00003C13.0005 7.73481 12.8951 7.48046 12.7076 7.29292C12.52 7.10538 12.2657 7.00003 12.0005 7.00003Z" fill="#FFC107"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-blue-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block text-yellow-50">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-5 py-6 bg-gray-500 rounded-xl">
      <div class="flex items-center justify-center">
        <div class="flex h-8">
          <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-gray-400 hover:text-gray-300 rounded-l-lg" href="#">
            <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.6454 2.99997L3.4154 1.22997C3.50852 1.13629 3.5608 1.00957 3.5608 0.877474C3.5608 0.745381 3.50852 0.618656 3.4154 0.524974C3.36892 0.47811 3.31362 0.440913 3.25269 0.415529C3.19176 0.390144 3.12641 0.377075 3.0604 0.377075C2.99439 0.377075 2.92904 0.390144 2.86811 0.415529C2.80718 0.440913 2.75188 0.47811 2.7054 0.524974L0.585399 2.64497C0.538535 2.69146 0.501338 2.74676 0.475954 2.80769C0.450569 2.86862 0.4375 2.93397 0.4375 2.99997C0.4375 3.06598 0.450569 3.13133 0.475954 3.19226C0.501338 3.25319 0.538535 3.30849 0.585399 3.35497L2.7054 5.49997C2.75212 5.54631 2.80753 5.58298 2.86845 5.60786C2.92936 5.63274 2.9946 5.64536 3.0604 5.64497C3.1262 5.64536 3.19143 5.63274 3.25235 5.60786C3.31327 5.58298 3.36868 5.54631 3.4154 5.49997C3.50852 5.40629 3.5608 5.27957 3.5608 5.14747C3.5608 5.01538 3.50852 4.88866 3.4154 4.79497L1.6454 2.99997Z" fill="currentColor"></path>
            </svg>
          </a>
          <a x-text="inc - 4" x-on:click.prevent="active = inc - 4" :class="{'text-gray-100': active == inc - 4, 'text-gray-400': active !== inc - 4 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-100 font-semibold" href="#">1</a>
          <a x-text="inc - 3" x-on:click.prevent="active = inc - 3" :class="{'text-gray-100': active == inc - 3, 'text-gray-400': active !== inc - 3 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">2</a>
          <a x-text="inc - 2" x-on:click.prevent="active = inc - 2" :class="{'text-gray-100': active == inc - 2, 'text-gray-400': active !== inc - 2 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">3</a>
          <a x-text="inc - 1" x-on:click.prevent="active = inc - 1" :class="{'text-gray-100': active == inc - 1, 'text-gray-400': active !== inc - 1 }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">4</a>
          <a x-text="inc" x-on:click.prevent="active = inc" :class="{'text-gray-100': active == inc, 'text-gray-400': active !== inc }" class="inline-flex items-center justify-center w-8 bg-gray-600 border-r border-gray-500 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">5</a>
          <a x-on:click.prevent="inc < max ? inc += 5 : max" class="inline-flex items-center justify-center w-8 bg-gray-600 text-gray-400 hover:text-gray-300 rounded-r-lg" href="#">
            <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.3546 3.00003L0.584601 4.77003C0.491475 4.86371 0.439205 4.99043 0.439205 5.12253C0.439205 5.25462 0.491475 5.38134 0.584601 5.47503C0.631083 5.52189 0.686383 5.55909 0.747313 5.58447C0.808242 5.60986 0.873595 5.62293 0.939601 5.62293C1.00561 5.62293 1.07096 5.60986 1.13189 5.58447C1.19282 5.55909 1.24812 5.52189 1.2946 5.47503L3.4146 3.35503C3.46146 3.30854 3.49866 3.25324 3.52405 3.19231C3.54943 3.13138 3.5625 3.06603 3.5625 3.00003C3.5625 2.93402 3.54943 2.86867 3.52405 2.80774C3.49866 2.74681 3.46146 2.69151 3.4146 2.64503L1.2946 0.500026C1.24788 0.453685 1.19247 0.417023 1.13155 0.392141C1.07063 0.367258 1.0054 0.354645 0.9396 0.355026C0.873797 0.354645 0.808566 0.367258 0.747647 0.392141C0.686728 0.417023 0.631321 0.453686 0.5846 0.500026C0.491475 0.593707 0.439204 0.720433 0.439204 0.852526C0.439204 0.984619 0.491475 1.11134 0.584601 1.20503L2.3546 3.00003Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-6 xl:mb-0">
        <div class="pt-8 bg-gray-500 h-full rounded-xl">
          <div class="px-6 mb-6">
            <div class="relative w-full h-14 py-4 px-3 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-500">Search</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="messagesInput1-1" placeholder="Search now..." type="search">
            </div>
          </div>
          <ul>
            <li class="block w-full px-8 py-6 bg-gray-700 border-l-4 border-blue-500">
              <div class="flex mb-4 items-center justify-between">
                <div class="flex items-center">
                  <img class="h-12 w-12 mr-3 rounded-full" src="trizzle-assets/images/avatar-women-messages.png" alt="">
                  <span class="text-blue-50 font-bold">Sarha Jackson</span>
                </div>
                <span class="text-gray-300 font-semibold">01.00</span>
              </div>
              <div class="flex mb-4 items-center justify-between">
                <span class="text-gray-100 font-semibold">Looks amazing! Great stuff 😎</span>
                <span class="inline-flex items-center justify-center w-6 h-6 text-xs text-blue-100 bg-blue-500 rounded-full">2</span>
              </div>

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-5 py-6">
      <div class="flex items-center justify-center">
        <div class="flex h-8">
          <a x-on:click.prevent="inc > min ? inc -= 5 : min" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-gray-400 hover:text-gray-300 rounded-l-lg" href="#">
            <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.6454 2.99997L3.4154 1.22997C3.50852 1.13629 3.5608 1.00957 3.5608 0.877474C3.5608 0.745381 3.50852 0.618656 3.4154 0.524974C3.36892 0.47811 3.31362 0.440913 3.25269 0.415529C3.19176 0.390144 3.12641 0.377075 3.0604 0.377075C2.99439 0.377075 2.92904 0.390144 2.86811 0.415529C2.80718 0.440913 2.75188 0.47811 2.7054 0.524974L0.585399 2.64497C0.538535 2.69146 0.501338 2.74676 0.475954 2.80769C0.450569 2.86862 0.4375 2.93397 0.4375 2.99997C0.4375 3.06598 0.450569 3.13133 0.475954 3.19226C0.501338 3.25319 0.538535 3.30849 0.585399 3.35497L2.7054 5.49997C2.75212 5.54631 2.80753 5.58298 2.86845 5.60786C2.92936 5.63274 2.9946 5.64536 3.0604 5.64497C3.1262 5.64536 3.19143 5.63274 3.25235 5.60786C3.31327 5.58298 3.36868 5.54631 3.4154 5.49997C3.50852 5.40629 3.5608 5.27957 3.5608 5.14747C3.5608 5.01538 3.50852 4.88866 3.4154 4.79497L1.6454 2.99997Z" fill="currentColor"></path>
            </svg>
          </a>
          <a x-text="inc - 4" x-on:click.prevent="active = inc - 4" :class="{'text-gray-100': active == inc - 4, 'text-gray-400': active !== inc - 4 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-100 font-semibold" href="#">1</a>
          <a x-text="inc - 3" x-on:click.prevent="active = inc - 3" :class="{'text-gray-100': active == inc - 3, 'text-gray-400': active !== inc - 3 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">2</a>
          <a x-text="inc - 2" x-on:click.prevent="active = inc - 2" :class="{'text-gray-100': active == inc - 2, 'text-gray-400': active !== inc - 2 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">3</a>
          <a x-text="inc - 1" x-on:click.prevent="active = inc - 1" :class="{'text-gray-100': active == inc - 1, 'text-gray-400': active !== inc - 1 }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">4</a>
          <a x-text="inc" x-on:click.prevent="active = inc" :class="{'text-gray-100': active == inc, 'text-gray-400': active !== inc }" class="inline-flex items-center justify-center w-8 bg-gray-500 border-r border-gray-400 border-opacity-20 text-sm text-gray-400 hover:text-gray-300 font-semibold" href="#">5</a>
          <a x-on:click.prevent="inc < max ? inc += 5 : max" class="inline-flex items-center justify-center w-8 bg-gray-500 text-gray-400 hover:text-gray-300 rounded-r-lg" href="#">
            <svg width="4" height="6" viewBox="0 0 4 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.3546 3.00003L0.584601 4.77003C0.491475 4.86371 0.439205 4.99043 0.439205 5.12253C0.439205 5.25462 0.491475 5.38134 0.584601 5.47503C0.631083 5.52189 0.686383 5.55909 0.747313 5.58447C0.808242 5.60986 0.873595 5.62293 0.939601 5.62293C1.00561 5.62293 1.07096 5.60986 1.13189 5.58447C1.19282 5.55909 1.24812 5.52189 1.2946 5.47503L3.4146 3.35503C3.46146 3.30854 3.49866 3.25324 3.52405 3.19231C3.54943 3.13138 3.5625 3.06603 3.5625 3.00003C3.5625 2.93402 3.54943 2.86867 3.52405 2.80774C3.49866 2.74681 3.46146 2.69151 3.4146 2.64503L1.2946 0.500026C1.24788 0.453685 1.19247 0.417023 1.13155 0.392141C1.07063 0.367258 1.0054 0.354645 0.9396 0.355026C0.873797 0.354645 0.808566 0.367258 0.747647 0.392141C0.686728 0.417023 0.631321 0.453686 0.5846 0.500026C0.491475 0.593707 0.439204 0.720433 0.439204 0.852526C0.439204 0.984619 0.491475 1.11134 0.584601 1.20503L2.3546 3.00003Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-red-700 rounded-lg border border-red-500">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 12C9.75278 12 9.5111 12.0733 9.30554 12.2107C9.09998 12.348 8.93976 12.5432 8.84516 12.7716C8.75055 13.0001 8.72579 13.2514 8.77402 13.4939C8.82225 13.7363 8.94131 13.9591 9.11612 14.1339C9.29094 14.3087 9.51367 14.4277 9.75614 14.476C9.99862 14.5242 10.25 14.4995 10.4784 14.4049C10.7068 14.3102 10.902 14.15 11.0393 13.9445C11.1767 13.7389 11.25 13.4972 11.25 13.25C11.25 12.9185 11.1183 12.6005 10.8839 12.3661C10.6495 12.1317 10.3315 12 10 12ZM10 10.5C10.2652 10.5 10.5196 10.3946 10.7071 10.2071C10.8946 10.0196 11 9.76522 11 9.5V6.5C11 6.23478 10.8946 5.98043 10.7071 5.79289C10.5196 5.60536 10.2652 5.5 10 5.5C9.73479 5.5 9.48043 5.60536 9.2929 5.79289C9.10536 5.98043 9 6.23478 9 6.5V9.5C9 9.76522 9.10536 10.0196 9.2929 10.2071C9.48043 10.3946 9.73479 10.5 10 10.5ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34874 18.9425 4.80691 17.0678 2.93219C15.1931 1.05746 12.6513 0.00294858 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C17.9976 12.121 17.1539 14.1544 15.6542 15.6542C14.1544 17.1539 12.121 17.9976 10 18Z" fill="#FF4842"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-red-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block text-red-50">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="mb-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap">
        <div class="w-full sm:w-1/2 lg:w-1/4 pl-4 md:pl-8 xl:pl-10 border-b lg:border-b-0 sm:border-r border-gray-700">
          <div class="py-5 px-6">
            <h5 class="text-sm font-semibold text-gray-300 mb-6 leading-normal tracking-wide">Summary</h5>
            <div class="flex flex-wrap items-center mb-1 -m-2">
              <div class="w-auto p-2">
                <h4 class="text-2xl text-gray-100 font-bold tracking-wide">3.55K</h4>
              </div>
              <div class="w-auto p-2">
                <div class="inline-flex px-2 h-7 items-center justify-center text-purple-500 bg-purple-900 rounded-full">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.00002 3.33337V12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M10.6667 10L8.00002 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M5.33334 10L8.00001 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <span class="text-xs font-medium">59%</span>
                </div>
              </div>
            </div>
            <p class="text-xs font-semibold text-gray-300">Last week 84,70K</p>
          </div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-blue-800 rounded-lg border border-blue-500">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex pr-6">
          <span class="flex-shrink-0 self-start mr-3">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C21.9971 9.34874 20.9425 6.80691 19.0678 4.93219C17.1931 3.05746 14.6513 2.00295 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C19.9976 14.121 19.1539 16.1544 17.6542 17.6542C16.1544 19.1539 14.121 19.9976 12 20ZM12 11.5C11.7348 11.5 11.4804 11.6054 11.2929 11.7929C11.1054 11.9804 11 12.2348 11 12.5V15.5C11 15.7652 11.1054 16.0196 11.2929 16.2071C11.4804 16.3946 11.7348 16.5 12 16.5C12.2652 16.5 12.5196 16.3946 12.7071 16.2071C12.8946 16.0196 13 15.7652 13 15.5V12.5C13 12.2348 12.8946 11.9804 12.7071 11.7929C12.5196 11.6054 12.2652 11.5 12 11.5ZM12 7.5C11.7528 7.5 11.5111 7.57331 11.3055 7.71066C11.1 7.84801 10.9398 8.04324 10.8452 8.27165C10.7505 8.50005 10.7258 8.75139 10.774 8.99386C10.8223 9.23634 10.9413 9.45907 11.1161 9.63388C11.2909 9.8087 11.5137 9.92775 11.7561 9.97598C11.9986 10.0242 12.25 9.99946 12.4784 9.90485C12.7068 9.81024 12.902 9.65002 13.0393 9.44446C13.1767 9.2389 13.25 8.99723 13.25 8.75C13.25 8.41848 13.1183 8.10054 12.8839 7.86612C12.6495 7.6317 12.3315 7.5 12 7.5Z" fill="#1890FF"></path>
            </svg>
          </span>
          <div>
            <h5 class="text-blue-100 font-semibold">Alert Info</h5>
            <span class="text-sm leading-5 text-blue-50 font-medium">This is an Info alert — check it out!</span>
          </div>
        </div>
        <button x-on:click="modal = false" class="inline-block">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="#D0F2FF"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<section class="py-8 px-6">
  <div class="flex flex-wrap -mx-3 items-center">
    <div class="w-full lg:w-1/2 flex items-center mb-5 lg:mb-0 px-3">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.4506 4.60603C23.4408 4.59562 23.4379 4.58178 23.4277 4.5716C23.4175 4.56143 23.4034 4.55834 23.393 4.5485C20.899 2.06256 17.5213 0.666656 14 0.666656C10.4787 0.666656 7.10093 2.06256 4.60698 4.5485C4.59649 4.55834 4.58249 4.56135 4.57223 4.5716C4.56198 4.58186 4.55913 4.5956 4.54937 4.60603C2.69104 6.47326 1.42749 8.84913 0.918186 11.4338C0.408879 14.0185 0.676641 16.6961 1.68768 19.1287C2.69872 21.5614 4.40772 23.64 6.59899 25.1022C8.79026 26.5645 11.3656 27.3449 14 27.3449C16.6343 27.3449 19.2097 26.5645 21.4009 25.1022C23.5922 23.64 25.3012 21.5614 26.3123 19.1287C27.3233 16.6961 27.5911 14.0185 27.0817 11.4338C26.5724 8.84913 25.3089 6.47326 23.4506 4.60603V4.60603ZM13.9999 24.6667C12.4029 24.6661 10.8265 24.3063 9.38745 23.6139C7.94839 22.9215 6.68353 21.9142 5.68657 20.6667H11.0403C11.411 21.0858 11.8666 21.4214 12.3768 21.6513C12.8871 21.8811 13.4403 22 13.9999 22C14.5595 22 15.1127 21.8811 15.623 21.6513C16.1332 21.4214 16.5888 21.0858 16.9595 20.6667H22.3133C21.3163 21.9142 20.0515 22.9215 18.6124 23.6139C17.1733 24.3063 15.5969 24.6661 13.9999 24.6667V24.6667ZM12.6666 18C12.6666 17.7363 12.7448 17.4785 12.8913 17.2592C13.0378 17.04 13.246 16.8691 13.4897 16.7681C13.7333 16.6672 14.0014 16.6408 14.26 16.6923C14.5187 16.7437 14.7562 16.8707 14.9427 17.0572C15.1292 17.2437 15.2562 17.4812 15.3076 17.7399C15.3591 17.9985 15.3327 18.2666 15.2317 18.5102C15.1308 18.7539 14.9599 18.9621 14.7407 19.1086C14.5214 19.2551 14.2636 19.3333 13.9999 19.3333C13.6464 19.333 13.3075 19.1924 13.0575 18.9424C12.8075 18.6924 12.6669 18.3535 12.6666 18V18ZM23.8802 18.0028L23.8664 18H17.9999C17.9974 17.1755 17.7397 16.372 17.2622 15.6998C16.7847 15.0275 16.1109 14.5196 15.3332 14.2457V9.99999C15.3332 9.64637 15.1928 9.30723 14.9427 9.05718C14.6927 8.80713 14.3535 8.66666 13.9999 8.66666C13.6463 8.66666 13.3071 8.80713 13.0571 9.05718C12.807 9.30723 12.6666 9.64637 12.6666 9.99999V14.2457C11.8889 14.5196 11.2151 15.0275 10.7376 15.6998C10.2601 16.372 10.0024 17.1755 9.9999 18H4.13337L4.11961 18.0028C3.7728 17.1471 3.53956 16.2496 3.42585 15.3333H4.66657C5.02019 15.3333 5.35933 15.1928 5.60937 14.9428C5.85942 14.6927 5.9999 14.3536 5.9999 14C5.9999 13.6464 5.85942 13.3072 5.60937 13.0572C5.35933 12.8071 5.02019 12.6667 4.66657 12.6667H3.42585C3.6641 10.7714 4.40997 8.97575 5.58462 7.46947L6.45758 8.34244C6.58138 8.46624 6.72835 8.56444 6.8901 8.63144C7.05185 8.69844 7.22521 8.73292 7.40029 8.73292C7.57537 8.73292 7.74873 8.69844 7.91048 8.63144C8.07223 8.56444 8.2192 8.46623 8.343 8.34244C8.4668 8.21864 8.565 8.07167 8.632 7.90992C8.699 7.74817 8.73348 7.5748 8.73348 7.39972C8.73348 7.22465 8.69899 7.05128 8.63199 6.88953C8.56499 6.72778 8.46679 6.58081 8.34299 6.45702L7.47011 5.58414C8.97629 4.40987 10.7717 3.66421 12.6666 3.42594V4.66666C12.6666 5.02028 12.807 5.35942 13.0571 5.60946C13.3071 5.85951 13.6463 5.99999 13.9999 5.99999C14.3535 5.99999 14.6927 5.85951 14.9427 5.60946C15.1928 5.35942 15.3332 5.02028 15.3332 4.66666V3.42594C17.2281 3.66421 19.0235 4.40987 20.5297 5.58414L19.6568 6.45702C19.4068 6.70704 19.2663 7.04614 19.2663 7.39972C19.2663 7.75331 19.4068 8.09241 19.6568 8.34244C19.9068 8.59246 20.2459 8.73292 20.5995 8.73292C20.9531 8.73292 21.2922 8.59246 21.5422 8.34244L22.4152 7.46947C23.5898 8.97575 24.3357 10.7714 24.574 12.6667H23.3332C22.9796 12.6667 22.6405 12.8071 22.3904 13.0572C22.1404 13.3072 21.9999 13.6464 21.9999 14C21.9999 14.3536 22.1404 14.6927 22.3904 14.9428C22.6405 15.1928 22.9796 15.3333 23.3332 15.3333H24.574C24.4602 16.2496 24.227 17.1471 23.8802 18.0028V18.0028Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Analysis Dashboard</h2>
        <p class="text-sm text-gray-500 font-medium">Take care of your business. Achieve your goals and increase profits.</p>
      </div>
    </div>
    <div class="w-full lg:w-auto ml-auto px-3">
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-white hover:bg-indigo-50 rounded" href="#">
        <span class="inline-block mr-1">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 9.33334C13.6 9.33334 13.3333 9.60001 13.3333 10V12.6667C13.3333 13.0667 13.0667 13.3333 12.6667 13.3333H3.33334C2.93334 13.3333 2.66668 13.0667 2.66668 12.6667V10C2.66668 9.60001 2.40001 9.33334 2.00001 9.33334C1.60001 9.33334 1.33334 9.60001 1.33334 10V12.6667C1.33334 13.8 2.20001 14.6667 3.33334 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V10C14.6667 9.60001 14.4 9.33334 14 9.33334ZM5.80001 5.13334L7.33334 3.60001V10C7.33334 10.4 7.60001 10.6667 8.00001 10.6667C8.40001 10.6667 8.66668 10.4 8.66668 10V3.60001L10.2 5.13334C10.4667 5.40001 10.8667 5.40001 11.1333 5.13334C11.4 4.86668 11.4 4.46668 11.1333 4.20001L8.46668 1.53334C8.20001 1.26668 7.80001 1.26668 7.53334 1.53334L4.86668 4.20001C4.60001 4.46668 4.60001 4.86668 4.86668 5.13334C5.13334 5.40001 5.53334 5.40001 5.80001 5.13334Z" fill="#8880EB"></path>
          </svg>
        </span>
        <span>Download</span>
      </a>
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-white hover:bg-indigo-50 rounded" href="#">
        <span class="inline-block mr-1">

<section class="py-8 px-6 bg-white">
  <div class="flex flex-wrap -mx-3 items-center">
    <div class="w-full lg:w-1/2 flex items-center mb-5 lg:mb-0 px-3">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.4506 4.60603C23.4408 4.59562 23.4379 4.58178 23.4277 4.5716C23.4175 4.56143 23.4034 4.55834 23.393 4.5485C20.899 2.06256 17.5213 0.666656 14 0.666656C10.4787 0.666656 7.10093 2.06256 4.60698 4.5485C4.59649 4.55834 4.58249 4.56135 4.57223 4.5716C4.56198 4.58186 4.55913 4.5956 4.54937 4.60603C2.69104 6.47326 1.42749 8.84913 0.918186 11.4338C0.408879 14.0185 0.676641 16.6961 1.68768 19.1287C2.69872 21.5614 4.40772 23.64 6.59899 25.1022C8.79026 26.5645 11.3656 27.3449 14 27.3449C16.6343 27.3449 19.2097 26.5645 21.4009 25.1022C23.5922 23.64 25.3012 21.5614 26.3123 19.1287C27.3233 16.6961 27.5911 14.0185 27.0817 11.4338C26.5724 8.84913 25.3089 6.47326 23.4506 4.60603V4.60603ZM13.9999 24.6667C12.4029 24.6661 10.8265 24.3063 9.38745 23.6139C7.94839 22.9215 6.68353 21.9142 5.68657 20.6667H11.0403C11.411 21.0858 11.8666 21.4214 12.3768 21.6513C12.8871 21.8811 13.4403 22 13.9999 22C14.5595 22 15.1127 21.8811 15.623 21.6513C16.1332 21.4214 16.5888 21.0858 16.9595 20.6667H22.3133C21.3163 21.9142 20.0515 22.9215 18.6124 23.6139C17.1733 24.3063 15.5969 24.6661 13.9999 24.6667V24.6667ZM12.6666 18C12.6666 17.7363 12.7448 17.4785 12.8913 17.2592C13.0378 17.04 13.246 16.8691 13.4897 16.7681C13.7333 16.6672 14.0014 16.6408 14.26 16.6923C14.5187 16.7437 14.7562 16.8707 14.9427 17.0572C15.1292 17.2437 15.2562 17.4812 15.3076 17.7399C15.3591 17.9985 15.3327 18.2666 15.2317 18.5102C15.1308 18.7539 14.9599 18.9621 14.7407 19.1086C14.5214 19.2551 14.2636 19.3333 13.9999 19.3333C13.6464 19.333 13.3075 19.1924 13.0575 18.9424C12.8075 18.6924 12.6669 18.3535 12.6666 18V18ZM23.8802 18.0028L23.8664 18H17.9999C17.9974 17.1755 17.7397 16.372 17.2622 15.6998C16.7847 15.0275 16.1109 14.5196 15.3332 14.2457V9.99999C15.3332 9.64637 15.1928 9.30723 14.9427 9.05718C14.6927 8.80713 14.3535 8.66666 13.9999 8.66666C13.6463 8.66666 13.3071 8.80713 13.0571 9.05718C12.807 9.30723 12.6666 9.64637 12.6666 9.99999V14.2457C11.8889 14.5196 11.2151 15.0275 10.7376 15.6998C10.2601 16.372 10.0024 17.1755 9.9999 18H4.13337L4.11961 18.0028C3.7728 17.1471 3.53956 16.2496 3.42585 15.3333H4.66657C5.02019 15.3333 5.35933 15.1928 5.60937 14.9428C5.85942 14.6927 5.9999 14.3536 5.9999 14C5.9999 13.6464 5.85942 13.3072 5.60937 13.0572C5.35933 12.8071 5.02019 12.6667 4.66657 12.6667H3.42585C3.6641 10.7714 4.40997 8.97575 5.58462 7.46947L6.45758 8.34244C6.58138 8.46624 6.72835 8.56444 6.8901 8.63144C7.05185 8.69844 7.22521 8.73292 7.40029 8.73292C7.57537 8.73292 7.74873 8.69844 7.91048 8.63144C8.07223 8.56444 8.2192 8.46623 8.343 8.34244C8.4668 8.21864 8.565 8.07167 8.632 7.90992C8.699 7.74817 8.73348 7.5748 8.73348 7.39972C8.73348 7.22465 8.69899 7.05128 8.63199 6.88953C8.56499 6.72778 8.46679 6.58081 8.34299 6.45702L7.47011 5.58414C8.97629 4.40987 10.7717 3.66421 12.6666 3.42594V4.66666C12.6666 5.02028 12.807 5.35942 13.0571 5.60946C13.3071 5.85951 13.6463 5.99999 13.9999 5.99999C14.3535 5.99999 14.6927 5.85951 14.9427 5.60946C15.1928 5.35942 15.3332 5.02028 15.3332 4.66666V3.42594C17.2281 3.66421 19.0235 4.40987 20.5297 5.58414L19.6568 6.45702C19.4068 6.70704 19.2663 7.04614 19.2663 7.39972C19.2663 7.75331 19.4068 8.09241 19.6568 8.34244C19.9068 8.59246 20.2459 8.73292 20.5995 8.73292C20.9531 8.73292 21.2922 8.59246 21.5422 8.34244L22.4152 7.46947C23.5898 8.97575 24.3357 10.7714 24.574 12.6667H23.3332C22.9796 12.6667 22.6405 12.8071 22.3904 13.0572C22.1404 13.3072 21.9999 13.6464 21.9999 14C21.9999 14.3536 22.1404 14.6927 22.3904 14.9428C22.6405 15.1928 22.9796 15.3333 23.3332 15.3333H24.574C24.4602 16.2496 24.227 17.1471 23.8802 18.0028V18.0028Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Analysis Dashboard</h2>
        <p class="text-sm text-gray-500 font-medium">Take care of your business. Achieve your goals and increase profits.</p>
      </div>
    </div>
    <div class="w-full lg:w-auto ml-auto px-3">
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-indigo-50 hover:bg-indigo-100 rounded" href="#">
        <span class="inline-block mr-1">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 9.33334C13.6 9.33334 13.3333 9.60001 13.3333 10V12.6667C13.3333 13.0667 13.0667 13.3333 12.6667 13.3333H3.33334C2.93334 13.3333 2.66668 13.0667 2.66668 12.6667V10C2.66668 9.60001 2.40001 9.33334 2.00001 9.33334C1.60001 9.33334 1.33334 9.60001 1.33334 10V12.6667C1.33334 13.8 2.20001 14.6667 3.33334 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V10C14.6667 9.60001 14.4 9.33334 14 9.33334ZM5.80001 5.13334L7.33334 3.60001V10C7.33334 10.4 7.60001 10.6667 8.00001 10.6667C8.40001 10.6667 8.66668 10.4 8.66668 10V3.60001L10.2 5.13334C10.4667 5.40001 10.8667 5.40001 11.1333 5.13334C11.4 4.86668 11.4 4.46668 11.1333 4.20001L8.46668 1.53334C8.20001 1.26668 7.80001 1.26668 7.53334 1.53334L4.86668 4.20001C4.60001 4.46668 4.60001 4.86668 4.86668 5.13334C5.13334 5.40001 5.53334 5.40001 5.80001 5.13334Z" fill="#8880EB"></path>
          </svg>
        </span>
        <span>Download</span>
      </a>
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-indigo-50 hover:bg-indigo-100 rounded" href="#">
        <span class="inline-block mr-1">

<section class="py-8 px-6">
  <div class="flex flex-wrap items-center">
    <div class="w-full lg:w-auto flex items-center mb-4 lg:mb-0">
      <h2 class="text-2xl font-bold">Project Name</h2>
      <span class="inline-block py-1 px-2 ml-2 rounded-full text-xs text-white bg-indigo-500">56 Total</span>
    </div>
    <div class="w-full md:w-1/2 lg:w-auto flex py-2 px-4 mb-4 md:mb-0 md:mr-4 md:ml-auto border rounded bg-white">
      <input class="text-sm placeholder-gray-500" type="text" placeholder="Type to search...">
      <button class="ml-auto">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
        </svg>
      </button>
    </div>
    <a class="md:w-auto flex items-center py-2 px-4 rounded bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium" href="#">
      <span class="inline-block mr-1">
        <svg class="h-4 w-4 text-indigo-300" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.6667 1.33334H3.33333C2.19999 1.33334 1.33333 2.20001 1.33333 3.33334V12.6667C1.33333 13.8 2.19999 14.6667 3.33333 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V3.33334C14.6667 2.20001 13.8 1.33334 12.6667 1.33334ZM10.6667 8.66668H8.66666V10.6667C8.66666 11.0667 8.4 11.3333 8 11.3333C7.6 11.3333 7.33333 11.0667 7.33333 10.6667V8.66668H5.33333C4.93333 8.66668 4.66666 8.40001 4.66666 8.00001C4.66666 7.60001 4.93333 7.33334 5.33333 7.33334H7.33333V5.33334C7.33333 4.93334 7.6 4.66668 8 4.66668C8.4 4.66668 8.66666 4.93334 8.66666 5.33334V7.33334H10.6667C11.0667 7.33334 11.3333 7.60001 11.3333 8.00001C11.3333 8.40001 11.0667 8.66668 10.6667 8.66668Z" fill="currentColor"></path>
        </svg>
      </span>
      <span>Add Project</span>
    </a>
  </div>
</section>

<section class="py-8 px-6 bg-white">
  <div class="flex flex-wrap items-center">
    <div class="w-full lg:w-auto flex items-center mb-4 lg:mb-0">
      <h2 class="text-2xl font-bold">Project Name</h2>
      <span class="inline-block py-1 px-2 ml-2 rounded-full text-xs text-white bg-indigo-500">56 Total</span>
    </div>
    <div class="w-full md:w-1/2 lg:w-auto flex py-2 px-4 mb-4 md:mb-0 md:mr-4 md:ml-auto border rounded bg-white">
      <input class="text-sm placeholder-gray-500" type="text" placeholder="Type to search...">
      <button class="ml-auto">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
        </svg>
      </button>
    </div>
    <a class="md:w-auto flex items-center py-2 px-4 rounded bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium" href="#">
      <span class="inline-block mr-1">
        <svg class="h-4 w-4 text-indigo-300" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.6667 1.33334H3.33333C2.19999 1.33334 1.33333 2.20001 1.33333 3.33334V12.6667C1.33333 13.8 2.19999 14.6667 3.33333 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V3.33334C14.6667 2.20001 13.8 1.33334 12.6667 1.33334ZM10.6667 8.66668H8.66666V10.6667C8.66666 11.0667 8.4 11.3333 8 11.3333C7.6 11.3333 7.33333 11.0667 7.33333 10.6667V8.66668H5.33333C4.93333 8.66668 4.66666 8.40001 4.66666 8.00001C4.66666 7.60001 4.93333 7.33334 5.33333 7.33334H7.33333V5.33334C7.33333 4.93334 7.6 4.66668 8 4.66668C8.4 4.66668 8.66666 4.93334 8.66666 5.33334V7.33334H10.6667C11.0667 7.33334 11.3333 7.60001 11.3333 8.00001C11.3333 8.40001 11.0667 8.66668 10.6667 8.66668Z" fill="currentColor"></path>
        </svg>
      </span>
      <span>Add Project</span>
    </a>
  </div>
</section>

<section class="py-8 px-6">
  <div class="flex flex-wrap items-center">
    <div class="flex items-center mb-5 lg:mb-0">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.3328 5.66668H19.3328V4.33334C19.3328 3.27248 18.9114 2.25506 18.1612 1.50492C17.4111 0.754771 16.3937 0.333344 15.3328 0.333344H12.6661C11.6053 0.333344 10.5879 0.754771 9.83771 1.50492C9.08757 2.25506 8.66614 3.27248 8.66614 4.33334V5.66668H4.66614C3.60527 5.66668 2.58786 6.0881 1.83771 6.83825C1.08757 7.58839 0.666138 8.60581 0.666138 9.66668V21.6667C0.666138 22.7275 1.08757 23.745 1.83771 24.4951C2.58786 25.2452 3.60527 25.6667 4.66614 25.6667H23.3328C24.3937 25.6667 25.4111 25.2452 26.1612 24.4951C26.9114 23.745 27.3328 22.7275 27.3328 21.6667V9.66668C27.3328 8.60581 26.9114 7.58839 26.1612 6.83825C25.4111 6.0881 24.3937 5.66668 23.3328 5.66668ZM11.3328 4.33334C11.3328 3.97972 11.4733 3.64058 11.7233 3.39053C11.9734 3.14049 12.3125 3.00001 12.6661 3.00001H15.3328C15.6864 3.00001 16.0256 3.14049 16.2756 3.39053C16.5257 3.64058 16.6661 3.97972 16.6661 4.33334V5.66668H11.3328V4.33334ZM24.6661 21.6667C24.6661 22.0203 24.5257 22.3594 24.2756 22.6095C24.0256 22.8595 23.6864 23 23.3328 23H4.66614C4.31252 23 3.97338 22.8595 3.72333 22.6095C3.47328 22.3594 3.3328 22.0203 3.3328 21.6667V14.9333H7.33281V16.3333C7.33281 16.687 7.47328 17.0261 7.72333 17.2761C7.97338 17.5262 8.31252 17.6667 8.66614 17.6667C9.01976 17.6667 9.3589 17.5262 9.60895 17.2761C9.859 17.0261 9.99947 16.687 9.99947 16.3333V14.9333H17.9995V16.3333C17.9995 16.687 18.1399 17.0261 18.39 17.2761C18.64 17.5262 18.9792 17.6667 19.3328 17.6667C19.6864 17.6667 20.0256 17.5262 20.2756 17.2761C20.5257 17.0261 20.6661 16.687 20.6661 16.3333V14.9333H24.6661V21.6667ZM24.6661 12.3333H3.3328V9.66668C3.3328 9.31305 3.47328 8.97392 3.72333 8.72387C3.97338 8.47382 4.31252 8.33334 4.66614 8.33334H23.3328C23.6864 8.33334 24.0256 8.47382 24.2756 8.72387C24.5257 8.97392 24.6661 9.31305 24.6661 9.66668V12.3333Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Name</h2>
        <p class="text-sm text-gray-500 font-medium">
          <span class="text-indigo-500">54</span>
          <span>Users involved in this product</span>
        </p>
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-auto flex pr-4 mb-4 md:mb-0 md:mr-4 md:ml-auto border rounded bg-white">
      <input class="py-2 pl-4 pr-2 text-sm placeholder-gray-500" type="text" placeholder="Type to search...">
      <button class="ml-auto">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
        </svg>
      </button>
    </div>

<section class="py-8 px-6 bg-white">
  <div class="flex flex-wrap items-center">
    <div class="flex items-center mb-5 lg:mb-0">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.3328 5.66668H19.3328V4.33334C19.3328 3.27248 18.9114 2.25506 18.1612 1.50492C17.4111 0.754771 16.3937 0.333344 15.3328 0.333344H12.6661C11.6053 0.333344 10.5879 0.754771 9.83771 1.50492C9.08757 2.25506 8.66614 3.27248 8.66614 4.33334V5.66668H4.66614C3.60527 5.66668 2.58786 6.0881 1.83771 6.83825C1.08757 7.58839 0.666138 8.60581 0.666138 9.66668V21.6667C0.666138 22.7275 1.08757 23.745 1.83771 24.4951C2.58786 25.2452 3.60527 25.6667 4.66614 25.6667H23.3328C24.3937 25.6667 25.4111 25.2452 26.1612 24.4951C26.9114 23.745 27.3328 22.7275 27.3328 21.6667V9.66668C27.3328 8.60581 26.9114 7.58839 26.1612 6.83825C25.4111 6.0881 24.3937 5.66668 23.3328 5.66668ZM11.3328 4.33334C11.3328 3.97972 11.4733 3.64058 11.7233 3.39053C11.9734 3.14049 12.3125 3.00001 12.6661 3.00001H15.3328C15.6864 3.00001 16.0256 3.14049 16.2756 3.39053C16.5257 3.64058 16.6661 3.97972 16.6661 4.33334V5.66668H11.3328V4.33334ZM24.6661 21.6667C24.6661 22.0203 24.5257 22.3594 24.2756 22.6095C24.0256 22.8595 23.6864 23 23.3328 23H4.66614C4.31252 23 3.97338 22.8595 3.72333 22.6095C3.47328 22.3594 3.3328 22.0203 3.3328 21.6667V14.9333H7.33281V16.3333C7.33281 16.687 7.47328 17.0261 7.72333 17.2761C7.97338 17.5262 8.31252 17.6667 8.66614 17.6667C9.01976 17.6667 9.3589 17.5262 9.60895 17.2761C9.859 17.0261 9.99947 16.687 9.99947 16.3333V14.9333H17.9995V16.3333C17.9995 16.687 18.1399 17.0261 18.39 17.2761C18.64 17.5262 18.9792 17.6667 19.3328 17.6667C19.6864 17.6667 20.0256 17.5262 20.2756 17.2761C20.5257 17.0261 20.6661 16.687 20.6661 16.3333V14.9333H24.6661V21.6667ZM24.6661 12.3333H3.3328V9.66668C3.3328 9.31305 3.47328 8.97392 3.72333 8.72387C3.97338 8.47382 4.31252 8.33334 4.66614 8.33334H23.3328C23.6864 8.33334 24.0256 8.47382 24.2756 8.72387C24.5257 8.97392 24.6661 9.31305 24.6661 9.66668V12.3333Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Name</h2>
        <p class="text-sm text-gray-500 font-medium">
          <span class="text-indigo-500">54</span>
          <span>Users involved in this product</span>
        </p>
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-auto flex pr-4 mb-4 md:mb-0 md:mr-4 md:ml-auto border rounded bg-white">
      <input class="py-2 pl-4 pr-2 text-sm placeholder-gray-500" type="text" placeholder="Type to search...">
      <button class="ml-auto">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
        </svg>
      </button>
    </div>

<section class="py-8 px-6">
  <div class="flex flex-wrap items-center">
    <div class="mb-5 lg:mb-0">
      <h2 class="mb-1 text-2xl font-bold">Statistics</h2>
      <div class="flex items-center">
        <a class="flex items-center text-sm text-gray-500" href="#">
          <span class="inline-block mr-2">
            <svg class="h-4 w-4 text-gray-500" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6666 5.66667L9.66662 1.28333C9.20827 0.873372 8.6149 0.646725 7.99996 0.646725C7.38501 0.646725 6.79164 0.873372 6.33329 1.28333L1.33329 5.66667C1.0686 5.9034 0.857374 6.1938 0.713683 6.51854C0.569993 6.84328 0.497134 7.1949 0.499957 7.55V14.8333C0.499957 15.4964 0.763349 16.1323 1.23219 16.6011C1.70103 17.0699 2.33692 17.3333 2.99996 17.3333H13C13.663 17.3333 14.2989 17.0699 14.7677 16.6011C15.2366 16.1323 15.5 15.4964 15.5 14.8333V7.54167C15.5016 7.18797 15.4282 6.83795 15.2845 6.51474C15.1409 6.19152 14.9303 5.90246 14.6666 5.66667V5.66667ZM9.66662 15.6667H6.33329V11.5C6.33329 11.279 6.42109 11.067 6.57737 10.9107C6.73365 10.7545 6.94561 10.6667 7.16662 10.6667H8.83329C9.0543 10.6667 9.26626 10.7545 9.42255 10.9107C9.57883 11.067 9.66662 11.279 9.66662 11.5V15.6667ZM13.8333 14.8333C13.8333 15.0543 13.7455 15.2663 13.5892 15.4226C13.4329 15.5789 13.221 15.6667 13 15.6667H11.3333V11.5C11.3333 10.837 11.0699 10.2011 10.6011 9.73223C10.1322 9.26339 9.49633 9 8.83329 9H7.16662C6.50358 9 5.8677 9.26339 5.39886 9.73223C4.93002 10.2011 4.66662 10.837 4.66662 11.5V15.6667H2.99996C2.77894 15.6667 2.56698 15.5789 2.4107 15.4226C2.25442 15.2663 2.16662 15.0543 2.16662 14.8333V7.54167C2.16677 7.42335 2.19212 7.30641 2.24097 7.19865C2.28982 7.09089 2.36107 6.99476 2.44996 6.91667L7.44996 2.54167C7.60203 2.40807 7.79753 2.33439 7.99996 2.33439C8.20238 2.33439 8.39788 2.40807 8.54996 2.54167L13.55 6.91667C13.6388 6.99476 13.7101 7.09089 13.7589 7.19865C13.8078 7.30641 13.8331 7.42335 13.8333 7.54167V14.8333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Start</span>
        </a>
        <span class="inline-block mx-4">
          <svg class="h-2 w-2 text-gray-500" 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.875249C0.799483 0.718985 1.01142 0.631196 1.23241 0.631195C1.4534 0.631194 1.66534 0.718982 1.82161 0.875245L5.35676 4.41084C5.43416 4.48819 5.49556 4.58005 5.53745 4.68114C5.57934 4.78224 5.6009 4.8906 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.20229 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" href="#">
          <span class="inline-block mr-2">
            <svg class="h-4 w-4 text-indigo-500" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99992 10.8333H1.66659C1.44557 10.8333 1.23361 10.9211 1.07733 11.0774C0.921049 11.2337 0.833252 11.4457 0.833252 11.6667V18.3333C0.833252 18.5544 0.921049 18.7663 1.07733 18.9226C1.23361 19.0789 1.44557 19.1667 1.66659 19.1667H4.99992C5.22093 19.1667 5.43289 19.0789 5.58917 18.9226C5.74545 18.7663 5.83325 18.5544 5.83325 18.3333V11.6667C5.83325 11.4457 5.74545 11.2337 5.58917 11.0774C5.43289 10.9211 5.22093 10.8333 4.99992 10.8333ZM4.16658 17.5H2.49992V12.5H4.16658V17.5ZM18.3333 7.50001H14.9999C14.7789 7.50001 14.5669 7.5878 14.4107 7.74408C14.2544 7.90036 14.1666 8.11233 14.1666 8.33334V18.3333C14.1666 18.5544 14.2544 18.7663 14.4107 18.9226C14.5669 19.0789 14.7789 19.1667 14.9999 19.1667H18.3333C18.5543 19.1667 18.7662 19.0789 18.9225 18.9226C19.0788 18.7663 19.1666 18.5544 19.1666 18.3333V8.33334C19.1666 8.11233 19.0788 7.90036 18.9225 7.74408C18.7662 7.5878 18.5543 7.50001 18.3333 7.50001ZM17.4999 17.5H15.8333V9.16667H17.4999V17.5ZM11.6666 0.83334H8.33325C8.11224 0.83334 7.90028 0.921137 7.744 1.07742C7.58772 1.2337 7.49992 1.44566 7.49992 1.66667V18.3333C7.49992 18.5544 7.58772 18.7663 7.744 18.9226C7.90028 19.0789 8.11224 19.1667 8.33325 19.1667H11.6666C11.8876 19.1667 12.0996 19.0789 12.2558 18.9226C12.4121 18.7663 12.4999 18.5544 12.4999 18.3333V1.66667C12.4999 1.44566 12.4121 1.2337 12.2558 1.07742C12.0996 0.921137 11.8876 0.83334 11.6666 0.83334ZM10.8333 17.5H9.16658V2.50001H10.8333V17.5Z" fill="currentColor"></path>
            </svg>
          </span>

<section class="py-8 px-6 bg-white">
  <div class="flex flex-wrap items-center">
    <div class="mb-5 lg:mb-0">
      <h2 class="mb-1 text-2xl font-bold">Statistics</h2>
      <div class="flex items-center">
        <a class="flex items-center text-sm text-gray-500" href="#">
          <span class="inline-block mr-2">
            <svg class="h-4 w-4 text-gray-500" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6666 5.66667L9.66662 1.28333C9.20827 0.873372 8.6149 0.646725 7.99996 0.646725C7.38501 0.646725 6.79164 0.873372 6.33329 1.28333L1.33329 5.66667C1.0686 5.9034 0.857374 6.1938 0.713683 6.51854C0.569993 6.84328 0.497134 7.1949 0.499957 7.55V14.8333C0.499957 15.4964 0.763349 16.1323 1.23219 16.6011C1.70103 17.0699 2.33692 17.3333 2.99996 17.3333H13C13.663 17.3333 14.2989 17.0699 14.7677 16.6011C15.2366 16.1323 15.5 15.4964 15.5 14.8333V7.54167C15.5016 7.18797 15.4282 6.83795 15.2845 6.51474C15.1409 6.19152 14.9303 5.90246 14.6666 5.66667V5.66667ZM9.66662 15.6667H6.33329V11.5C6.33329 11.279 6.42109 11.067 6.57737 10.9107C6.73365 10.7545 6.94561 10.6667 7.16662 10.6667H8.83329C9.0543 10.6667 9.26626 10.7545 9.42255 10.9107C9.57883 11.067 9.66662 11.279 9.66662 11.5V15.6667ZM13.8333 14.8333C13.8333 15.0543 13.7455 15.2663 13.5892 15.4226C13.4329 15.5789 13.221 15.6667 13 15.6667H11.3333V11.5C11.3333 10.837 11.0699 10.2011 10.6011 9.73223C10.1322 9.26339 9.49633 9 8.83329 9H7.16662C6.50358 9 5.8677 9.26339 5.39886 9.73223C4.93002 10.2011 4.66662 10.837 4.66662 11.5V15.6667H2.99996C2.77894 15.6667 2.56698 15.5789 2.4107 15.4226C2.25442 15.2663 2.16662 15.0543 2.16662 14.8333V7.54167C2.16677 7.42335 2.19212 7.30641 2.24097 7.19865C2.28982 7.09089 2.36107 6.99476 2.44996 6.91667L7.44996 2.54167C7.60203 2.40807 7.79753 2.33439 7.99996 2.33439C8.20238 2.33439 8.39788 2.40807 8.54996 2.54167L13.55 6.91667C13.6388 6.99476 13.7101 7.09089 13.7589 7.19865C13.8078 7.30641 13.8331 7.42335 13.8333 7.54167V14.8333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Start</span>
        </a>
        <span class="inline-block mx-4">
          <svg class="h-2 w-2 text-gray-500" 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.875249C0.799483 0.718985 1.01142 0.631196 1.23241 0.631195C1.4534 0.631194 1.66534 0.718982 1.82161 0.875245L5.35676 4.41084C5.43416 4.48819 5.49556 4.58005 5.53745 4.68114C5.57934 4.78224 5.6009 4.8906 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.20229 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" href="#">
          <span class="inline-block mr-2">
            <svg class="h-4 w-4 text-indigo-500" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99992 10.8333H1.66659C1.44557 10.8333 1.23361 10.9211 1.07733 11.0774C0.921049 11.2337 0.833252 11.4457 0.833252 11.6667V18.3333C0.833252 18.5544 0.921049 18.7663 1.07733 18.9226C1.23361 19.0789 1.44557 19.1667 1.66659 19.1667H4.99992C5.22093 19.1667 5.43289 19.0789 5.58917 18.9226C5.74545 18.7663 5.83325 18.5544 5.83325 18.3333V11.6667C5.83325 11.4457 5.74545 11.2337 5.58917 11.0774C5.43289 10.9211 5.22093 10.8333 4.99992 10.8333ZM4.16658 17.5H2.49992V12.5H4.16658V17.5ZM18.3333 7.50001H14.9999C14.7789 7.50001 14.5669 7.5878 14.4107 7.74408C14.2544 7.90036 14.1666 8.11233 14.1666 8.33334V18.3333C14.1666 18.5544 14.2544 18.7663 14.4107 18.9226C14.5669 19.0789 14.7789 19.1667 14.9999 19.1667H18.3333C18.5543 19.1667 18.7662 19.0789 18.9225 18.9226C19.0788 18.7663 19.1666 18.5544 19.1666 18.3333V8.33334C19.1666 8.11233 19.0788 7.90036 18.9225 7.74408C18.7662 7.5878 18.5543 7.50001 18.3333 7.50001ZM17.4999 17.5H15.8333V9.16667H17.4999V17.5ZM11.6666 0.83334H8.33325C8.11224 0.83334 7.90028 0.921137 7.744 1.07742C7.58772 1.2337 7.49992 1.44566 7.49992 1.66667V18.3333C7.49992 18.5544 7.58772 18.7663 7.744 18.9226C7.90028 19.0789 8.11224 19.1667 8.33325 19.1667H11.6666C11.8876 19.1667 12.0996 19.0789 12.2558 18.9226C12.4121 18.7663 12.4999 18.5544 12.4999 18.3333V1.66667C12.4999 1.44566 12.4121 1.2337 12.2558 1.07742C12.0996 0.921137 11.8876 0.83334 11.6666 0.83334ZM10.8333 17.5H9.16658V2.50001H10.8333V17.5Z" fill="currentColor"></path>
            </svg>
          </span>

<section class="pt-8 px-6" x-data="{ tab: ''}" x-init="tab = $refs.tab1.textContent">
  <h2 class="mb-4 text-2xl font-bold">Project Name</h2>
  <div class="flex flex-wrap text-sm text-center">
    <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-300 hover:border-gray-300 border-transparent': tab != $refs.tab1.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 border-b-2 border-indigo-500 text-indigo-500" href="#">General</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-300 border-transparent': tab != $refs.tab2.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Customers</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-300 border-transparent': tab != $refs.tab3.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Sales</a>
    <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab4.textContent, 'text-gray-300 border-transparent': tab != $refs.tab4.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Returns</a>
  </div>
</section>

<section class="pt-8 px-6 bg-white" x-data="{ tab: ''}" x-init="tab = $refs.tab1.textContent">
  <h2 class="mb-4 text-2xl font-bold">Project Name</h2>
  <div class="flex flex-wrap text-sm text-center">
    <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-300 hover:border-gray-300 border-transparent': tab != $refs.tab1.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 border-b-2 border-indigo-500 text-indigo-500" href="#">General</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-300 border-transparent': tab != $refs.tab2.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Customers</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-300 border-transparent': tab != $refs.tab3.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Sales</a>
    <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab4.textContent, 'text-gray-300 border-transparent': tab != $refs.tab4.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Returns</a>
  </div>
</section>