ComponentsGithub

Components

buttonscardsfootersheroesnavsskeletons
  • About
  • Services
  • Team
  • Contact
Get in touch
<nav class="container px-4 md:px-8 mx-auto flex flex-row items-center h-20">
  <div class="w-10 lg:w-12 mr-auto">
    <a href="#" aria-label="Go to Home page">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
        <path d="M114.992 127.901c.425-1.71-15.4-40.924-23.814-56.015C77.73 47.766 62.86 33.033 54.183 24.422 37.584 7.95 18.584-.738 5.28.05c-14.458.855 5.03 19.736 8.08 22.235 11.481 9.407 28.916 15.394 30.192 19.242.357 1.077-2.206.698-4.678.855-3.497.223-7.229 1.283-7.654 3.421-.425 2.138 4.677 8.98 35.72 29.932 5.364 3.62-1.701-.427-9.355.855-2.337.392-6.379 4.276 5.528 12.828 8.654 6.216 22.601 15.902 31.892 23.09 12.734 9.852 19.74 16.383 19.987 15.394z" fill="currentColor" fill-rule="evenodd"></path>
      </svg>
    </a>
  </div>
  <ul class="hidden md:flex flex-row items-center mr-8">
    <li>
      <a href="#" class="inline-flex p-3 mr-3 font-medium text-opacity-100 border-b-2 transition duration-300 border-cyan-400">About</a>
    </li>
    <li>
      <a href="#" class="inline-flex p-3 mr-3 font-medium text-opacity-80 border-b-2 border-transparent hover:border-current hover:text-opacity-100 transition duration-300 text-gray-50">Services</a>
    </li>
    <li>
      <a href="#" class="inline-flex p-3 mr-3 font-medium text-opacity-80 border-b-2 border-transparent hover:border-current hover:text-opacity-100 transition duration-300 text-gray-50">Team</a>
    </li>
    <li>
      <a href="#" class="inline-flex p-3 mr-3 font-medium text-opacity-80 border-b-2 border-transparent hover:border-current hover:text-opacity-100 transition duration-300 text-gray-50">Contact</a>
    </li>
  </ul>
  <div class="hidden md:inline-flex">
    <a href="#" class="inline-flex py-2 px-6 font-medium border border-current transition duration-200 bg-transparent hover:text-gray-900 hover:bg-gray-50 focus:bg-gray-50 focus:text-gray-900"> Get in touch</a>
  </div>
  <div class="inline-block md:hidden">
    <div class="flex flex-row justify-center items-center max-w-sm mx-auto">
      <button aria-label="Toggle menu" class="relative flex flex-col justify-between w-8 h-6 focus:outline-none">
        <div class="relative rounded-lg bg-current w-8 h-1 transform transition-transform duration-200 ease-in-out"></div>
        <div class="relative rounded-lg bg-current w-8 h-1 my-auto transition-opacity duration-200"></div>
        <div class="relative rounded-lg bg-current w-8 h-1 transform transition-transform duration-200 ease-in-out"></div>
      </button>
    </div>
  </div>
</nav>
  • About
  • Product
  • Pricing
  • Careers
Sign In
<nav class="container px-4 md:px-8 mx-auto flex flex-row justify-center items-center h-20">
  <div class="flex-1 mr-auto">
    <a href="#" aria-label="Go to Home page" class="inline-block w-28 lg:w-32">
      <svg viewBox="0 0 675 128" xmlns="http://www.w3.org/2000/svg">
        <g fill="currentColor" fill-rule="evenodd">
          <path d="M154.736 128.315V35.76H125V8.908h95.795V35.76h-30.448v92.554h-35.611zm112.41-35.332a31.37 31.37 0 00-1.157-.293 34.69 34.69 0 00-7.924-.896c-5.104 0-8.725.627-10.861 1.88-2.137 1.253-3.205 3.372-3.205 6.355 0 1.433.445 2.835 1.335 4.207.89 1.373 2.077 2.507 3.561 3.402s3.116 1.342 4.897 1.342c5.342 0 8.903-.328 10.683-.984 1.78-.657 2.671-1.94 2.671-3.85V92.984zm0-15.258V74.25c0-4.893-1.632-8.414-4.896-10.562-3.265-2.148-7.865-3.222-13.8-3.222-5.46 0-10.861 1.044-16.203 3.133-5.342 2.088-9.497 4.386-12.464 6.892V42.206c2.73-1.79 7.419-3.58 14.066-5.371 6.648-1.79 14.482-2.685 23.504-2.685 2.255 0 5.134.179 8.636.537 3.502.358 7.152 1.104 10.95 2.237 3.799 1.134 7.39 2.895 10.773 5.282s6.113 5.58 8.19 9.577c2.078 3.998 3.117 9.1 3.117 15.307l-.178 42.427c0 4.655-1.662 8.593-4.986 11.816-3.324 3.222-8.31 5.639-14.957 7.25-6.647 1.611-15.016 2.417-25.106 2.417-6.173 0-11.811-.537-16.916-1.611-5.104-1.074-9.526-2.835-13.265-5.281-3.74-2.447-6.618-5.789-8.636-10.025-2.018-4.237-3.027-9.459-3.027-15.665 0-4.893 1.068-9.339 3.205-13.337 2.137-3.998 5.55-7.22 10.239-9.667 4.688-2.447 10.831-3.67 18.429-3.67 3.68 0 7.448.477 11.306 1.432 3.858.955 7.36 2.208 10.506 3.76.527.26 1.031.523 1.513.79zm43.858 50.59V38.983h32.407l.356 89.332h-32.763zm-.356-101.863V3h33.119v23.452h-33.119zm76.799 101.863h-32.05V3h32.05v125.315zm43.68 0h-32.05V3h32.05v125.315zM485.134 131c-15.788 0-27.688-4.058-35.7-12.173-8.013-8.116-12.02-20.35-12.02-36.7 0-17.783 4.007-30.314 12.02-37.594 8.012-7.28 19.912-10.92 35.7-10.92 10.328 0 19.082 1.58 26.264 4.744 7.181 3.162 12.642 8.294 16.381 15.395 3.74 7.102 5.609 16.56 5.609 28.375 0 16.35-4.155 28.584-12.464 36.7-8.31 8.115-20.24 12.173-35.79 12.173zm0-25.421c3.205 0 6.024-.806 8.458-2.417 2.433-1.611 4.333-4.147 5.698-7.608 1.365-3.461 2.047-7.937 2.047-13.427 0-6.564-.682-11.517-2.047-14.858-1.365-3.342-3.265-5.61-5.698-6.803-2.434-1.194-5.253-1.79-8.458-1.79-3.324 0-6.173.596-8.547 1.79-2.374 1.193-4.154 3.46-5.341 6.803-1.187 3.341-1.781 8.294-1.781 14.858 0 8.474 1.335 14.501 4.006 18.081 2.671 3.58 6.559 5.371 11.663 5.371zm95.122-18.995l12.125-49.391h22.791l12.354 50.885 12.753-50.885H675l-30.27 91.122h-28.667L603.575 87.73l-11.906 40.585H563l-30.448-91.122h35.078l12.625 49.39z" fill-rule="nonzero"></path>
          <path d="M114.992 127.901c.425-1.71-15.4-40.924-23.814-56.015C77.73 47.766 62.86 33.033 54.183 24.422 37.584 7.95 18.584-.738 5.28.05c-14.458.855 5.03 19.736 8.08 22.235 11.481 9.407 28.916 15.394 30.192 19.242.357 1.077-2.206.698-4.678.855-3.497.223-7.229 1.283-7.654 3.421-.425 2.138 4.677 8.98 35.72 29.932 5.364 3.62-1.701-.427-9.355.855-2.337.392-6.379 4.276 5.528 12.828 8.654 6.216 22.601 15.902 31.892 23.09 12.734 9.852 19.74 16.383 19.987 15.394z"></path>
        </g>
      </svg>
    </a>
  </div>
  <ul class="hidden md:flex flex-row items-center mx-auto">
    <li>
      <a href="#" class="inline-flex p-3 mr-2 font-medium transition-colors ease-in-out duration-300 hover:text-cyan-400">About </a>
    </li>
    <li>
      <a href="#" class="inline-flex p-3 mr-2 font-medium transition-colors ease-in-out duration-300 hover:text-cyan-400">Product </a>
    </li>
    <li>
      <a href="#" class="inline-flex p-3 mr-2 font-medium transition-colors ease-in-out duration-300 hover:text-cyan-400">Pricing</a>
    </li>
    <li>
      <a href="#" class="inline-flex p-3 mr-2 font-medium transition-colors ease-in-out duration-300 hover:text-cyan-400">Careers</a>
    </li>
  </ul>
  <div class="hidden flex-1 md:flex flex-row justify-end">
    <a href="#" class="inline-flex py-2 px-8 font-medium rounded-xl bg-cyan-400 text-cyan-900 hover:bg-cyan-500 transition ease-in-out duration-300"> Sign In</a>
  </div>
  <div class="inline-block md:hidden">
    <div class="flex flex-row justify-center items-center max-w-sm mx-auto">
      <button aria-label="Toggle menu" class="relative flex flex-col justify-between w-8 h-6 focus:outline-none">
        <div class="relative rounded-lg bg-current w-8 h-1 transform transition-transform duration-200 ease-in-out"></div>
        <div class="relative rounded-lg bg-current w-8 h-1 my-auto transition-opacity duration-200"></div>
        <div class="relative rounded-lg bg-current w-8 h-1 transform transition-transform duration-200 ease-in-out"></div>
      </button>
    </div>
  </div>
</nav>
<nav class="container px-4 md:px-8 mx-auto flex flex-row justify-between items-center h-20">
  <div class="mr-4">
    <a href="#" aria-label="Go to Home page" class="inline-block w-28 lg:w-32">
      <svg viewBox="0 0 675 128" xmlns="http://www.w3.org/2000/svg">
        <g fill="currentColor" fill-rule="evenodd">
          <path d="M154.736 128.315V35.76H125V8.908h95.795V35.76h-30.448v92.554h-35.611zm112.41-35.332a31.37 31.37 0 00-1.157-.293 34.69 34.69 0 00-7.924-.896c-5.104 0-8.725.627-10.861 1.88-2.137 1.253-3.205 3.372-3.205 6.355 0 1.433.445 2.835 1.335 4.207.89 1.373 2.077 2.507 3.561 3.402s3.116 1.342 4.897 1.342c5.342 0 8.903-.328 10.683-.984 1.78-.657 2.671-1.94 2.671-3.85V92.984zm0-15.258V74.25c0-4.893-1.632-8.414-4.896-10.562-3.265-2.148-7.865-3.222-13.8-3.222-5.46 0-10.861 1.044-16.203 3.133-5.342 2.088-9.497 4.386-12.464 6.892V42.206c2.73-1.79 7.419-3.58 14.066-5.371 6.648-1.79 14.482-2.685 23.504-2.685 2.255 0 5.134.179 8.636.537 3.502.358 7.152 1.104 10.95 2.237 3.799 1.134 7.39 2.895 10.773 5.282s6.113 5.58 8.19 9.577c2.078 3.998 3.117 9.1 3.117 15.307l-.178 42.427c0 4.655-1.662 8.593-4.986 11.816-3.324 3.222-8.31 5.639-14.957 7.25-6.647 1.611-15.016 2.417-25.106 2.417-6.173 0-11.811-.537-16.916-1.611-5.104-1.074-9.526-2.835-13.265-5.281-3.74-2.447-6.618-5.789-8.636-10.025-2.018-4.237-3.027-9.459-3.027-15.665 0-4.893 1.068-9.339 3.205-13.337 2.137-3.998 5.55-7.22 10.239-9.667 4.688-2.447 10.831-3.67 18.429-3.67 3.68 0 7.448.477 11.306 1.432 3.858.955 7.36 2.208 10.506 3.76.527.26 1.031.523 1.513.79zm43.858 50.59V38.983h32.407l.356 89.332h-32.763zm-.356-101.863V3h33.119v23.452h-33.119zm76.799 101.863h-32.05V3h32.05v125.315zm43.68 0h-32.05V3h32.05v125.315zM485.134 131c-15.788 0-27.688-4.058-35.7-12.173-8.013-8.116-12.02-20.35-12.02-36.7 0-17.783 4.007-30.314 12.02-37.594 8.012-7.28 19.912-10.92 35.7-10.92 10.328 0 19.082 1.58 26.264 4.744 7.181 3.162 12.642 8.294 16.381 15.395 3.74 7.102 5.609 16.56 5.609 28.375 0 16.35-4.155 28.584-12.464 36.7-8.31 8.115-20.24 12.173-35.79 12.173zm0-25.421c3.205 0 6.024-.806 8.458-2.417 2.433-1.611 4.333-4.147 5.698-7.608 1.365-3.461 2.047-7.937 2.047-13.427 0-6.564-.682-11.517-2.047-14.858-1.365-3.342-3.265-5.61-5.698-6.803-2.434-1.194-5.253-1.79-8.458-1.79-3.324 0-6.173.596-8.547 1.79-2.374 1.193-4.154 3.46-5.341 6.803-1.187 3.341-1.781 8.294-1.781 14.858 0 8.474 1.335 14.501 4.006 18.081 2.671 3.58 6.559 5.371 11.663 5.371zm95.122-18.995l12.125-49.391h22.791l12.354 50.885 12.753-50.885H675l-30.27 91.122h-28.667L603.575 87.73l-11.906 40.585H563l-30.448-91.122h35.078l12.625 49.39z" fill-rule="nonzero"></path>
          <path d="M114.992 127.901c.425-1.71-15.4-40.924-23.814-56.015C77.73 47.766 62.86 33.033 54.183 24.422 37.584 7.95 18.584-.738 5.28.05c-14.458.855 5.03 19.736 8.08 22.235 11.481 9.407 28.916 15.394 30.192 19.242.357 1.077-2.206.698-4.678.855-3.497.223-7.229 1.283-7.654 3.421-.425 2.138 4.677 8.98 35.72 29.932 5.364 3.62-1.701-.427-9.355.855-2.337.392-6.379 4.276 5.528 12.828 8.654 6.216 22.601 15.902 31.892 23.09 12.734 9.852 19.74 16.383 19.987 15.394z"></path>
        </g>
      </svg>
    </a>
  </div>
  <div class="hidden flex-1 md:flex flex-row items-center w-full max-w-sm lg:max-w-md">
    <label for="" class="relative inline-flex w-full">
      <span class="sr-only">Search the site</span>
      <input class="w-full pl-4 pr-16 h-10 border-none rounded-2xl focus:ring-2 bg-gray-800 placeholder-gray-100 focus:ring-cyan-400" type="text" placeholder="Search for anything">
      <button class="transition bg-transparent text-current bg-transparent text-current absolute top-0 right-0 h-full w-12 flex flex-col content-center justify-center rounded-tr-2xl rounded-br-2xl" aria-label="Search for anything">
        <svg aria-hidden="true" data-prefix="fal" data-icon="search" class="svg-inline--fa fa-search fa-w-16 w-4 h-4 self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"></path>
        </svg>
      </button>
    </label>
  </div>
  <div class="hidden relative md:flex flex-row justify-end">
    <span class="relative inline-flex">
      <a href="#" aria-label="View notifications" class="inline-flex relative p-2">
        <svg aria-hidden="true" data-prefix="far" data-icon="bell" class="svg-inline--fa fa-bell fa-w-14 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
          <path fill="currentColor" d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z"></path>
        </svg>
      </a>
      <span class="flex absolute h-2 w-2 top-0 right-0">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
      </span>
    </span>
  </div>
  <div class="flex flex-1 md:hidden flex-row items-center w-full max-w-md">
    <label for="" class="relative inline-flex w-full">
      <span class="sr-only">Search the site</span>
      <input class="w-full pl-4 pr-16 h-10 opacity-0 transform border-none rounded-2xl transition-all bg-gray-800 scale-y-0" type="text" placeholder="Search">
      <button class="transition bg-transparent text-current bg-transparent text-current absolute top-0 right-0 h-full w-12 flex flex-col content-center justify-center rounded-tr-2xl rounded-br-2xl" aria-label="Search">
        <svg aria-hidden="true" data-prefix="fal" data-icon="search" class="svg-inline--fa fa-search fa-w-16 w-4 h-4 self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"></path>
        </svg>
      </button>
    </label>
  </div>
</nav>
  • Home
  • Analytics
  • Projects 3
  • Services
  • Settings
  • Sign out

Gin Sakata

gin@yorozuya.com

<div class="max-w-sm mx-auto grid h-screen">
  <nav class="flex flex-col rounded-2xl py-6 px-4 w-full h-full border-2 border-opacity-70 border-gray-700">
    <div class="mb-12 w-32">
      <a href="#" aria-label="Go to Home page">
        <svg viewBox="0 0 675 128" xmlns="http://www.w3.org/2000/svg">
          <g fill="currentColor" fill-rule="evenodd">
            <path d="M154.736 128.315V35.76H125V8.908h95.795V35.76h-30.448v92.554h-35.611zm112.41-35.332a31.37 31.37 0 00-1.157-.293 34.69 34.69 0 00-7.924-.896c-5.104 0-8.725.627-10.861 1.88-2.137 1.253-3.205 3.372-3.205 6.355 0 1.433.445 2.835 1.335 4.207.89 1.373 2.077 2.507 3.561 3.402s3.116 1.342 4.897 1.342c5.342 0 8.903-.328 10.683-.984 1.78-.657 2.671-1.94 2.671-3.85V92.984zm0-15.258V74.25c0-4.893-1.632-8.414-4.896-10.562-3.265-2.148-7.865-3.222-13.8-3.222-5.46 0-10.861 1.044-16.203 3.133-5.342 2.088-9.497 4.386-12.464 6.892V42.206c2.73-1.79 7.419-3.58 14.066-5.371 6.648-1.79 14.482-2.685 23.504-2.685 2.255 0 5.134.179 8.636.537 3.502.358 7.152 1.104 10.95 2.237 3.799 1.134 7.39 2.895 10.773 5.282s6.113 5.58 8.19 9.577c2.078 3.998 3.117 9.1 3.117 15.307l-.178 42.427c0 4.655-1.662 8.593-4.986 11.816-3.324 3.222-8.31 5.639-14.957 7.25-6.647 1.611-15.016 2.417-25.106 2.417-6.173 0-11.811-.537-16.916-1.611-5.104-1.074-9.526-2.835-13.265-5.281-3.74-2.447-6.618-5.789-8.636-10.025-2.018-4.237-3.027-9.459-3.027-15.665 0-4.893 1.068-9.339 3.205-13.337 2.137-3.998 5.55-7.22 10.239-9.667 4.688-2.447 10.831-3.67 18.429-3.67 3.68 0 7.448.477 11.306 1.432 3.858.955 7.36 2.208 10.506 3.76.527.26 1.031.523 1.513.79zm43.858 50.59V38.983h32.407l.356 89.332h-32.763zm-.356-101.863V3h33.119v23.452h-33.119zm76.799 101.863h-32.05V3h32.05v125.315zm43.68 0h-32.05V3h32.05v125.315zM485.134 131c-15.788 0-27.688-4.058-35.7-12.173-8.013-8.116-12.02-20.35-12.02-36.7 0-17.783 4.007-30.314 12.02-37.594 8.012-7.28 19.912-10.92 35.7-10.92 10.328 0 19.082 1.58 26.264 4.744 7.181 3.162 12.642 8.294 16.381 15.395 3.74 7.102 5.609 16.56 5.609 28.375 0 16.35-4.155 28.584-12.464 36.7-8.31 8.115-20.24 12.173-35.79 12.173zm0-25.421c3.205 0 6.024-.806 8.458-2.417 2.433-1.611 4.333-4.147 5.698-7.608 1.365-3.461 2.047-7.937 2.047-13.427 0-6.564-.682-11.517-2.047-14.858-1.365-3.342-3.265-5.61-5.698-6.803-2.434-1.194-5.253-1.79-8.458-1.79-3.324 0-6.173.596-8.547 1.79-2.374 1.193-4.154 3.46-5.341 6.803-1.187 3.341-1.781 8.294-1.781 14.858 0 8.474 1.335 14.501 4.006 18.081 2.671 3.58 6.559 5.371 11.663 5.371zm95.122-18.995l12.125-49.391h22.791l12.354 50.885 12.753-50.885H675l-30.27 91.122h-28.667L603.575 87.73l-11.906 40.585H563l-30.448-91.122h35.078l12.625 49.39z" fill-rule="nonzero"></path>
            <path d="M114.992 127.901c.425-1.71-15.4-40.924-23.814-56.015C77.73 47.766 62.86 33.033 54.183 24.422 37.584 7.95 18.584-.738 5.28.05c-14.458.855 5.03 19.736 8.08 22.235 11.481 9.407 28.916 15.394 30.192 19.242.357 1.077-2.206.698-4.678.855-3.497.223-7.229 1.283-7.654 3.421-.425 2.138 4.677 8.98 35.72 29.932 5.364 3.62-1.701-.427-9.355.855-2.337.392-6.379 4.276 5.528 12.828 8.654 6.216 22.601 15.902 31.892 23.09 12.734 9.852 19.74 16.383 19.987 15.394z"></path>
          </g>
        </svg>
      </a>
    </div>
    <div class="mb-6">
      <label for="" class="relative">
        <span class="sr-only">Search</span>
        <input type="text" class="block border-none pl-16 py-3 rounded-xl w-full focus:ring-2 bg-gray-800 placeholder-gray-100 focus:ring-cyan-400" placeholder="Search">
        <svg aria-hidden="true" data-prefix="fal" data-icon="search" class="svg-inline--fa fa-search fa-w-16 w-6 h-6 absolute top-3 left-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"></path>
        </svg>
      </label>
    </div>
    <ul class="flex flex-col">
      <li class="mb-4 rounded-xl w-full bg-gray-700">
        <a href="#" class="flex flex-row items-center p-4 font-medium text-gray-50">
          <span class="mr-6" aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="home-lg-alt" class="svg-inline--fa fa-home-lg-alt fa-w-18 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
              <path fill="currentColor" d="M573.48 219.91L310.6 8a35.85 35.85 0 00-45.19 0L2.53 219.91a6.71 6.71 0 00-1 9.5l14.2 17.5a6.82 6.82 0 009.6 1L64 216.72V496a16 16 0 0016 16h416a16 16 0 0016-16V216.82l38.8 31.29a6.83 6.83 0 009.6-1l14.19-17.5a7.14 7.14 0 00-1.11-9.7zM240 480V320h96v160zm240 0H368V304a16 16 0 00-16-16H224a16 16 0 00-16 16v176H96V190.92l187.71-151.4a6.63 6.63 0 018.4 0L480 191z"></path>
            </svg>
          </span> Home
        </a>
      </li>
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" class="flex flex-row items-center p-4 font-medium text-gray-50">
          <span class="mr-6" aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="analytics" class="svg-inline--fa fa-analytics fa-w-18 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
              <path fill="currentColor" d="M80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16zM64 480H32v-96h32v96zm496-288h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-16 288h-32V224h32v256zM502.77 88.68C510.12 93.24 518.71 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 5.51 1.12 10.71 2.83 15.64l-89.6 71.68c-7.35-4.57-15.94-7.33-25.23-7.33s-17.88 2.76-25.23 7.33l-89.6-71.68C254.88 58.72 256 53.51 256 48c0-26.51-21.49-48-48-48s-48 21.49-48 48c0 7.4 1.81 14.32 4.8 20.58L68.58 164.8C62.32 161.81 55.4 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-7.4-1.81-14.32-4.8-20.58l96.22-96.22C193.68 94.19 200.6 96 208 96c9.29 0 17.88-2.76 25.23-7.33l89.6 71.68c-1.71 4.93-2.83 10.14-2.83 15.65 0 26.51 21.49 48 48 48s48-21.49 48-48c0-5.51-1.12-10.72-2.83-15.65l89.6-71.67zM528 32c8.82 0 16 7.18 16 16s-7.18 16-16 16-16-7.18-16-16 7.18-16 16-16zM48 224c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zM208 64c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zm160 128c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zm-128 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-16 288h-32V224h32v256zm176-160h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm-16 160h-32V352h32v128z"></path>
            </svg>
          </span> Analytics
        </a>
      </li>
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" class="flex flex-row items-center p-4 font-medium text-gray-50">
          <span class="mr-6" aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="folder" class="svg-inline--fa fa-folder fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M194.74 96l54.63 54.63c6 6 14.14 9.37 22.63 9.37h192c8.84 0 16 7.16 16 16v224c0 8.84-7.16 16-16 16H48c-8.84 0-16-7.16-16-16V112c0-8.84 7.16-16 16-16h146.74M48 64C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48H272l-54.63-54.63c-6-6-14.14-9.37-22.63-9.37H48z"></path>
            </svg>
          </span> Projects 
          <span class="ml-auto w-6 h-6 bg-red-600 text-red-50 flex flex-col items-center justify-center rounded-full font-bold text-sm"> 3 </span>
        </a>
      </li>
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" class="flex flex-row items-center p-4 font-medium text-gray-50">
          <span class="mr-6" aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="briefcase" class="svg-inline--fa fa-briefcase fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M464 128H352V56c0-13.26-10.74-24-24-24H184c-13.26 0-24 10.74-24 24v72H48c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zM192 64h128v64H192V64zm288 368c0 8.82-7.18 16-16 16H48c-8.82 0-16-7.18-16-16V288h160v40c0 13.25 10.75 24 24 24h80c13.25 0 24-10.75 24-24v-40h160v144zM224 320v-32h64v32h-64zm256-64H32v-80c0-8.82 7.18-16 16-16h416c8.82 0 16 7.18 16 16v80z"></path>
            </svg>
          </span> Services
        </a>
      </li>
    </ul>
    <ul class="mt-10 pt-10 border-t">
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" class="flex flex-row items-center p-4 font-medium text-gray-50">
          <span class="mr-6" aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M482.696 299.276l-32.61-18.827a195.168 195.168 0 000-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 00-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 00-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 000 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0042.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0042.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 01-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0187.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43.929 75.957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"></path>
            </svg>
          </span> Settings
        </a>
      </li>
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" class="flex flex-row items-center p-4 font-medium text-gray-50">
          <span class="mr-6" aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="sign-out" class="svg-inline--fa fa-sign-out fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M48 64h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48zm279 19.5l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l132 131.4H172c-6.6 0-12 5.4-12 12v10c0 6.6 5.4 12 12 12h279.9L320 404.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l164.5-164c4.7-4.7 4.7-12.3 0-17L344 83.5c-4.7-4.7-12.3-4.7-17 0z"></path>
            </svg>
          </span> Sign out
        </a>
      </li>
    </ul>
    <div class="mt-auto">
      <div class="flex flex-row items-center">
        <div class="relative inline-flex">
          <div class="w-10 h-10 rounded-full bg-cyan-400"></div>
          <span class="absolute h-2 w-2 bottom-0 right-0">
            <span class="absolute rounded-full h-2 w-2 bg-green-300 ring-2 ring-gray-900"></span>
          </span>
        </div>
        <div class="ml-6">
          <p class="font-medium">Gin Sakata</p>
          <p class="text-sm text-opacity-70 text-gray-50"> gin@yorozuya.com </p>
        </div>
        <div class="ml-auto">
          <button class="px-2 -mr-2" aria-label="Toggle dropdown menu">
            <svg aria-hidden="true" data-prefix="fal" data-icon="ellipsis-h" class="svg-inline--fa fa-ellipsis-h fa-w-10 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
              <path fill="currentColor" d="M192 256c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zm88-32c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-240 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
</div>
<div class="w-24 mx-auto grid rounded-2xl bg-gray-800">
  <nav class="flex flex-col rounded-2xl py-6 px-4 h-full">
    <div class="mb-12 p-2 mx-auto">
      <a href="#" aria-label="Go to Home page">
        <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
          <path d="M114.992 127.901c.425-1.71-15.4-40.924-23.814-56.015C77.73 47.766 62.86 33.033 54.183 24.422 37.584 7.95 18.584-.738 5.28.05c-14.458.855 5.03 19.736 8.08 22.235 11.481 9.407 28.916 15.394 30.192 19.242.357 1.077-2.206.698-4.678.855-3.497.223-7.229 1.283-7.654 3.421-.425 2.138 4.677 8.98 35.72 29.932 5.364 3.62-1.701-.427-9.355.855-2.337.392-6.379 4.276 5.528 12.828 8.654 6.216 22.601 15.902 31.892 23.09 12.734 9.852 19.74 16.383 19.987 15.394z" fill="currentColor" fill-rule="evenodd"></path>
        </svg>
      </a>
    </div>
    <div class="mb-6">
      <button class="flex flex-col items-center p-4 rounded-xl w-full hover:bg-gray-700" aria-label="Search">
        <span class="sr-only">Search</span>
        <svg aria-hidden="true" data-prefix="fal" data-icon="search" class="svg-inline--fa fa-search fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"></path>
        </svg>
      </button>
    </div>
    <ul class="flex flex-col">
      <li class="mb-4 rounded-xl w-full bg-gray-700">
        <a href="#" aria-label="Go to Home page" class="flex flex-col items-center p-4 font-medium text-gray-50">
          <span aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="home-lg-alt" class="svg-inline--fa fa-home-lg-alt fa-w-18 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
              <path fill="currentColor" d="M573.48 219.91L310.6 8a35.85 35.85 0 00-45.19 0L2.53 219.91a6.71 6.71 0 00-1 9.5l14.2 17.5a6.82 6.82 0 009.6 1L64 216.72V496a16 16 0 0016 16h416a16 16 0 0016-16V216.82l38.8 31.29a6.83 6.83 0 009.6-1l14.19-17.5a7.14 7.14 0 00-1.11-9.7zM240 480V320h96v160zm240 0H368V304a16 16 0 00-16-16H224a16 16 0 00-16 16v176H96V190.92l187.71-151.4a6.63 6.63 0 018.4 0L480 191z"></path>
            </svg>
          </span>
        </a>
      </li>
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" aria-label="Go to Analytics  page" class="flex flex-col items-center p-4 font-medium text-gray-50">
          <span aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="analytics" class="svg-inline--fa fa-analytics fa-w-18 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
              <path fill="currentColor" d="M80 352H16c-8.84 0-16 7.16-16 16v128c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V368c0-8.84-7.16-16-16-16zM64 480H32v-96h32v96zm496-288h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-16 288h-32V224h32v256zM502.77 88.68C510.12 93.24 518.71 96 528 96c26.51 0 48-21.49 48-48S554.51 0 528 0s-48 21.49-48 48c0 5.51 1.12 10.71 2.83 15.64l-89.6 71.68c-7.35-4.57-15.94-7.33-25.23-7.33s-17.88 2.76-25.23 7.33l-89.6-71.68C254.88 58.72 256 53.51 256 48c0-26.51-21.49-48-48-48s-48 21.49-48 48c0 7.4 1.81 14.32 4.8 20.58L68.58 164.8C62.32 161.81 55.4 160 48 160c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-7.4-1.81-14.32-4.8-20.58l96.22-96.22C193.68 94.19 200.6 96 208 96c9.29 0 17.88-2.76 25.23-7.33l89.6 71.68c-1.71 4.93-2.83 10.14-2.83 15.65 0 26.51 21.49 48 48 48s48-21.49 48-48c0-5.51-1.12-10.72-2.83-15.65l89.6-71.67zM528 32c8.82 0 16 7.18 16 16s-7.18 16-16 16-16-7.18-16-16 7.18-16 16-16zM48 224c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zM208 64c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zm160 128c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zm-128 0h-64c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm-16 288h-32V224h32v256zm176-160h-64c-8.84 0-16 7.16-16 16v160c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16V336c0-8.84-7.16-16-16-16zm-16 160h-32V352h32v128z"></path>
            </svg>
          </span>
        </a>
      </li>
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" aria-label="Go to Projects page" class="relative flex flex-col items-center p-4 font-medium text-gray-50">
          <span aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="folder" class="svg-inline--fa fa-folder fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M194.74 96l54.63 54.63c6 6 14.14 9.37 22.63 9.37h192c8.84 0 16 7.16 16 16v224c0 8.84-7.16 16-16 16H48c-8.84 0-16-7.16-16-16V112c0-8.84 7.16-16 16-16h146.74M48 64C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48H272l-54.63-54.63c-6-6-14.14-9.37-22.63-9.37H48z"></path>
            </svg>
          </span>
          <span class="absolute top-2 right-2 w-2 h-2 bg-red-600 text-red-50 rounded-full"></span>
        </a>
      </li>
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" aria-label="Go to Services page" class="flex flex-col items-center p-4 font-medium text-gray-50">
          <span aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="briefcase" class="svg-inline--fa fa-briefcase fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M464 128H352V56c0-13.26-10.74-24-24-24H184c-13.26 0-24 10.74-24 24v72H48c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zM192 64h128v64H192V64zm288 368c0 8.82-7.18 16-16 16H48c-8.82 0-16-7.18-16-16V288h160v40c0 13.25 10.75 24 24 24h80c13.25 0 24-10.75 24-24v-40h160v144zM224 320v-32h64v32h-64zm256-64H32v-80c0-8.82 7.18-16 16-16h416c8.82 0 16 7.18 16 16v80z"></path>
            </svg>
          </span>
        </a>
      </li>
    </ul>
    <ul class="mt-6 pt-6 border-t">
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" aria-label="Go to Settings page" class="flex flex-col items-center p-4 font-medium text-gray-50">
          <span aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M482.696 299.276l-32.61-18.827a195.168 195.168 0 000-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 00-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 00-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 000 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0042.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0042.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 01-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0187.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43.929 75.957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"></path>
            </svg>
          </span>
        </a>
      </li>
      <li class="mb-4 rounded-xl w-full hover:bg-gray-700">
        <a href="#" aria-label="Logout" class="flex flex-col items-center p-4 font-medium text-gray-50">
          <span aria-hidden="true">
            <svg aria-hidden="true" data-prefix="fal" data-icon="sign-out" class="svg-inline--fa fa-sign-out fa-w-16 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M48 64h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h132c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48zm279 19.5l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l132 131.4H172c-6.6 0-12 5.4-12 12v10c0 6.6 5.4 12 12 12h279.9L320 404.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l164.5-164c4.7-4.7 4.7-12.3 0-17L344 83.5c-4.7-4.7-12.3-4.7-17 0z"></path>
            </svg>
          </span>
        </a>
      </li>
    </ul>
    <div class="mt-auto pt-20">
      <div class="flex flex-col justify-center items-center">
        <div class="relative inline-flex">
          <div class="w-10 h-10 rounded-full bg-cyan-400"></div>
          <span class="absolute h-2 w-2 bottom-0 right-0">
            <span class="absolute rounded-full h-2 w-2 bg-green-300 ring-2 ring-gray-800"></span>
          </span>
        </div>
      </div>
    </div>
  </nav>
</div>

Made by Arturo Alviar