Tailwind Components in Dashy library

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pt-6 pb-4 bg-neutral-50 border border-neutral-100 rounded-xl">
      <div class="px-8">
        <h3 class="font-heading mb-6 text-lg text-neutral-600 font-semibold">Profile Info</h3>
        <div class="w-full overflow-x-auto">
          <table class="w-full min-w-max">
            <tbody>
              <tr>
                <td class="py-2">
                  <div class="flex flex-wrap items-center">
                    <svg class="mr-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M2.66603 5.37596C2.32138 5.1462 1.85573 5.23933 1.62596 5.58397C1.3962 5.92862 1.48933 6.39427 1.83397 6.62404L2.66603 5.37596ZM8.16795 9.9453L7.75192 10.5693V10.5693L8.16795 9.9453ZM9.83205 9.9453L9.41603 9.32126L9.83205 9.9453ZM16.166 6.62404C16.5107 6.39427 16.6038 5.92862 16.374 5.58397C16.1443 5.23933 15.6786 5.1462 15.334 5.37596L16.166 6.62404ZM3.75 4.5H14.25V3H3.75V4.5ZM15 5.25V12.75H16.5V5.25H15ZM14.25 13.5H3.75V15H14.25V13.5ZM3 12.75V5.25H1.5V12.75H3ZM3.75 13.5C3.33579 13.5 3 13.1642 3 12.75H1.5C1.5 13.9926 2.50736 15 3.75 15V13.5ZM15 12.75C15 13.1642 14.6642 13.5 14.25 13.5V15C15.4926 15 16.5 13.9926 16.5 12.75H15ZM14.25 4.5C14.6642 4.5 15 4.83579 15 5.25H16.5C16.5 4.00736 15.4926 3 14.25 3V4.5ZM3.75 3C2.50736 3 1.5 4.00736 1.5 5.25H3C3 4.83579 3.33579 4.5 3.75 4.5V3ZM1.83397 6.62404L7.75192 10.5693L8.58397 9.32126L2.66603 5.37596L1.83397 6.62404ZM10.2481 10.5693L16.166 6.62404L15.334 5.37596L9.41603 9.32126L10.2481 10.5693ZM7.75192 10.5693C8.5077 11.0732 9.4923 11.0732 10.2481 10.5693L9.41603 9.32126C9.1641 9.48921 8.8359 9.48921 8.58397 9.32126L7.75192 10.5693Z" fill="#7F8995"></path>
                    </svg>
                    <span class="font-medium">john@mail.com</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="flex flex-wrap items-center">
                    <svg class="mr-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M2.66603 5.37596C2.32138 5.1462 1.85573 5.23933 1.62596 5.58397C1.3962 5.92862 1.48933 6.39427 1.83397 6.62404L2.66603 5.37596ZM8.16795 9.9453L7.75192 10.5693V10.5693L8.16795 9.9453ZM9.83205 9.9453L9.41603 9.32126L9.83205 9.9453ZM16.166 6.62404C16.5107 6.39427 16.6038 5.92862 16.374 5.58397C16.1443 5.23933 15.6786 5.1462 15.334 5.37596L16.166 6.62404ZM3.75 4.5H14.25V3H3.75V4.5ZM15 5.25V12.75H16.5V5.25H15ZM14.25 13.5H3.75V15H14.25V13.5ZM3 12.75V5.25H1.5V12.75H3ZM3.75 13.5C3.33579 13.5 3 13.1642 3 12.75H1.5C1.5 13.9926 2.50736 15 3.75 15V13.5ZM15 12.75C15 13.1642 14.6642 13.5 14.25 13.5V15C15.4926 15 16.5 13.9926 16.5 12.75H15ZM14.25 4.5C14.6642 4.5 15 4.83579 15 5.25H16.5C16.5 4.00736 15.4926 3 14.25 3V4.5ZM3.75 3C2.50736 3 1.5 4.00736 1.5 5.25H3C3 4.83579 3.33579 4.5 3.75 4.5V3ZM1.83397 6.62404L7.75192 10.5693L8.58397 9.32126L2.66603 5.37596L1.83397 6.62404ZM10.2481 10.5693L16.166 6.62404L15.334 5.37596L9.41603 9.32126L10.2481 10.5693ZM7.75192 10.5693C8.5077 11.0732 9.4923 11.0732 10.2481 10.5693L9.41603 9.32126C9.1641 9.48921 8.8359 9.48921 8.58397 9.32126L7.75192 10.5693Z" fill="#7F8995"></path>
                    </svg>
                    <span class="font-medium">+1-394-596-3550</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="flex flex-wrap">
                    <svg class="mr-3 mt-0.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9.75 7.5V2.25L3 10.5H8.25L8.25 15.75L15 7.5L9.75 7.5Z" stroke="#7F8995" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <div class="flex flex-col flex-wrap">
                      <span class="mb-1 text-neutral-500 font-medium">Las Login</span>
                      <span class="text-neutral-600 font-medium">3:07 am, 20 Mar 2022</span>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="py-2">
                  <div class="flex flex-wrap">
                    <svg class="mr-3 mt-0.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9.75 6C9.75 5.58579 9.41421 5.25 9 5.25C8.58579 5.25 8.25 5.58579 8.25 6H9.75ZM9 9H8.25C8.25 9.19891 8.32902 9.38968 8.46967 9.53033L9 9ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM15 9C15 12.3137 12.3137 15 9 15V16.5C13.1421 16.5 16.5 13.1421 16.5 9H15ZM9 15C5.68629 15 3 12.3137 3 9H1.5C1.5 13.1421 4.85786 16.5 9 16.5V15ZM3 9C3 5.68629 5.68629 3 9 3V1.5C4.85786 1.5 1.5 4.85786 1.5 9H3ZM9 3C12.3137 3 15 5.68629 15 9H16.5C16.5 4.85786 13.1421 1.5 9 1.5V3ZM8.25 6V9H9.75V6H8.25ZM8.46967 9.53033L10.7197 11.7803L11.7803 10.7197L9.53033 8.46967L8.46967 9.53033Z" fill="#7F8995"></path>
                    </svg>
                    <div class="flex flex-col flex-wrap">
                      <span class="mb-1 text-neutral-500 font-medium">Registered At</span>
                      <span class="text-neutral-600 font-medium">10:49 am, 14 Mar 2022</span>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h3 class="font-heading mb-7 text-xl font-semibold">Articles from Knowledge Base</h3>
    <div class="flex flex-wrap -m-3">
      <div class="w-full sm:w-1/2 lg:w-1/4 p-3">
        <div class="p-6 pb-7 h-full bg-white border rounded-xl">
          <div class="relative flex justify-center items-center mb-5 h-56 bg-neutral-100 overflow-hidden rounded-md">
            <div class="absolute flex items-center justify-center bg-white w-20 h-20 rounded-full">
              <img src="dashy-assets/images/chart-pie.svg" alt="">
            </div>
          </div>
          <h3 class="font-heading mb-3 text-lg font-semibold">Keeping track of cash and balances</h3>
          <p class="mb-7 text-neutral-500">Account management strategy is a system of main account manager is often ready, interested only in that.</p>
          <a class="inline-flex flex-wrap items-center justify-center px-5 py-3 text-center text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">
            <span class="mr-3 font-medium">Read More</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.33333 3.3335L14 8.00016M14 8.00016L9.33333 12.6668M14 8.00016L2 8.00016" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 p-3">
        <div class="p-6 pb-7 h-full bg-white border rounded-xl">
          <div class="relative flex justify-center items-center mb-5 h-56 bg-neutral-100 overflow-hidden rounded-md">
            <div class="absolute flex items-center justify-center bg-white w-20 h-20 rounded-full">
              <img src="dashy-assets/images/chart-pie.svg" alt="">
            </div>
          </div>
          <h3 class="font-heading mb-3 text-lg font-semibold">Keeping track of cash and balances</h3>
          <p class="mb-7 text-neutral-500">Account management strategy is a system of main account manager is often ready, interested only in that.</p>
          <a class="inline-flex flex-wrap items-center justify-center px-5 py-3 text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
            <span class="mr-3 font-medium">Read More</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.33333 3.3335L14 8.00016M14 8.00016L9.33333 12.6668M14 8.00016L2 8.00016" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 p-3">
        <div class="p-6 pb-7 h-full bg-white border rounded-xl">
          <div class="relative flex justify-center items-center mb-5 h-56 bg-neutral-100 overflow-hidden rounded-md">
            <div class="absolute flex items-center justify-center bg-white w-20 h-20 rounded-full">
              <img src="dashy-assets/images/chart-pie.svg" alt="">
            </div>
          </div>
          <h3 class="font-heading mb-3 text-lg font-semibold">Keeping track of cash and balances</h3>
          <p class="mb-7 text-neutral-500">Account management strategy is a system of main account manager is often ready, interested only in that.</p>
          <a class="inline-flex flex-wrap items-center justify-center px-5 py-3 text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
            <span class="mr-3 font-medium">Read More</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.33333 3.3335L14 8.00016M14 8.00016L9.33333 12.6668M14 8.00016L2 8.00016" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 p-3">
        <div class="p-6 pb-7 h-full bg-white border rounded-xl">
          <div class="relative flex justify-center items-center mb-5 h-56 bg-neutral-100 overflow-hidden rounded-md">
            <div class="absolute flex items-center justify-center bg-white w-20 h-20 rounded-full">
              <img src="dashy-assets/images/chart-pie.svg" alt="">
            </div>
          </div>
          <h3 class="font-heading mb-3 text-lg font-semibold">Keeping track of cash and balances</h3>
          <p class="mb-7 text-neutral-500">Account management strategy is a system of main account manager is often ready, interested only in that.</p>
          <a class="inline-flex flex-wrap items-center justify-center px-5 py-3 text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
            <span class="mr-3 font-medium">Read More</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.33333 3.3335L14 8.00016M14 8.00016L9.33333 12.6668M14 8.00016L2 8.00016" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Add Image</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex flex-wrap sm:max-w-md ml-auto">
            <div class="w-full sm:flex-1 mb-2.5 sm:mb-0">
              <input class="py-2.5 px-3.5 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400 border border-neutral-200 sm:border-r-0 rounded-lg sm:rounded-tr-none sm:rounded-br-none focus-within:border-neutral-600" id="inputsInput9-1" type="text" placeholder="Click to select a file or drag and drop">
            </div>
            <div class="w-full sm:w-auto"><a class="inline-flex items-center justify-center px-3.5 py-2.5 text-sm w-full h-full text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300 sm:rounded-tl-none sm:rounded-bl-none" href="#">Upload</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 pb-2 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between mb-8 -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Planned vs. Actuals</h3>
        </div>
        <div class="w-auto p-2">
          <div class="relative h-full overflow-hidden border border-neutral-200 rounded-lg">
            <select class="appearance-none py-1.5 pl-3.5 pr-10 text-sm text-neutral-400 w-full h-full bg-white outline-none cursor-pointer">
              <option value="USD">Last 7 days</option>
              <option value="CHF">Last month</option>
              <option value="EUR">Last year</option>
            </select>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.8327 7.5L9.99935 13.3333L4.16602 7.5" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="chart" data-type="area-graph9"></div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 pb-7 bg-white border rounded-xl">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Income Amount</h3>
        </div>
        <div class="w-auto p-2">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 3.75C10 3.19772 9.55228 2.75 9 2.75C8.44772 2.75 8 3.19772 8 3.75L10 3.75ZM8 3.7575C8 4.30978 8.44771 4.7575 9 4.7575C9.55228 4.7575 10 4.30978 10 3.7575L8 3.7575ZM10 9C10 8.44772 9.55228 8 9 8C8.44771 8 8 8.44772 8 9L10 9ZM8 9.0075C8 9.55978 8.44771 10.0075 9 10.0075C9.55228 10.0075 10 9.55978 10 9.0075L8 9.0075ZM10 14.25C10 13.6977 9.55228 13.25 9 13.25C8.44771 13.25 8 13.6977 8 14.25L10 14.25ZM8 14.2575C8 14.8098 8.44771 15.2575 9 15.2575C9.55228 15.2575 10 14.8098 10 14.2575L8 14.2575ZM9 3.5C9.13807 3.5 9.25 3.61193 9.25 3.75L7.25 3.75C7.25 4.7165 8.0335 5.5 9 5.5L9 3.5ZM9.25 3.75C9.25 3.88807 9.13807 4 9 4L9 2C8.0335 2 7.25 2.7835 7.25 3.75L9.25 3.75ZM9 4C8.86193 4 8.75 3.88807 8.75 3.75L10.75 3.75C10.75 2.7835 9.9665 2 9 2L9 4ZM8.75 3.75C8.75 3.61193 8.86193 3.5 9 3.5L9 5.5C9.9665 5.5 10.75 4.7165 10.75 3.75L8.75 3.75ZM9 8.75C9.13807 8.75 9.25 8.86193 9.25 9L7.25 9C7.25 9.9665 8.0335 10.75 9 10.75L9 8.75ZM9.25 9C9.25 9.13807 9.13807 9.25 9 9.25L9 7.25C8.0335 7.25 7.25 8.0335 7.25 9L9.25 9ZM9 9.25C8.86193 9.25 8.75 9.13807 8.75 9L10.75 9C10.75 8.0335 9.9665 7.25 9 7.25L9 9.25ZM8.75 9C8.75 8.86193 8.86193 8.75 9 8.75L9 10.75C9.9665 10.75 10.75 9.9665 10.75 9L8.75 9ZM9 14C9.13807 14 9.25 14.1119 9.25 14.25L7.25 14.25C7.25 15.2165 8.0335 16 9 16L9 14ZM9.25 14.25C9.25 14.3881 9.13807 14.5 9 14.5L9 12.5C8.0335 12.5 7.25 13.2835 7.25 14.25L9.25 14.25ZM9 14.5C8.86193 14.5 8.75 14.3881 8.75 14.25L10.75 14.25C10.75 13.2835 9.9665 12.5 9 12.5L9 14.5ZM8.75 14.25C8.75 14.1119 8.86193 14 9 14L9 16C9.9665 16 10.75 15.2165 10.75 14.25L8.75 14.25ZM8 3.75L8 3.7575L10 3.7575L10 3.75L8 3.75ZM8 9L8 9.0075L10 9.0075L10 9L8 9ZM8 14.25L8 14.2575L10 14.2575L10 14.25L8 14.25Z" fill="#B8C1CC"></path>
          </svg>
        </div>
      </div>
      <div class="chart" data-type="bar-graph10"></div>
      <div class="flex flex-wrap -m-8">
        <div class="w-auto p-8">
          <p class="mb-1 text-sm text-neutral-400 font-medium">Target</p>
          <div class="flex items-center">
            <svg class="mr-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.75 4.5C9.33579 4.5 9 4.83579 9 5.25C9 5.66421 9.33579 6 9.75 6V4.5ZM15.75 5.25H16.5C16.5 4.83579 16.1642 4.5 15.75 4.5V5.25ZM15 11.25C15 11.6642 15.3358 12 15.75 12C16.1642 12 16.5 11.6642 16.5 11.25H15ZM1.71967 12.2197C1.42678 12.5126 1.42678 12.9874 1.71967 13.2803C2.01256 13.5732 2.48744 13.5732 2.78033 13.2803L1.71967 12.2197ZM6.75 8.25L7.28033 7.71967C6.98744 7.42678 6.51256 7.42678 6.21967 7.71967L6.75 8.25ZM9.75 11.25L9.21967 11.7803C9.51256 12.0732 9.98744 12.0732 10.2803 11.7803L9.75 11.25ZM9.75 6H15.75V4.5H9.75V6ZM15 5.25V11.25H16.5V5.25H15ZM2.78033 13.2803L7.28033 8.78033L6.21967 7.71967L1.71967 12.2197L2.78033 13.2803ZM6.21967 8.78033L9.21967 11.7803L10.2803 10.7197L7.28033 7.71967L6.21967 8.78033ZM10.2803 11.7803L16.2803 5.78033L15.2197 4.71967L9.21967 10.7197L10.2803 11.7803Z" fill="#564AF7"></path>
            </svg>
            <p class="font-semibold">245</p>
          </div>
        </div>
        <div class="w-auto p-8">
          <p class="mb-1 text-sm text-neutral-400 font-medium">Last week</p>
          <div class="flex items-center">
            <svg class="mr-1" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.66667 7.58341C7.25245 7.58341 6.91667 7.9192 6.91667 8.33341C6.91667 8.74763 7.25245 9.08341 7.66667 9.08341V7.58341ZM13 8.33341V9.08341C13.4142 9.08341 13.75 8.74763 13.75 8.33341H13ZM13.75 3.00008C13.75 2.58587 13.4142 2.25008 13 2.25008C12.5858 2.25008 12.25 2.58587 12.25 3.00008H13.75ZM1.53033 1.13642C1.23744 0.843525 0.762563 0.843525 0.46967 1.13642C0.176777 1.42931 0.176777 1.90418 0.46967 2.19708L1.53033 1.13642ZM5 5.66675L4.46967 6.19708C4.76256 6.48997 5.23744 6.48997 5.53033 6.19708L5 5.66675ZM7.66667 3.00008L8.197 2.46975C7.9041 2.17686 7.42923 2.17686 7.13634 2.46975L7.66667 3.00008ZM7.66667 9.08341H13V7.58341H7.66667V9.08341ZM13.75 8.33341V3.00008H12.25V8.33341H13.75ZM0.46967 2.19708L4.46967 6.19708L5.53033 5.13642L1.53033 1.13642L0.46967 2.19708ZM5.53033 6.19708L8.197 3.53041L7.13634 2.46975L4.46967 5.13642L5.53033 6.19708ZM7.13634 3.53041L12.4697 8.86374L13.5303 7.80308L8.197 2.46975L7.13634 3.53041Z" fill="#FF3131"></path>
            </svg>
            <p class="font-semibold">891</p>
          </div>
        </div>
        <div class="w-auto p-8">
          <p class="mb-1 text-sm text-neutral-400 font-medium">Last month</p>
          <div class="flex items-center">
            <svg class="mr-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.75 4.5C9.33579 4.5 9 4.83579 9 5.25C9 5.66421 9.33579 6 9.75 6V4.5ZM15.75 5.25H16.5C16.5 4.83579 16.1642 4.5 15.75 4.5V5.25ZM15 11.25C15 11.6642 15.3358 12 15.75 12C16.1642 12 16.5 11.6642 16.5 11.25H15ZM1.71967 12.2197C1.42678 12.5126 1.42678 12.9874 1.71967 13.2803C2.01256 13.5732 2.48744 13.5732 2.78033 13.2803L1.71967 12.2197ZM6.75 8.25L7.28033 7.71967C6.98744 7.42678 6.51256 7.42678 6.21967 7.71967L6.75 8.25ZM9.75 11.25L9.21967 11.7803C9.51256 12.0732 9.98744 12.0732 10.2803 11.7803L9.75 11.25ZM9.75 6H15.75V4.5H9.75V6ZM15 5.25V11.25H16.5V5.25H15ZM2.78033 13.2803L7.28033 8.78033L6.21967 7.71967L1.71967 12.2197L2.78033 13.2803ZM6.21967 8.78033L9.21967 11.7803L10.2803 10.7197L7.28033 7.71967L6.21967 8.78033ZM10.2803 11.7803L16.2803 5.78033L15.2197 4.71967L9.21967 10.7197L10.2803 11.7803Z" fill="#564AF7"></path>
            </svg>
            <p class="font-semibold">137</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Activate Auto Payment?</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5"><a class="text-sm" href="#">Off</a></div>
            <div class="w-auto p-1.5" x-data="{ toggle: false }">
              <a x-on:click.prevent="toggle = !toggle" class="flex items-center justify-start p-0.5 w-9 h-5 bg-neutral-200 rounded-full" href="#">
                <span :class="{'left-4': toggle}" class="relative inline-block w-4 h-4 bg-white rounded-full"></span>
              </a>
            </div>
            <div class="w-auto p-1.5"><a class="text-sm" href="#">On</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-lg">
      <div class="flex flex-wrap -m-2.5">
        <div class="w-full sm:w-1/2 p-2.5">
          <div class="flex flex-col justify-between h-full">
            <div>
              <h3 class="font-heading mb-2 text-lg font-semibold">Payment activity</h3>
              <p class="mb-6 text-neutral-500">It is a long established fact that is a reader will be distracted by content of a page when looking at its layout.</p>
            </div>
            <div class="block">
              <a class="inline-flex flex-wrap items-center justify-center px-5 py-3 text-center text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">
                <span class="mr-3 font-medium">Get Started</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.33333 3.3335L14 8.00016M14 8.00016L9.33333 12.6668M14 8.00016L2 8.00016" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 p-2.5">
          <div class="flex flex-wrap -m-3">
            <div class="w-full sm:w-1/2 p-3">
              <div class="p-3 bg-neutral-100 rounded-lg">
                <div class="flex items-center justify-center mb-4 w-8 h-8 bg-white rounded-full">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.13823 5.57769C8.31921 5.78626 8.635 5.80863 8.84357 5.62765C9.05214 5.44667 9.07451 5.13088 8.89353 4.92231L8.13823 5.57769ZM5.86178 8.42231C5.6808 8.21374 5.36501 8.19137 5.15644 8.37235C4.94787 8.55333 4.9255 8.86912 5.10648 9.07769L5.86178 8.42231ZM7.5 4.08333C7.5 3.80719 7.27614 3.58333 7 3.58333C6.72386 3.58333 6.5 3.80719 6.5 4.08333H7.5ZM6.5 9.91666C6.49999 10.1928 6.72385 10.4167 6.99999 10.4167C7.27613 10.4167 7.49999 10.1928 7.5 9.91668L6.5 9.91666ZM11.75 7C11.75 9.62335 9.62335 11.75 7 11.75V12.75C10.1756 12.75 12.75 10.1756 12.75 7H11.75ZM7 11.75C4.37665 11.75 2.25 9.62335 2.25 7H1.25C1.25 10.1756 3.82436 12.75 7 12.75V11.75ZM2.25 7C2.25 4.37665 4.37665 2.25 7 2.25V1.25C3.82436 1.25 1.25 3.82436 1.25 7H2.25ZM7 2.25C9.62335 2.25 11.75 4.37665 11.75 7H12.75C12.75 3.82436 10.1756 1.25 7 1.25V2.25ZM7 6.5C6.6017 6.5 6.26371 6.39147 6.03991 6.24227C5.81262 6.09074 5.75 5.93631 5.75 5.83333H4.75C4.75 6.37469 5.07913 6.8036 5.48521 7.07432C5.89479 7.34737 6.43181 7.5 7 7.5V6.5ZM5.75 5.83333C5.75 5.73036 5.81262 5.57593 6.03991 5.4244C6.26371 5.2752 6.6017 5.16667 7 5.16667V4.16667C6.43181 4.16667 5.89479 4.3193 5.48521 4.59235C5.07913 4.86307 4.75 5.29198 4.75 5.83333H5.75ZM7 5.16667C7.54442 5.16667 7.95484 5.36634 8.13823 5.57769L8.89353 4.92231C8.47175 4.43623 7.75107 4.16667 7 4.16667V5.16667ZM7 7.5C7.3983 7.5 7.73629 7.60853 7.96009 7.75773C8.1874 7.90927 8.25001 8.06369 8.25001 8.16667H9.25001C9.25001 7.62531 8.92087 7.1964 8.51479 6.92568C8.10521 6.65263 7.56819 6.5 7 6.5V7.5ZM6.5 4.08333V4.66667H7.5V4.08333H6.5ZM6.50001 9.33332L6.5 9.91666L7.5 9.91668L7.50001 9.33334L6.50001 9.33332ZM7.00001 8.83333C6.45559 8.83333 6.04517 8.63366 5.86178 8.42231L5.10648 9.07769C5.52826 9.56377 6.24895 9.83333 7.00001 9.83333L7.00001 8.83333ZM8.25001 8.16667C8.25001 8.26964 8.18739 8.42407 7.9601 8.5756C7.7363 8.7248 7.39832 8.83333 7.00001 8.83333V9.83333C7.56821 9.83333 8.10522 9.6807 8.5148 9.40765C8.92088 9.13693 9.25001 8.70802 9.25001 8.16667H8.25001ZM6.5 4.66667L6.50001 9.33333L7.50001 9.33333L7.5 4.66667L6.5 4.66667Z" fill="#495460"></path>
                  </svg>
                </div>
                <p class="mb-0.5 text-xs font-medium text-neutral-400">Income</p>
                <h3 class="font-heading font-semibold">$38,570</h3>
              </div>
            </div>
            <div class="w-full sm:w-1/2 p-3">
              <div class="p-3 bg-neutral-100 rounded-lg">
                <div class="flex items-center justify-center mb-4 w-8 h-8 bg-white rounded-full">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.25 2.91699L5.60355 2.56344L5.45711 2.41699H5.25V2.91699ZM6.41667 4.08366L6.06311 4.43721L6.20956 4.58366H6.41667V4.08366ZM9.41667 5.83366C9.41667 6.1098 9.64052 6.33366 9.91667 6.33366C10.1928 6.33366 10.4167 6.1098 10.4167 5.83366H9.41667ZM2.25 9.91699V4.08366H1.25V9.91699H2.25ZM2.91667 3.41699H5.25V2.41699H2.91667V3.41699ZM4.89645 3.27055L6.06311 4.43721L6.77022 3.73011L5.60355 2.56344L4.89645 3.27055ZM6.41667 4.58366H8.75V3.58366H6.41667V4.58366ZM8.75 4.58366C9.11819 4.58366 9.41667 4.88214 9.41667 5.25033H10.4167C10.4167 4.32985 9.67048 3.58366 8.75 3.58366V4.58366ZM2.25 4.08366C2.25 3.71547 2.54848 3.41699 2.91667 3.41699V2.41699C1.99619 2.41699 1.25 3.16318 1.25 4.08366H2.25ZM1.25 9.91699C1.25 10.8375 1.99619 11.5837 2.91667 11.5837V10.5837C2.54848 10.5837 2.25 10.2852 2.25 9.91699H1.25ZM9.41667 5.25033V5.83366H10.4167V5.25033H9.41667ZM4.58333 7.00033C4.58333 6.63214 4.88181 6.33366 5.25 6.33366V5.33366C4.32953 5.33366 3.58333 6.07985 3.58333 7.00033H4.58333ZM5.25 6.33366H11.0833V5.33366H5.25V6.33366ZM11.0833 6.33366C11.4515 6.33366 11.75 6.63214 11.75 7.00033H12.75C12.75 6.07985 12.0038 5.33366 11.0833 5.33366V6.33366ZM11.75 7.00033V9.91699H12.75V7.00033H11.75ZM11.75 9.91699C11.75 10.2852 11.4515 10.5837 11.0833 10.5837V11.5837C12.0038 11.5837 12.75 10.8375 12.75 9.91699H11.75ZM11.0833 10.5837H2.91667V11.5837H11.0833V10.5837ZM2.91667 11.5837C3.83714 11.5837 4.58333 10.8375 4.58333 9.91699H3.58333C3.58333 10.2852 3.28486 10.5837 2.91667 10.5837V11.5837ZM4.58333 9.91699V7.00033H3.58333V9.91699H4.58333Z" fill="#495460"></path>
                  </svg>
                </div>
                <p class="mb-0.5 text-xs font-medium text-neutral-400">Down Payment</p>
                <h3 class="font-heading font-semibold">$42,365</h3>
              </div>
            </div>
            <div class="w-full sm:w-1/2 p-3">
              <div class="p-3 bg-neutral-100 rounded-lg">
                <div class="flex items-center justify-center mb-4 w-8 h-8 bg-white rounded-full">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.33333 5.83333V5.33333C2.05719 5.33333 1.83333 5.55719 1.83333 5.83333H2.33333ZM11.6667 5.83333H12.1667C12.1667 5.55719 11.9428 5.33333 11.6667 5.33333V5.83333ZM11.6667 12.25V12.75C11.9428 12.75 12.1667 12.5261 12.1667 12.25H11.6667ZM2.33333 12.25H1.83333C1.83333 12.5261 2.05719 12.75 2.33333 12.75V12.25ZM5.16667 8.16667C5.16667 7.89052 4.94281 7.66667 4.66667 7.66667C4.39052 7.66667 4.16667 7.89052 4.16667 8.16667H5.16667ZM4.16667 9.91667C4.16667 10.1928 4.39052 10.4167 4.66667 10.4167C4.94281 10.4167 5.16667 10.1928 5.16667 9.91667H4.16667ZM7.5 8.16667C7.5 7.89052 7.27614 7.66667 7 7.66667C6.72386 7.66667 6.5 7.89052 6.5 8.16667H7.5ZM6.5 9.91667C6.5 10.1928 6.72386 10.4167 7 10.4167C7.27614 10.4167 7.5 10.1928 7.5 9.91667H6.5ZM9.83333 8.16667C9.83333 7.89052 9.60948 7.66667 9.33333 7.66667C9.05719 7.66667 8.83333 7.89052 8.83333 8.16667H9.83333ZM8.83333 9.91667C8.83333 10.1928 9.05719 10.4167 9.33333 10.4167C9.60948 10.4167 9.83333 10.1928 9.83333 9.91667H8.83333ZM1.75 11.75C1.47386 11.75 1.25 11.9739 1.25 12.25C1.25 12.5261 1.47386 12.75 1.75 12.75V11.75ZM12.25 12.75C12.5261 12.75 12.75 12.5261 12.75 12.25C12.75 11.9739 12.5261 11.75 12.25 11.75V12.75ZM1.75 5.33333C1.47386 5.33333 1.25 5.55719 1.25 5.83333C1.25 6.10948 1.47386 6.33333 1.75 6.33333V5.33333ZM12.25 6.33333C12.5261 6.33333 12.75 6.10948 12.75 5.83333C12.75 5.55719 12.5261 5.33333 12.25 5.33333V6.33333ZM1.54693 3.62643C1.29459 3.73858 1.18094 4.03406 1.29309 4.2864C1.40525 4.53874 1.70073 4.65239 1.95307 4.54024L1.54693 3.62643ZM7 1.75L7.20307 1.29309C7.07379 1.23564 6.92621 1.23564 6.79693 1.29309L7 1.75ZM12.0469 4.54024C12.2993 4.65239 12.5948 4.53874 12.7069 4.2864C12.8191 4.03406 12.7054 3.73858 12.4531 3.62643L12.0469 4.54024ZM2.33333 6.33333H11.6667V5.33333H2.33333V6.33333ZM11.1667 5.83333V12.25H12.1667V5.83333H11.1667ZM11.6667 11.75H2.33333V12.75H11.6667V11.75ZM2.83333 12.25V5.83333H1.83333V12.25H2.83333ZM4.16667 8.16667V9.91667H5.16667V8.16667H4.16667ZM6.5 8.16667V9.91667H7.5V8.16667H6.5ZM8.83333 8.16667V9.91667H9.83333V8.16667H8.83333ZM1.75 12.75H12.25V11.75H1.75V12.75ZM1.75 6.33333H12.25V5.33333H1.75V6.33333ZM1.95307 4.54024L7.20307 2.20691L6.79693 1.29309L1.54693 3.62643L1.95307 4.54024ZM6.79693 2.20691L12.0469 4.54024L12.4531 3.62643L7.20307 1.29309L6.79693 2.20691Z" fill="#495460"></path>
                  </svg>
                </div>
                <p class="mb-0.5 text-xs font-medium text-neutral-400">Bank Debit</p>
                <h3 class="font-heading font-semibold">$28,148</h3>
              </div>
            </div>
            <div class="w-full sm:w-1/2 p-3">
              <div class="p-3 bg-neutral-100 rounded-lg">
                <div class="flex items-center justify-center mb-4 w-8 h-8 bg-white rounded-full">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.75 12.25L1.30279 12.0264C1.21652 12.1989 1.23719 12.4057 1.3559 12.5577C1.4746 12.7097 1.67017 12.7799 1.85847 12.7381L1.75 12.25ZM7 1.75L7.44721 1.52639C7.36252 1.357 7.18939 1.25 7 1.25C6.81061 1.25 6.63748 1.357 6.55279 1.52639L7 1.75ZM12.25 12.25L12.1415 12.7381C12.3298 12.7799 12.5254 12.7097 12.6441 12.5577C12.7628 12.4057 12.7835 12.1989 12.6972 12.0264L12.25 12.25ZM7.5 6.41667C7.5 6.14052 7.27614 5.91667 7 5.91667C6.72386 5.91667 6.5 6.14052 6.5 6.41667H7.5ZM2.19721 12.4736L7.44721 1.97361L6.55279 1.52639L1.30279 12.0264L2.19721 12.4736ZM6.55279 1.97361L11.8028 12.4736L12.6972 12.0264L7.44721 1.52639L6.55279 1.97361ZM12.3585 11.7619L7.10847 10.5952L6.89153 11.5714L12.1415 12.7381L12.3585 11.7619ZM6.89153 10.5952L1.64153 11.7619L1.85847 12.7381L7.10847 11.5714L6.89153 10.5952ZM7.5 11.0833V6.41667H6.5V11.0833H7.5Z" fill="#495460"></path>
                  </svg>
                </div>
                <p class="mb-0.5 text-xs font-medium text-neutral-400">Money Transfer</p>
                <h3 class="font-heading font-semibold">$10,674</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Why do you want to use Dashy?</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex mb-5">
            <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox11-1" checked="" type="checkbox">
            <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
              <svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <label class="text-sm font-medium" for="inputsCheckbox11-1">For Marketing</label>
          </div>
          <div class="flex mb-5">
            <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox11-2" checked="" type="checkbox">
            <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
              <svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <label class="text-sm font-medium" for="inputsCheckbox11-2">For SaaS</label>
          </div>
          <div class="flex">
            <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox11-3" type="checkbox">
            <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
              <svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <label class="text-sm font-medium" for="inputsCheckbox11-3">For Own Software</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <h3 class="font-heading text-lg font-semibold">Area chart combination</h3>
      <div class="chart mb-4" data-type="line-graph11"></div>
      <div class="border">
        <div class="flex flex-wrap divide-y">
          <div class="w-full px-3 py-2.5">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-xs font-medium">Growth</p>
              </div>
              <div class="w-auto p-2">
                <p class="text-xs font-medium">
                  <span>$25,973</span>
                  <span class="text-neutral-400">(12.05%)</span>
                </p>
              </div>
            </div>
          </div>
          <div class="w-full px-3 py-2.5">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-xs font-medium">Revenue</p>
              </div>
              <div class="w-auto p-2">
                <p class="text-xs font-medium">
                  <span>$35,731</span>
                  <span class="text-neutral-400">(12.05%)</span>
                </p>
              </div>
            </div>
          </div>
          <div class="w-full px-3 py-2.5">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-xs font-medium">Expenses</p>
              </div>
              <div class="w-auto p-2">
                <p class="text-xs font-medium">
                  <span>$10,420</span>
                  <span class="text-neutral-400">(10.09%)</span>
                </p>
              </div>
            </div>
          </div>
          <div class="w-full px-3 py-2.5">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-xs font-medium">Final</p>
              </div>
              <div class="w-auto p-2">
                <p class="text-xs font-medium">
                  <span>$8,227</span>
                  <span class="text-neutral-400">(12.65%)</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-8 py-6 bg-white overflow-hidden border rounded-xl">
      <div class="flex flex-wrap items-center -m-2">
        <div class="w-full md:w-1/2 p-2">
          <h3 class="font-heading mb-1.5 text-lg font-semibold">Premium plan</h3>
          <p class="text-neutral-500">You’re on the Premium plan. Your subscription will be automatically renewed on June 1, 2022.</p>
        </div>
        <div class="w-full md:w-1/2 p-2">
          <div class="flex flex-wrap md:justify-end">
            <div class="w-auto"><a class="inline-flex flex-wrap items-center justify-center px-5 py-2.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">Change Plans</a></div>
            <div class="w-auto"><a class="inline-flex flex-wrap items-center justify-center px-5 py-2.5 w-full font-medium text-sm text-center text-neutral-400 hover:text-neutral-500 bg-transparent hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-transparent" href="#">Close Account</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Activate Auto Payment?</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="flex flex-wrap -m-2.5">
            <div class="w-auto p-2.5">
              <div class="flex items-center">
                <input class="absolute opacity-0 w-4 h-4" id="default-radio-1" type="radio" value="" name="default-radio">
                <div class="mr-3 p-px bg-transparent border border-neutral-200 rounded-full">
                  <div class="flex items-center justify-center w-4 h-4 bg-white rounded-full">
                    <div class="bg-transparent w-2.5 h-2.5 rounded-full"></div>
                  </div>
                </div>
                <label class="text-sm" for="default-radio-1">Yes</label>
              </div>
            </div>
            <div class="w-auto p-2.5">
              <div class="flex items-center">
                <input class="absolute opacity-0 w-4 h-4" id="default-radio-2" type="radio" value="" name="default-radio">
                <div class="mr-3 p-px bg-transparent border border-neutral-200 rounded-full">
                  <div class="flex items-center justify-center w-4 h-4 bg-white rounded-full">
                    <div class="bg-transparent w-2.5 h-2.5 rounded-full"></div>
                  </div>
                </div>
                <label class="text-sm" for="default-radio-2">No</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between mb-6 -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">New apps spotlight</h3>
        </div>
        <div class="w-auto p-2"><a class="text-xs text-transparent font-semibold uppercase bg-clip-text bg-gradient-purple-left" href="#">View all</a></div>
      </div>
      <div class="flex flex-wrap -m-2.5">
        <div class="w-full sm:w-1/2 p-2.5">
          <div class="p-6 bg-white hover:bg-light border rounded-lg cursor-pointer">
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-12 h-12 bg-white rounded-full">
                  <img src="dashy-assets/images/notion.svg" alt="">
                </div>
              </div>
              <div class="flex-1 p-2">
                <h3 class="font-heading mb-1 font-semibold">Notion</h3>
                <p class="text-xs text-neutral-500">It is a long established fact that is a reader will be distracted by content of a page.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 p-2.5">
          <div class="p-6 bg-white hover:bg-light border rounded-lg cursor-pointer">
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-12 h-12 bg-white border rounded-full">
                  <img src="dashy-assets/images/slack.svg" alt="">
                </div>
              </div>
              <div class="flex-1 p-2">
                <h3 class="font-heading mb-1 font-semibold">Slack</h3>
                <p class="text-xs text-neutral-500">It is a long established fact that is a reader will be distracted by content of a page.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 p-2.5">
          <div class="p-6 bg-white hover:bg-light border rounded-lg cursor-pointer">
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-12 h-12 bg-white border rounded-full">
                  <img src="dashy-assets/images/google-drive.svg" alt="">
                </div>
              </div>
              <div class="flex-1 p-2">
                <h3 class="font-heading mb-1 font-semibold">Notion</h3>
                <p class="text-xs text-neutral-500">It is a long established fact that is a reader will be distracted by content of a page.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 p-2.5">
          <div class="p-6 bg-white hover:bg-light border rounded-lg cursor-pointer">
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <div class="flex items-center justify-center w-12 h-12 bg-white border rounded-full">
                  <img src="dashy-assets/images/whatsapp.svg" alt="">
                </div>
              </div>
              <div class="flex-1 p-2">
                <h3 class="font-heading mb-1 font-semibold">Whatsapp</h3>
                <p class="text-xs text-neutral-500">It is a long established fact that is a reader will be distracted by content of a page.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-6 pt-5 pb-2 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Planned vs. Actuals</h3>
        </div>
        <div class="w-auto p-2">
          <div class="relative h-full overflow-hidden border rounded-lg">
            <select class="appearance-none py-1.5 pl-3.5 pr-10 text-sm font-medium text-neutral-500 w-full h-full bg-white outline-none cursor-pointer">
              <option value="USD">Net Income</option>
              <option value="CHF">Net Income</option>
              <option value="EUR">Net Income</option>
            </select>
            <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#495460" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="chart" data-type="bar-graph12"></div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between mb-5 -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Integrate 100+ Apps</h3>
        </div>
        <div class="w-auto p-2"><a class="text-xs text-transparent font-semibold uppercase bg-clip-text bg-gradient-purple-left" href="#">View all</a></div>
      </div>
      <div class="flex flex-wrap -m-2">
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/wordpress.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">WordPress</h3>
                    <p class="text-xs text-neutral-500">CMS</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/zapier.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">Zapier</h3>
                    <p class="text-xs text-neutral-500">Automation</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/woocommerce.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">WooCommerce</h3>
                    <p class="text-xs text-neutral-500">eCommerce Plugin</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/slack.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">Slack</h3>
                    <p class="text-xs text-neutral-500">Communication</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/notion.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">Notion</h3>
                    <p class="text-xs text-neutral-500">Writing Tool</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/google-drive.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">Google Drive</h3>
                    <p class="text-xs text-neutral-500">Cloud</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/jetpack.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">Jetpack</h3>
                    <p class="text-xs text-neutral-500">Plugins</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/linkedin.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">Linkedin</h3>
                    <p class="text-xs text-neutral-500">Social Media</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-1/3 p-2">
          <div class="p-4 h-full bg-white border hover:border-neutral-200 rounded-lg cursor-pointer">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="dashy-assets/images/tiktok.svg" alt="">
                  </div>
                  <div class="flex-1 p-1.5">
                    <h3 class="font-heading mb-0.5 font-semibold">TikTok</h3>
                    <p class="text-xs text-neutral-500">CMS</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <a class="inline-flex flex-wrap items-center justify-center px-1.5 py-1.5 w-full font-medium text-sm text-center text-neutral-50 hover:text-neutral-100 bg-neutral-600 hover:bg-opacity-95 rounded-lg focus:ring-4 focus:ring-neutral-400" href="#">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.35937 4C9.35937 3.58579 9.02359 3.25 8.60937 3.25C8.19516 3.25 7.85937 3.58579 7.85937 4H9.35937ZM7.85937 12C7.85937 12.4142 8.19516 12.75 8.60937 12.75C9.02359 12.75 9.35937 12.4142 9.35937 12H7.85937ZM12.6094 8.75C13.0236 8.75 13.3594 8.41421 13.3594 8C13.3594 7.58579 13.0236 7.25 12.6094 7.25V8.75ZM4.60938 7.25C4.19516 7.25 3.85938 7.58579 3.85938 8C3.85937 8.41421 4.19516 8.75 4.60937 8.75L4.60938 7.25ZM7.85937 4V8H9.35937V4H7.85937ZM7.85937 8V12H9.35937V8H7.85937ZM12.6094 7.25H8.60937V8.75H12.6094V7.25ZM8.60937 7.25L4.60938 7.25L4.60937 8.75H8.60937L8.60937 7.25Z" fill="#F9FAFB"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 pb-0 bg-white border rounded-xl">
      <h3 class="font-heading text-lg font-semibold">Total Income</h3>
      <div class="chart" data-type="bar-graph13"></div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Analytics Tracking Code</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto">
            <input class="py-2.5 px-3.5 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400 border border-neutral-200 rounded-lg focus-within:border-neutral-600" id="inputsInput13-1" type="text" placeholder="UA-XXXXXXXXXX">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pt-5 px-5 pb-6 bg-white border rounded-xl">
      <h3 class="mb-7 text-lg font-semibold">Add Member to Team</h3>
      <div class="flex flex-wrap -m-3">
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-1.5">
                <div class="w-auto p-1.5">
                  <img class="h-12" src="dashy-assets/images/avatar37.png">
                </div>
                <div class="w-auto p-1.5">
                  <h3 class="font-heading mb-1 font-semibold">Vega-Lite</h3>
                  <p class="text-xs text-neutral-500">Build visualizations</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2"><a class="inline-flex flex-wrap items-center px-6 py-2.5 text-sm font-medium text-neutral-50 font-medium bg-gradient-purple-left hover:bg-gradient-purple-left-dark rounded-lg transition duration-300" href="#">Add</a></div>
          </div>
        </div>
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-1.5">
                <div class="w-auto p-1.5">
                  <img class="h-12" src="dashy-assets/images/avatar38.png">
                </div>
                <div class="w-auto p-1.5">
                  <h3 class="font-heading mb-1 font-semibold">Pivot table</h3>
                  <p class="text-xs text-neutral-500">Summarize records</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2"><a class="inline-flex flex-wrap items-center px-6 py-2.5 text-sm font-medium border hover:border-neutral-200 rounded-lg" href="#">Add</a></div>
          </div>
        </div>
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-1.5">
                <div class="w-auto p-1.5">
                  <img class="h-12" src="dashy-assets/images/avatar39.png">
                </div>
                <div class="w-auto p-1.5">
                  <h3 class="font-heading mb-1 font-semibold">CSV import</h3>
                  <p class="text-xs text-neutral-500">Import CSV files</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2"><a class="inline-flex flex-wrap items-center px-6 py-2.5 text-sm font-medium border hover:border-neutral-200 rounded-lg" href="#">Add</a></div>
          </div>
        </div>
        <div class="w-full p-3">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-1.5">
                <div class="w-auto p-1.5">
                  <img class="h-12" src="dashy-assets/images/avatar37.png">
                </div>
                <div class="w-auto p-1.5">
                  <h3 class="font-heading mb-1 font-semibold">Org chart</h3>
                  <p class="text-xs text-neutral-500">Visualize hierarchical</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2"><a class="inline-flex flex-wrap items-center px-6 py-2.5 text-sm font-medium border hover:border-neutral-200 rounded-lg" href="#">Add</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Phone Number</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto overflow-hidden border border-neutral-200 rounded-lg focus-within:border-neutral-600">
            <div class="flex flex-wrap sm:flex-nowrap sm:divide-x divide-neutral-200">
              <div class="w-full sm:w-auto">
                <div class="relative h-full">
                  <select class="appearance-none py-2 pl-3.5 pr-10 text-sm text-neutral-500 font-medium w-full h-full bg-light outline-none cursor-pointer">
                    <option value="US">US (+1)</option>
                    <option value="US">US (+1)</option>
                    <option value="US">US (+1)</option>
                    <option value="US">US (+1)</option>
                  </select>
                  <svg class="absolute top-1/2 right-4 transform -translate-y-1/2" width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.6673 9L8.00065 13.6667L3.33398 9" stroke="#495460" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </div>
              <div class="w-full sm:flex-1">
                <input class="py-3 px-3.5 text-sm w-full h-full hover:bg-gray-50 outline-none placeholder-neutral-400" id="inputsInput14-1" type="text" placeholder="111-222-3333">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 pb-0 bg-white border rounded-xl">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-auto p-2">
          <h3 class="font-heading text-lg font-semibold">Sessions overview</h3>
        </div>
        <div class="w-auto p-2">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13V11ZM5.01 13C5.56228 13 6.01 12.5523 6.01 12C6.01 11.4477 5.56228 11 5.01 11V13ZM12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13V11ZM12.01 13C12.5623 13 13.01 12.5523 13.01 12C13.01 11.4477 12.5623 11 12.01 11V13ZM19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13V11ZM19.01 13C19.5623 13 20.01 12.5523 20.01 12C20.01 11.4477 19.5623 11 19.01 11V13ZM5 12V14C6.10457 14 7 13.1046 7 12H5ZM5 12H3C3 13.1046 3.89543 14 5 14V12ZM5 12V10C3.89543 10 3 10.8954 3 12H5ZM5 12H7C7 10.8954 6.10457 10 5 10V12ZM12 12V14C13.1046 14 14 13.1046 14 12H12ZM12 12H10C10 13.1046 10.8954 14 12 14V12ZM12 12V10C10.8954 10 10 10.8954 10 12H12ZM12 12H14C14 10.8954 13.1046 10 12 10V12ZM19 12V14C20.1046 14 21 13.1046 21 12H19ZM19 12H17C17 13.1046 17.8954 14 19 14V12ZM19 12V10C17.8954 10 17 10.8954 17 12H19ZM19 12H21C21 10.8954 20.1046 10 19 10V12ZM5 13H5.01V11H5V13ZM12 13H12.01V11H12V13ZM19 13H19.01V11H19V13Z" fill="#7F8995"></path>
          </svg>
        </div>
      </div>
      <div class="chart" data-type="area-graph14"></div>
    </div>
  </div>
</section>

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-full sm:w-1/2 p-2">
          <h3 class="font-heading text-sm font-semibold">Github Account</h3>
        </div>
        <div class="w-full sm:w-1/2 p-2">
          <div class="sm:max-w-md ml-auto">
            <input class="mb-4 py-2.5 px-3.5 text-sm w-full hover:bg-gray-50 outline-none placeholder-neutral-400 border border-neutral-200 rounded-lg focus-within:border-neutral-600" id="inputsInput15-1" type="text">
            <div class="flex">
              <input class="opacity-0 absolute h-5 w-5" id="inputsCheckbox15-1" type="checkbox">
              <div class="flex flex-shrink-0 justify-center items-center w-5 h-5 mr-3 text-neutral-200 bg-white border border-neutral-200 rounded">
                <svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0.603516 3.77075L2.68685 5.85409L7.89518 0.645752" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <label class="text-sm font-medium" for="inputsCheckbox15-1">This is a team account</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>