Tailwind CSS Projects Components

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
        <div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <h3 class="text-lg text-white font-semibold mr-2">To do</h3>
              <span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">3</span>
            </div>
            <div>
              <button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button>
              <a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="h-1 w-full mb-4 rounded-full bg-purple-500"></div>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Implement Login</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-pink-400 rounded-full"></span>
              <span class="text-xs font-medium text-pink-400">Development</span>
            </div>
            <p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="flex h-full items-center">
                    <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                    <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Release MVP</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-green-500 rounded-full"></span>
              <span class="text-xs font-medium text-green-500">Planning</span>
            </div>
            <p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 04</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="flex h-full items-center">
                    <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-2-circle-border.png" alt="">
                    <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
              <span class="text-xs font-medium text-purple-500">Design</span>
            </div>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
        <div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <h3 class="text-lg text-white font-semibold mr-2">In progress</h3>
              <span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">2</span>
            </div>
            <div>
              <button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button>
              <a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="h-1 w-full mb-4 rounded-full bg-blue-500"></div>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">UI Adjustments</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
              <span class="text-xs font-medium text-purple-500">Design</span>
            </div>
            <p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="flex h-full items-center">
                    <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
                    <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
              <span class="text-xs font-medium text-purple-500">Design</span>
            </div>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Shuffle Improvements</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-green-500 rounded-full"></span>
              <span class="text-xs font-medium text-green-500">Planning</span>
            </div>
            <img class="block w-full h-28 object-cover rounded-md mb-3" src="trizzle-assets/images/laptop-photo-placeholder.png" alt="">
            <p class="text-xs text-gray-300 mb-4">This is an example task that can be used within a Kanban system.</p>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="flex h-full items-center">
                    <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
                    <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
        <div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <h3 class="text-lg text-white font-semibold mr-2">In Review</h3>
              <span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">10</span>
            </div>
            <div>
              <button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button>
              <a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="h-1 w-full mb-4 rounded-full bg-yellow-500"></div>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Implement Login</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-pink-400 rounded-full"></span>
              <span class="text-xs font-medium text-pink-400">Development</span>
            </div>
            <p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="flex h-full items-center">
                    <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
                    <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <img class="block w-full h-28 object-cover rounded-md mb-3" src="trizzle-assets/images/working-women-laptop.png" alt="">
            <h4 class="text-white font-semibold leading-6 mb-1">Posts for Social Media</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-blue-500 rounded-full"></span>
              <span class="text-xs font-medium text-blue-500">Design</span>
            </div>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex flex-wrap -m-1">
                    <div class="w-auto p-1">
                      <div class="inline-flex w-10 h-8 items-center py-1 px-2 bg-gray-400 rounded-lg">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M6.66675 9.3333C6.884 9.55503 7.14331 9.73118 7.4295 9.85144C7.71568 9.9717 8.02299 10.0336 8.33341 10.0336C8.64384 10.0336 8.95114 9.9717 9.23733 9.85144C9.52352 9.73118 9.78283 9.55503 10.0001 9.3333L12.6667 6.66663C13.1088 6.22461 13.3571 5.62509 13.3571 4.99997C13.3571 4.37485 13.1088 3.77533 12.6667 3.3333C12.2247 2.89127 11.6252 2.64294 11.0001 2.64294C10.375 2.64294 9.77544 2.89127 9.33341 3.3333L9.00008 3.66663" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M9.33342 6.66665C9.11617 6.44492 8.85686 6.26876 8.57067 6.14851C8.28449 6.02825 7.97718 5.96631 7.66676 5.96631C7.35633 5.96631 7.04903 6.02825 6.76284 6.14851C6.47665 6.26876 6.21734 6.44492 6.00009 6.66665L3.33342 9.33332C2.89139 9.77534 2.64307 10.3749 2.64307 11C2.64307 11.6251 2.89139 12.2246 3.33342 12.6666C3.77545 13.1087 4.37497 13.357 5.00009 13.357C5.62521 13.357 6.22473 13.1087 6.66676 12.6666L7.00009 12.3333" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <span class="ml-1 text-xs text-white">2</span>
                      </div>
                    </div>
                    <div class="w-auto p-1">
                      <div class="inline-flex w-10 h-8 items-center py-1 px-2 bg-gray-400 rounded-lg">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M2 13.3333L2.86667 10.7333C2.11763 9.62549 1.84666 8.31358 2.10415 7.04151C2.36163 5.76943 3.13004 4.62375 4.26651 3.81749C5.40298 3.01122 6.83017 2.59924 8.28273 2.65813C9.73528 2.71703 11.1143 3.24279 12.1635 4.13768C13.2127 5.03256 13.8606 6.23567 13.9867 7.52329C14.1128 8.81092 13.7086 10.0955 12.8492 11.1381C11.9899 12.1807 10.7338 12.9104 9.31453 13.1915C7.89529 13.4727 6.40947 13.2862 5.13333 12.6666L2 13.3333Z" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M8 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M5.33325 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M10.6667 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <span class="ml-1 text-xs text-white">5</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="flex h-full items-center">
                    <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
                    <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
              <span class="text-xs font-medium text-purple-500">Design</span>
            </div>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
        <div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <h3 class="text-lg text-white font-semibold mr-2">In progress</h3>
              <span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">2</span>
            </div>
            <div>
              <button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button>
              <a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="h-1 w-full mb-4 rounded-full bg-blue-500"></div>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">UI Adjustments</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
              <span class="text-xs font-medium text-purple-500">Design</span>
            </div>
            <p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="flex h-full items-center">
                    <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
                    <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Design Review</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-purple-500 rounded-full"></span>
              <span class="text-xs font-medium text-purple-500">Design</span>
            </div>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="inline-flex items-center justify-center w-8 h-8 bg-gray-500 rounded-full">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M9.47333 7.47332C10.1269 6.95909 10.604 6.25393 10.8382 5.45594C11.0723 4.65796 11.0519 3.80682 10.7799 3.02096C10.5078 2.23509 9.9975 1.55358 9.32005 1.07122C8.64259 0.588861 7.83163 0.329651 7 0.329651C6.16836 0.329651 5.35741 0.588861 4.67995 1.07122C4.0025 1.55358 3.49223 2.23509 3.22014 3.02096C2.94805 3.80682 2.92767 4.65796 3.16184 5.45594C3.396 6.25393 3.87307 6.95909 4.52666 7.47332C3.40672 7.92201 2.42952 8.66621 1.69926 9.62659C0.968996 10.587 0.51304 11.7275 0.379998 12.9266C0.370368 13.0142 0.378075 13.1028 0.402681 13.1874C0.427287 13.2719 0.468309 13.3508 0.523405 13.4195C0.634677 13.5583 0.79652 13.6472 0.973331 13.6666C1.15014 13.6861 1.32744 13.6345 1.46621 13.5232C1.60499 13.412 1.69388 13.2501 1.71333 13.0733C1.85972 11.7701 2.48112 10.5665 3.45881 9.69251C4.4365 8.8185 5.70193 8.33533 7.01333 8.33533C8.32473 8.33533 9.59016 8.8185 10.5679 9.69251C11.5455 10.5665 12.1669 11.7701 12.3133 13.0733C12.3315 13.2371 12.4096 13.3884 12.5327 13.498C12.6559 13.6076 12.8152 13.6676 12.98 13.6666H13.0533C13.2281 13.6465 13.3878 13.5582 13.4977 13.4208C13.6076 13.2835 13.6587 13.1082 13.64 12.9333C13.5063 11.7308 13.0479 10.5873 12.3139 9.62545C11.5799 8.6636 10.5979 7.91963 9.47333 7.47332ZM7 6.99998C6.47258 6.99998 5.95701 6.84358 5.51848 6.55057C5.07995 6.25755 4.73815 5.84107 4.53632 5.3538C4.33449 4.86653 4.28168 4.33036 4.38457 3.81307C4.48746 3.29579 4.74144 2.82064 5.11438 2.4477C5.48732 2.07476 5.96247 1.82078 6.47976 1.71789C6.99704 1.61499 7.53322 1.6678 8.02049 1.86964C8.50776 2.07147 8.92423 2.41326 9.21725 2.85179C9.51027 3.29033 9.66667 3.8059 9.66667 4.33331C9.66667 5.04056 9.38571 5.71884 8.88562 6.21893C8.38552 6.71903 7.70724 6.99998 7 6.99998Z" fill="#3D485B"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a class="block p-4 mb-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
            <h4 class="text-white font-semibold leading-6 mb-1">Shuffle Improvements</h4>
            <div class="flex items-center mb-4">
              <span class="h-2 w-2 mr-1 bg-green-500 rounded-full"></span>
              <span class="text-xs font-medium text-green-500">Planning</span>
            </div>
            <img class="block w-full h-28 object-cover rounded-md mb-3" src="trizzle-assets/images/laptop-photo-placeholder.png" alt="">
            <p class="text-xs text-gray-300 mb-4">This is an example task that can be used within a Kanban system.</p>
            <div class="pt-4 border-t border-gray-500">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center p-2 bg-gray-500 rounded-md">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div class="flex h-full items-center">
                    <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
                    <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pb-16 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="pt-8 pb-6">
      <p class="text-4xl font-semibold tracking-tight">Projects</p>
    </div>
    <div class="pt-12 px-10 pb-14 bg-white rounded-4xl">
      <div class="flex flex-wrap -m-4 mb-8">
        <div class="w-full md:w-1/2 p-4">
          <p class="mb-2 text-xl text-neutral-600 font-semibold tracking-tight">Project</p>
          <p class="text-5xl font-medium tracking-tight">Weddedone digital</p>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-auto p-4">
              <p class="mb-1 text-xl text-neutral-600 font-semibold tracking-tight">Client</p>
              <p class="text-neutral-600 font-medium tracking-tight">EYRA88s</p>
            </div>
            <div class="w-full md:w-2/3 ml-auto p-4">
              <p class="mb-1 text-xl text-neutral-600 font-semibold tracking-tight">Details</p>
              <p class="text-neutral-600 font-medium tracking-tight max-w-md">At the heart of our success is a diverse and talented team, united by a shared commitment to excellence.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="relative">
        <img class="w-full h-full object-cover rounded-2xl" style="height: 688px;" src="mirga-assets/images/projects/layer.jpg" alt="">
        <div class="absolute bottom-0 left-0 pb-8 px-12 flex flex-wrap -m-0.5">
          <div class="w-auto p-0.5">
            <a class="flex items-center justify-center w-12 h-16 bg-neutral-800 hover:bg-opacity-80 rounded-lg transition duration-200" href="#">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9 18L10.2915 16.7463L3.4452 9.9L18 9.9L18 8.1L3.4452 8.1L10.2726 1.2726L9 3.02789e-06L7.86805e-07 9L9 18Z" fill="white"></path>
              </svg>
            </a>
          </div>
          <div class="w-auto p-0.5">
            <a class="flex items-center justify-center w-12 h-16 bg-neutral-800 hover:bg-opacity-80 rounded-lg transition duration-200" href="#">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0L7.7085 1.2537L14.5548 8.1L0 8.1L0 9.9L14.5548 9.9L7.7274 16.7274L9 18L18 9L9 0Z" fill="white"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 md:py-24 bg-coolGray-50" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto lg:max-w-none mb-20">
      <div class="flex flex-wrap -mx-4 items-end">
        <div class="w-full 2xl:w-7/12 px-4 mb-16 2xl:mb-0">
          <div class="inline-flex mx-auto items-start">
            <h1 class="font-heading text-3xl xs:text-5xl md:text-6xl lg:text-10xl tracking-tighter pt-4">Selected projects</h1>
            <span class="block -mb-4 mr-12 lg:mr-8 text-right text-xl sm:text-2xl text-coolGray-600">(21)</span>
          </div>
        </div>
        <div class="w-full 2xl:w-5/12 px-4">
          <ul class="flex flex-wrap -mb-2 items-center justify-end">
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{'bg-black text-white': $refs.tab1.textContent == tab, 'hover:bg-black hover:text-white': $refs.tab1.textContent != tab}" class="inline-block py-2.5 px-5 text-lg leading-none bg-black text-white rounded-full transition duration-100" href="#">All</a></li>
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{'bg-black text-white': $refs.tab2.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Villa</a></li>
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{'bg-black text-white': $refs.tab3.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Residance</a></li>
            <li class="mb-2"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{'bg-black text-white': $refs.tab4.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Apartaments</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="md:max-w-xl mx-auto lg:max-w-none">
      <div class="flex flex-wrap -mx-3 mb-20">
        <div :class="{'block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'hidden': $refs.tab1.textContent != tab &amp;&amp; $refs.tab2.textContent != tab}" class="w-full lg:w-7/12 px-3 mb-20 lg:mb-0">
          <a class="group block" href="#">
            <div class="relative h-112 md:h-200 mb-8 rounded-5xl overflow-hidden">
              <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
              <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-square3.png" alt="">
            </div>
            <div class="max-w-xs lg:max-w-md">
              <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
              <h3 class="text-4xl mb-6 tracking-tight leading-none">Althhorpe Street Leamigton Spa</h3>
              <span class="block text-coolGray-600">Girona, Spain</span>
            </div>
          </a>
        </div>
        <div :class="{'block': $refs.tab1.textContent == tab || $refs.tab3.textContent == tab, 'hidden': $refs.tab1.textContent != tab &amp;&amp; $refs.tab3.textContent != tab}" class="w-full lg:w-5/12 px-3">
          <a class="group block" href="#">
            <div class="relative h-112 md:h-135 mb-8 rounded-5xl overflow-hidden">
              <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
              <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-view5.png" alt="">
            </div>
            <div class="max-w-xs lg:max-w-md">
              <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
              <h3 class="text-4xl mb-6 tracking-tight leading-none">Althhorpe Street Leamigton Spa</h3>
              <span class="block text-coolGray-600">Girona, Spain</span>
            </div>
          </a>
        </div>
      </div>
      <div class="mb-20">
        <div class="flex flex-wrap -mx-3">
          <div class="w-full lg:w-1/3 px-3 mb-20 lg:mb-0">
            <a class="group block" href="#">
              <div class="relative h-96 md:h-112 mb-8 rounded-5xl overflow-hidden">
                <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
                <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-square2.png" alt="">
              </div>
              <div class="max-w-xs">
                <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
                <h3 class="text-3xl mb-6 tracking-tight leading-none">Althhorpe Street Leamigton Spa</h3>
                <span class="block text-coolGray-600">Girona, Spain</span>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/3 px-3 mb-20 lg:mb-0">
            <a class="group block" href="#">
              <div class="relative h-112 md:h-135 mb-8 rounded-5xl overflow-hidden">
                <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
                <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-view3.png" alt="">
              </div>
              <div class="max-w-xs">
                <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
                <h3 class="text-3xl mb-6 tracking-tight leading-none">Althhorpe Street Leamigton Spa</h3>
                <span class="block text-coolGray-600">Girona, Spain</span>
              </div>
            </a>
          </div>
          <div class="w-full lg:w-1/3 px-3">
            <a class="group block" href="#">
              <div class="relative h-96 md:h-112 mb-8 rounded-5xl overflow-hidden">
                <div class="absolute left-0 top-0 h-full w-full group-hover:bg-opacity-10 group-hover:bg-black transition duration-200"></div>
                <img class="block w-full h-full object-cover" src="asitrastudio-assets/projects/photo-view2.png" alt="">
              </div>
              <div class="max-w-xs">
                <span class="inline-block mb-3 py-2 px-3 text-sm leading-none border-1.5 border-black group-hover:bg-black group-hover:text-white rounded-full transition duration-200">Apartament</span>
                <h3 class="text-3xl mb-6">Althhorpe Street Leamigton Spa</h3>
                <span class="block text-coolGray-600">Girona, Spain</span>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="text-center">
        <a class="group inline-flex items-center leading-none font-medium pb-2 border-b-2 border-black" href="#">
          <span class="mr-4">See all projects</span>
          <span class="group-hover:rotate-45 transform transition duration-100">
            <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>
</section>

<section class="py-6">
    <div class="container mx-auto px-4">
        <div class="border border-gray-200 rounded-2xl p-6">
            <div class="flex mb-6 items-center">
                <span class="inline-flex mr-4 items-center justify-center rounded-2xl bg-purple-500 h-10 w-10">
                  <img class="object-cover" src="sirius-assets/images/brands/twitch.svg" alt="">
                </span>
                <p class="text-blue-900 text-sm font-semibold">My wealth and treasures?</p>
            </div>
            <div class="mb-6">
                <div class="flex mb-4 items-center">
                    <span class="mr-3">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
                          <path d="M9.06034 9.06069L9.81621 6.17676L6.93902 6.93932L6.34802 9.65163L9.06034 9.06069Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    <p class="text-gray-500 text-sm font-medium">Warsaw, Poland</p>
                </div>
                <div class="flex items-center">
                    <span class="mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M13.5 5H2.5C2.22386 5 2 5.22386 2 5.5V13.5C2 13.7761 2.22386 14 2.5 14H13.5C13.7761 14 14 13.7761 14 13.5V5.5C14 5.22386 13.7761 5 13.5 5Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M11 4V3C11 2.73478 10.8736 2.48043 10.6485 2.29289C10.4235 2.10536 10.1183 2 9.8 2H6.2C5.88174 2 5.57652 2.10536 5.35147 2.29289C5.12643 2.48043 5 2.73478 5 3V4" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M2 8H14" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    <p class="text-gray-500 text-sm font-medium">Slide.io</p>
                </div>
            </div>
            <div class="flex items-center justify-between pb-6 border-b border-gray-200">
                <div class="flex">
                    <img class="rounded-lg" style="width: 32px; height: 32px" src="https://images.unsplash.com/photo-1593789382576-54f489574d26?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt="">
                    <img class="-ml-3 rounded-lg" style="width: 32px; height: 32px;" src="https://images.unsplash.com/photo-1566576912307-ffbc957001f4?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt="">
                    <img class="-ml-3 rounded-lg" style="width: 32px; height: 32px" src="https://images.unsplash.com/photo-1612404834746-1ffba06de133?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=128&amp;w=128" alt="">
                    <a class="inline-flex items-center justify-center -ml-3 bg-blue-50 text-blue-500 w-8 h-8 rounded-lg" href="#">
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M6 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </a>
                </div>
                <a href="#" class="inline-block">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.5 11.5C14.3284 11.5 15 10.8284 15 10C15 9.17157 14.3284 8.5 13.5 8.5C12.6716 8.5 12 9.17157 12 10C12 10.8284 12.6716 11.5 13.5 11.5Z" fill="#7A899B"></path>
                        <path d="M6.5 11.5C7.32843 11.5 8 10.8284 8 10C8 9.17157 7.32843 8.5 6.5 8.5C5.67157 8.5 5 9.17157 5 10C5 10.8284 5.67157 11.5 6.5 11.5Z" fill="#7A899B"></path>
                    </svg>
                </a>
            </div>
            <div class="pt-6 mb-6">
                <span class="px-3 py-1 rounded-md bg-purple-50 text-purple-500 uppercase text-xs font-bold mr-3">Phase 2</span>
                <span class="text-gray-500 text-sm font-medium">Mid-round Calls</span>
            </div>
            <div class="relative bg-blue-50 rounded-2xl h-1 w-full">
                <div class="absolute top-0 bottom-0 bg-blue-500 rounded-2xl w-1/2"></div>
            </div>
        </div>
    </div>
</section>