Tailwind CSS Tables Components

<section x-data="{ inc: 10, show: 10, min: 10, max: 20 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="pt-6 pb-8 bg-gray-500 rounded-xl">
      <div class="px-6">
        <h4 class="text-lg text-gray-100 font-semibold mb-6">Companies</h4>
        <div class="w-full mt-6 pb-6 overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="p-0">
                  <div class="py-3 px-6 rounded-l-xl bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">NAME</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">INDUSTRY</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">LOCATION</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">ENROLLMENT</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="py-3 px-6 rounded-r-xl bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">LAST CONTACT</span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-l-xl bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-r-xl bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-l-xl bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-r-xl bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-l-xl bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-r-xl bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-l-xl bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-r-xl bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-l-xl bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 rounded-r-xl bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6 bg-gray-600">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Artemis</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex items-center">
                      <div class="flex items-center justify-center w-10 h-10 mr-3 bg-gray-400 bg-opacity-20 rounded-md">
                        <img src="trizzle-assets/logos/artemis.svg" alt="">
                      </div>
                      <span class="text-sm text-gray-100 font-medium">Apollo</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">NO-CODE</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">Warsaw, Poland</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block w-2 h-2 mr-1 bg-green-500 rounded-full"></span>
                    <span class="text-sm font-medium text-gray-100">Enrolled</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm text-gray-100 font-medium">June 06, 2022</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="flex flex-wrap items-center justify-between px-6 pt-8 border-t border-gray-400">
        <div class="w-full sm:w-auto mb-6 sm:mb-0">
          <div class="flex items-center justify-between">
            <p class="text-sm font-medium text-gray-400">
              <span>Showing</span>
              <span x-text="inc > show ? inc - show : 1" class="px-px text-gray-200">1</span>
              <span>to</span>
              <span x-text="inc" class="px-px text-gray-200">10</span>
              <span x-text="'of ' + max + ' results'">of 20 results</span>
            </p>
          </div>
        </div>
        <div class="w-full sm:w-auto mb-6 sm:mb-0">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5"><a x-on:click.prevent="inc > min ? inc -= show : min" class="inline-flex items-center h-9 py-1 px-4 text-xs text-gray-400 font-semibold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Previous</a></div>
            <div class="w-auto p-1.5"><a x-on:click.prevent="inc < max ? inc += show : max" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Next</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

<section class="relative py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 pb-20 mx-auto border-b border-gray-500">
    <div class="mb-14 text-center">
      <span class="text-lg text-blue-400 font-bold">Check of details</span>
      <h2 class="mt-8 text-5xl font-bold font-heading text-white">See all features</h2>
    </div>
    <div class="pt-20 border-t border-gray-500 overflow-x-auto overflow-y-hidden">
      <table class="table-auto w-full mb-10">
        <thead>
          <tr class="text-lg text-gray-200 text-left font-bold"><th class="pb-6"></th><th class="pb-6 pr-8">Feature 1</th><th class="pb-6 pr-8">Feature 2</th><th class="pb-6 pr-8">Feature 3</th><th class="pb-6 pr-8">Feature 4</th><th class="pb-6 pr-8">Feature 5</th></tr>
        </thead>
        <tbody>
          <tr class="text-xl text-white bg-gray-700">
            <td class="py-5 pl-10 text-left text-gray-200">Number of Team Members</td>
            <td>5</td>
            <td>20</td>
            <td>200+</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
          </tr>
          <tr class="text-xl text-white">
            <td class="py-5 pl-10 text-left text-gray-200">Users</td>
            <td>3</td>
            <td>10</td>
            <td>50+</td>
            <td>100+</td>
            <td>Unlimited</td>
          </tr>
          <tr class="text-xl text-white bg-gray-700">
            <td class="py-5 pl-10 text-left text-gray-200">Projects</td>
            <td>3/mo</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
          </tr>
          <tr class="text-xl text-white">
            <td class="py-5 pl-10 text-left text-gray-200">Video chat</td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
          </tr>
          <tr class="text-xl text-white bg-gray-700">
            <td class="py-5 pl-10 text-left text-gray-200">Realt-Time Collaboration</td>
            <td>
              <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="1.35" x2="16" y2="1.35" stroke="#414C5E" stroke-width="1.3"></line></svg>
            </td>
            <td>
              <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="1.35" x2="16" y2="1.35" stroke="#414C5E" stroke-width="1.3"></line></svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
          </tr>
          <tr class="text-xl text-white">
            <td class="py-5 pl-10 text-left text-gray-200">Support</td>
            <td>
              <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="1.35" x2="16" y2="1.35" stroke="#414C5E" stroke-width="1.3"></line></svg>
            </td>
            <td>
              <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="1.35" x2="16" y2="1.35" stroke="#414C5E" stroke-width="1.3"></line></svg>
            </td>
            <td>
              <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="1.35" x2="16" y2="1.35" stroke="#414C5E" stroke-width="1.3"></line></svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
            <td>
              <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
              </svg>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="flex justify-end">
        <div class="max-w-xs mr-8 flex items-center">
          <p class="mr-6 text-5xl font-bold font-heading text-white">
            8
            <span class="text-3xl">%</span>
          </p>
          <p class="text-lg text-gray-200">The tell condimentum turpis lorem</p>
        </div>
        <div class="max-w-xs flex items-center">
          <p class="mr-6 text-5xl font-bold font-heading text-white">20</p>
          <p class="text-lg text-gray-200">A sad laoreet sit amet nec purus</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-24 md:pt-40 pb-24 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full xl:w-1/3 px-4 mb-16 xl:mb-0">
        <div class="flex flex-col h-full items-start px-6 sm:px-12 pt-16 pb-24 bg-white rounded-2xl" x-data="{ showContent: false }">
          <div class="w-full mb-16 pb-2 border-b border-gray-200">
            <h4 class="font-heading text-4xl">Files</h4>
          </div>
          <div class="flex mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
            <span class="text-lg">All inspirations</span>
          </div>
          <div class="flex mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
            <span class="text-lg">Bathroom design</span>
          </div>
          <div class="flex items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
            <span class="text-lg">Songs</span>
          </div>
          <div :class="{ 'hidden': !showContent, 'block': showContent }" class="flex hidden mt-14 mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
            <span class="text-lg">Travel Adventures</span>
          </div>
          <div :class="{ 'hidden': !showContent, 'block': showContent }" class="flex hidden mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
            <span class="text-lg">Culinary Delights</span>
          </div>
          <div :class="{ 'hidden': !showContent, 'block': showContent }" class="flex hidden items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
            <span class="text-lg">Fitness Journey</span>
          </div>
          <a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent, 'block': !showContent }" class="inline-block w-full sm:w-auto px-7 py-4 mt-auto text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">All files</a>
        </div>
      </div>
      <div class="w-full xl:w-2/3 px-4">
        <div class="px-6 sm:px-12 pt-16 pb-24 bg-white rounded-2xl" x-data="{ showContent: false }">
          <div class="sm:flex justify-between items-center mb-10 pb-2 border-b border-gray-200">
            <h4 class="font-heading text-4xl mb-4 sm:mb-0">Teamwork</h4>
            <div class="pr-6 overflow-hidden border border-gray-300 rounded">
              <select class="pl-6 py-2 bg-white outline-none" aria-label="New select example" style="max-width: max-content;">
                <option selected="">New</option>
                <option value="1">Old</option>
              </select>
            </div>
          </div>
          <div class="overflow-x-auto px-4 mb-14">
            <table class="table-auto w-full min-w-max">
              <thead></thead>
              <tbody>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
                      <span class="font-normal text-lg">All inspirations</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex pl-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
                      <span class="font-normal text-lg">Photos.zip</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex px-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
                      <span class="font-normal text-lg">Songs that feel like winter</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex px-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr :class="{ 'hidden': !showContent }" class="hidden">
                    <th class="py-5" scope="row">
                      <div class="flex pr-8 items-center">
                        <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
                        <span class="font-normal text-lg">Creative Canvas</span>
                      </div>
                    </th>
                    <td class="py-5">
                      <div class="relative flex pl-12 items-center">
                        <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                        <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                        <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                        <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                          <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                            <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                            <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                          </svg>
                        </a>
                      </div>
                    </td>
                    <td class="px-12 py-5">
                      <span class="text-sm font-light">Today, 9:44 AM</span>
                    </td>
                    <td class="py-5">
                      <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                        <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                        </svg>
                        <span class="ml-3">Details</span>
                      </a>
                    </td>
                  </tr>
                  <tr :class="{ 'hidden': !showContent }" class="hidden">
                    <th class="py-5" scope="row">
                      <div class="flex pr-8 items-center">
                        <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
                        <span class="font-normal text-lg">Memories Captured</span>
                      </div>
                    </th>
                    <td class="py-5">
                      <div class="relative flex px-12 items-center">
                        <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                        <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                        <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                        <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                          <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                            <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                            <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                          </svg>
                        </a>
                      </div>
                    </td>
                    <td class="px-12 py-5">
                      <span class="text-sm font-light">Today, 9:44 AM</span>
                    </td>
                    <td class="py-5">
                      <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                        <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                        </svg>
                        <span class="ml-3">Details</span>
                      </a>
                    </td>
                  </tr>
                  <tr :class="{ 'hidden': !showContent }" class="hidden">
                    <th class="py-5" scope="row">
                      <div class="flex pr-8 items-center">
                        <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
                        <span class="font-normal text-lg">Frosty Melodies</span>
                      </div>
                    </th>
                    <td class="py-5">
                      <div class="relative flex px-12 items-center">
                        <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                        <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                        <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                        <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                          <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                            <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                            <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                          </svg>
                        </a>
                      </div>
                    </td>
                    <td class="px-12 py-5">
                      <span class="text-sm font-light">Today, 9:44 AM</span>
                    </td>
                    <td class="py-5">
                      <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                        <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                        </svg>
                        <span class="ml-3">Details</span>
                      </a>
                    </td>
                  </tr>
              </tbody>
            </table>
          </div>
          <div><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Sign in</a><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent, 'block': !showContent }" class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium border border-gray-900 hover:text-gray-700 rounded" href="#">More Scores</a></div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <a class="relative inline-flex items-center justify-center w-32 h-32 text-gray-800 hover:text-gray-700" href="#">
        <img class="absolute top-0 left-0 h-full w-full object-contain" src="wrexa-assets/elements/circle-border-light.svg" alt="">
        <svg width="12" height="32" viewBox="0 0 12 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.3109 -2.9239e-07L5.3109 29.4165L0.974389 25.1693L-1.88224e-07 26.1236L6 32L12 26.1236L11.0256 25.1693L6.6891 29.4165L6.6891 -2.32147e-07L5.3109 -2.9239e-07Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
  </div>
</section>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 mx-auto bg-white border border-coolGray-100 rounded-md shadow-dashboard">
      <div class="flex flex-wrap items-center justify-between -m-2 mb-6">
        <div class="w-auto p-2">
          <p class="font-semibold text-lg text-coolGray-900">Schedule</p>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap -m-2">
            <div class="w-auto p-2">
              <button class="px-3 py-1 text-xs font-medium text-darkCoolGray-500 bg-darkCoolGray-100 rounded-full">Today</button>
            </div>
            <div class="w-auto p-2">
              <button class="px-3 py-1 text-xs font-medium text-darkCoolGray-500 bg-transparent rounded-full">Tomorrow</button>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -m-2">
        <div class="w-full p-2">
          <h3 class="mb-1 font-medium text-lg text-coolGray-900">Group meeting</h3>
          <div class="flex flex-wrap items-center pb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.33333 1.33333C6.01478 1.33333 4.72585 1.72432 3.62952 2.45686C2.5332 3.18941 1.67871 4.2306 1.17413 5.44877C0.669545 6.66695 0.537523 8.00739 0.794758 9.3006C1.05199 10.5938 1.68693 11.7817 2.61928 12.714C3.55163 13.6464 4.73952 14.2813 6.03272 14.5386C7.32593 14.7958 8.66638 14.6638 9.88455 14.1592C11.1027 13.6546 12.1439 12.8001 12.8765 11.7038C13.609 10.6075 14 9.31854 14 8C14 7.12452 13.8276 6.25761 13.4925 5.44877C13.1575 4.63993 12.6664 3.90501 12.0474 3.28595C11.4283 2.66689 10.6934 2.17583 9.88455 1.8408C9.07571 1.50577 8.20881 1.33333 7.33333 1.33333ZM7.33333 13.3333C6.27849 13.3333 5.24735 13.0205 4.37028 12.4345C3.49322 11.8485 2.80964 11.0155 2.40597 10.041C2.0023 9.06643 1.89668 7.99408 2.10247 6.95951C2.30826 5.92495 2.81621 4.97464 3.56209 4.22876C4.30797 3.48288 5.25828 2.97493 6.29284 2.76914C7.32741 2.56335 8.39977 2.66897 9.3743 3.07264C10.3488 3.47631 11.1818 4.15989 11.7678 5.03695C12.3539 5.91402 12.6667 6.94516 12.6667 8C12.6667 9.41448 12.1048 10.771 11.1046 11.7712C10.1044 12.7714 8.74781 13.3333 7.33333 13.3333ZM7.33333 3.99999C7.15652 3.99999 6.98695 4.07023 6.86192 4.19526C6.7369 4.32028 6.66666 4.48985 6.66666 4.66666V7.61333L5.26666 8.42C5.13823 8.49277 5.03759 8.60611 4.98051 8.74225C4.92344 8.87838 4.91316 9.02961 4.95129 9.17222C4.98942 9.31482 5.0738 9.44074 5.1912 9.53022C5.3086 9.61971 5.45238 9.66769 5.59999 9.66666C5.71678 9.66747 5.83172 9.63758 5.93333 9.58L7.66666 8.58L7.72666 8.51999L7.83333 8.43333C7.85939 8.40033 7.88175 8.36455 7.89999 8.32666C7.92172 8.29087 7.9396 8.25288 7.95333 8.21333C7.97146 8.17094 7.98271 8.12593 7.98666 8.08L7.99999 8V4.66666C7.99999 4.48985 7.92976 4.32028 7.80473 4.19526C7.67971 4.07023 7.51014 3.99999 7.33333 3.99999Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">10:00AM</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2.98667C10.9391 1.92581 9.50028 1.32982 7.99999 1.32982C6.4997 1.32982 5.06086 1.92581 3.99999 2.98667C2.93913 4.04754 2.34314 5.48638 2.34314 6.98667C2.34314 8.48696 2.93913 9.92581 3.99999 10.9867L7.51333 14.5067C7.5753 14.5692 7.64904 14.6188 7.73028 14.6526C7.81152 14.6864 7.89865 14.7039 7.98666 14.7039C8.07467 14.7039 8.1618 14.6864 8.24304 14.6526C8.32428 14.6188 8.39802 14.5692 8.45999 14.5067L12 10.9533C13.0564 9.89689 13.6499 8.46404 13.6499 6.97001C13.6499 5.47597 13.0564 4.04312 12 2.98667ZM11.0467 10L7.99999 13.06L4.95333 10C4.35142 9.39755 3.94164 8.63017 3.77579 7.79487C3.60994 6.95956 3.69545 6.09384 4.02153 5.30713C4.34761 4.52042 4.89961 3.84804 5.60775 3.37499C6.31589 2.90194 7.14838 2.64946 7.99999 2.64946C8.8516 2.64946 9.6841 2.90194 10.3922 3.37499C11.1004 3.84804 11.6524 4.52042 11.9785 5.30713C12.3045 6.09384 12.3901 6.95956 12.2242 7.79487C12.0583 8.63017 11.6486 9.39755 11.0467 10ZM5.99999 4.94001C5.4618 5.47985 5.15959 6.21105 5.15959 6.97334C5.15959 7.73563 5.4618 8.46683 5.99999 9.00667C6.39983 9.4072 6.90905 9.68073 7.46376 9.79294C8.01847 9.90516 8.59396 9.85106 9.11804 9.63744C9.64212 9.42382 10.0914 9.06019 10.4096 8.59217C10.7278 8.12415 10.9007 7.57259 10.9067 7.00667C10.9097 6.62881 10.8369 6.25418 10.6926 5.90493C10.5483 5.55568 10.3355 5.23891 10.0667 4.97334C9.80244 4.70306 9.48738 4.4877 9.13961 4.33965C8.79184 4.1916 8.41822 4.11379 8.04026 4.11069C7.6623 4.10759 7.28746 4.17927 6.93731 4.3216C6.58716 4.46393 6.26861 4.67409 5.99999 4.94001ZM9.12666 8.06001C8.87402 8.3165 8.54013 8.47727 8.18208 8.51484C7.82402 8.55241 7.46404 8.46443 7.16366 8.26596C6.86329 8.06748 6.64119 7.77083 6.53533 7.42673C6.42947 7.08262 6.44643 6.71243 6.5833 6.37944C6.72017 6.04645 6.96846 5.77135 7.28572 5.60116C7.60297 5.43098 7.96949 5.37628 8.32262 5.44642C8.67574 5.51656 8.99353 5.70718 9.22167 5.98569C9.4498 6.26421 9.5741 6.61332 9.57333 6.97334C9.56363 7.38485 9.39099 7.77569 9.09333 8.06001H9.12666Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">Remotely</p>
                </div>
              </div>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
        </div>
        <div class="w-full p-2">
          <h3 class="mb-1 font-medium text-lg text-coolGray-900">Lunch with CTO</h3>
          <div class="flex flex-wrap items-center pb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.33333 1.33333C6.01478 1.33333 4.72585 1.72432 3.62952 2.45686C2.5332 3.18941 1.67871 4.2306 1.17413 5.44877C0.669545 6.66695 0.537523 8.00739 0.794758 9.3006C1.05199 10.5938 1.68693 11.7817 2.61928 12.714C3.55163 13.6464 4.73952 14.2813 6.03272 14.5386C7.32593 14.7958 8.66638 14.6638 9.88455 14.1592C11.1027 13.6546 12.1439 12.8001 12.8765 11.7038C13.609 10.6075 14 9.31854 14 8C14 7.12452 13.8276 6.25761 13.4925 5.44877C13.1575 4.63993 12.6664 3.90501 12.0474 3.28595C11.4283 2.66689 10.6934 2.17583 9.88455 1.8408C9.07571 1.50577 8.20881 1.33333 7.33333 1.33333ZM7.33333 13.3333C6.27849 13.3333 5.24735 13.0205 4.37028 12.4345C3.49322 11.8485 2.80964 11.0155 2.40597 10.041C2.0023 9.06643 1.89668 7.99408 2.10247 6.95951C2.30826 5.92495 2.81621 4.97464 3.56209 4.22876C4.30797 3.48288 5.25828 2.97493 6.29284 2.76914C7.32741 2.56335 8.39977 2.66897 9.3743 3.07264C10.3488 3.47631 11.1818 4.15989 11.7678 5.03695C12.3539 5.91402 12.6667 6.94516 12.6667 8C12.6667 9.41448 12.1048 10.771 11.1046 11.7712C10.1044 12.7714 8.74781 13.3333 7.33333 13.3333ZM7.33333 3.99999C7.15652 3.99999 6.98695 4.07023 6.86192 4.19526C6.7369 4.32028 6.66666 4.48985 6.66666 4.66666V7.61333L5.26666 8.42C5.13823 8.49277 5.03759 8.60611 4.98051 8.74225C4.92344 8.87838 4.91316 9.02961 4.95129 9.17222C4.98942 9.31482 5.0738 9.44074 5.1912 9.53022C5.3086 9.61971 5.45238 9.66769 5.59999 9.66666C5.71678 9.66747 5.83172 9.63758 5.93333 9.58L7.66666 8.58L7.72666 8.51999L7.83333 8.43333C7.85939 8.40033 7.88175 8.36455 7.89999 8.32666C7.92172 8.29087 7.9396 8.25288 7.95333 8.21333C7.97146 8.17094 7.98271 8.12593 7.98666 8.08L7.99999 8V4.66666C7.99999 4.48985 7.92976 4.32028 7.80473 4.19526C7.67971 4.07023 7.51014 3.99999 7.33333 3.99999Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">11:00AM</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2.98667C10.9391 1.92581 9.50028 1.32982 7.99999 1.32982C6.4997 1.32982 5.06086 1.92581 3.99999 2.98667C2.93913 4.04754 2.34314 5.48638 2.34314 6.98667C2.34314 8.48696 2.93913 9.92581 3.99999 10.9867L7.51333 14.5067C7.5753 14.5692 7.64904 14.6188 7.73028 14.6526C7.81152 14.6864 7.89865 14.7039 7.98666 14.7039C8.07467 14.7039 8.1618 14.6864 8.24304 14.6526C8.32428 14.6188 8.39802 14.5692 8.45999 14.5067L12 10.9533C13.0564 9.89689 13.6499 8.46404 13.6499 6.97001C13.6499 5.47597 13.0564 4.04312 12 2.98667ZM11.0467 10L7.99999 13.06L4.95333 10C4.35142 9.39755 3.94164 8.63017 3.77579 7.79487C3.60994 6.95956 3.69545 6.09384 4.02153 5.30713C4.34761 4.52042 4.89961 3.84804 5.60775 3.37499C6.31589 2.90194 7.14838 2.64946 7.99999 2.64946C8.8516 2.64946 9.6841 2.90194 10.3922 3.37499C11.1004 3.84804 11.6524 4.52042 11.9785 5.30713C12.3045 6.09384 12.3901 6.95956 12.2242 7.79487C12.0583 8.63017 11.6486 9.39755 11.0467 10ZM5.99999 4.94001C5.4618 5.47985 5.15959 6.21105 5.15959 6.97334C5.15959 7.73563 5.4618 8.46683 5.99999 9.00667C6.39983 9.4072 6.90905 9.68073 7.46376 9.79294C8.01847 9.90516 8.59396 9.85106 9.11804 9.63744C9.64212 9.42382 10.0914 9.06019 10.4096 8.59217C10.7278 8.12415 10.9007 7.57259 10.9067 7.00667C10.9097 6.62881 10.8369 6.25418 10.6926 5.90493C10.5483 5.55568 10.3355 5.23891 10.0667 4.97334C9.80244 4.70306 9.48738 4.4877 9.13961 4.33965C8.79184 4.1916 8.41822 4.11379 8.04026 4.11069C7.6623 4.10759 7.28746 4.17927 6.93731 4.3216C6.58716 4.46393 6.26861 4.67409 5.99999 4.94001ZM9.12666 8.06001C8.87402 8.3165 8.54013 8.47727 8.18208 8.51484C7.82402 8.55241 7.46404 8.46443 7.16366 8.26596C6.86329 8.06748 6.64119 7.77083 6.53533 7.42673C6.42947 7.08262 6.44643 6.71243 6.5833 6.37944C6.72017 6.04645 6.96846 5.77135 7.28572 5.60116C7.60297 5.43098 7.96949 5.37628 8.32262 5.44642C8.67574 5.51656 8.99353 5.70718 9.22167 5.98569C9.4498 6.26421 9.5741 6.61332 9.57333 6.97334C9.56363 7.38485 9.39099 7.77569 9.09333 8.06001H9.12666Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">Remotely</p>
                </div>
              </div>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
        </div>
        <div class="w-full p-2">
          <h3 class="mb-1 font-medium text-lg text-coolGray-900">Daily with designers</h3>
          <div class="flex flex-wrap items-center pb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.33333 1.33333C6.01478 1.33333 4.72585 1.72432 3.62952 2.45686C2.5332 3.18941 1.67871 4.2306 1.17413 5.44877C0.669545 6.66695 0.537523 8.00739 0.794758 9.3006C1.05199 10.5938 1.68693 11.7817 2.61928 12.714C3.55163 13.6464 4.73952 14.2813 6.03272 14.5386C7.32593 14.7958 8.66638 14.6638 9.88455 14.1592C11.1027 13.6546 12.1439 12.8001 12.8765 11.7038C13.609 10.6075 14 9.31854 14 8C14 7.12452 13.8276 6.25761 13.4925 5.44877C13.1575 4.63993 12.6664 3.90501 12.0474 3.28595C11.4283 2.66689 10.6934 2.17583 9.88455 1.8408C9.07571 1.50577 8.20881 1.33333 7.33333 1.33333ZM7.33333 13.3333C6.27849 13.3333 5.24735 13.0205 4.37028 12.4345C3.49322 11.8485 2.80964 11.0155 2.40597 10.041C2.0023 9.06643 1.89668 7.99408 2.10247 6.95951C2.30826 5.92495 2.81621 4.97464 3.56209 4.22876C4.30797 3.48288 5.25828 2.97493 6.29284 2.76914C7.32741 2.56335 8.39977 2.66897 9.3743 3.07264C10.3488 3.47631 11.1818 4.15989 11.7678 5.03695C12.3539 5.91402 12.6667 6.94516 12.6667 8C12.6667 9.41448 12.1048 10.771 11.1046 11.7712C10.1044 12.7714 8.74781 13.3333 7.33333 13.3333ZM7.33333 3.99999C7.15652 3.99999 6.98695 4.07023 6.86192 4.19526C6.7369 4.32028 6.66666 4.48985 6.66666 4.66666V7.61333L5.26666 8.42C5.13823 8.49277 5.03759 8.60611 4.98051 8.74225C4.92344 8.87838 4.91316 9.02961 4.95129 9.17222C4.98942 9.31482 5.0738 9.44074 5.1912 9.53022C5.3086 9.61971 5.45238 9.66769 5.59999 9.66666C5.71678 9.66747 5.83172 9.63758 5.93333 9.58L7.66666 8.58L7.72666 8.51999L7.83333 8.43333C7.85939 8.40033 7.88175 8.36455 7.89999 8.32666C7.92172 8.29087 7.9396 8.25288 7.95333 8.21333C7.97146 8.17094 7.98271 8.12593 7.98666 8.08L7.99999 8V4.66666C7.99999 4.48985 7.92976 4.32028 7.80473 4.19526C7.67971 4.07023 7.51014 3.99999 7.33333 3.99999Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">12:00AM</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2.98667C10.9391 1.92581 9.50028 1.32982 7.99999 1.32982C6.4997 1.32982 5.06086 1.92581 3.99999 2.98667C2.93913 4.04754 2.34314 5.48638 2.34314 6.98667C2.34314 8.48696 2.93913 9.92581 3.99999 10.9867L7.51333 14.5067C7.5753 14.5692 7.64904 14.6188 7.73028 14.6526C7.81152 14.6864 7.89865 14.7039 7.98666 14.7039C8.07467 14.7039 8.1618 14.6864 8.24304 14.6526C8.32428 14.6188 8.39802 14.5692 8.45999 14.5067L12 10.9533C13.0564 9.89689 13.6499 8.46404 13.6499 6.97001C13.6499 5.47597 13.0564 4.04312 12 2.98667ZM11.0467 10L7.99999 13.06L4.95333 10C4.35142 9.39755 3.94164 8.63017 3.77579 7.79487C3.60994 6.95956 3.69545 6.09384 4.02153 5.30713C4.34761 4.52042 4.89961 3.84804 5.60775 3.37499C6.31589 2.90194 7.14838 2.64946 7.99999 2.64946C8.8516 2.64946 9.6841 2.90194 10.3922 3.37499C11.1004 3.84804 11.6524 4.52042 11.9785 5.30713C12.3045 6.09384 12.3901 6.95956 12.2242 7.79487C12.0583 8.63017 11.6486 9.39755 11.0467 10ZM5.99999 4.94001C5.4618 5.47985 5.15959 6.21105 5.15959 6.97334C5.15959 7.73563 5.4618 8.46683 5.99999 9.00667C6.39983 9.4072 6.90905 9.68073 7.46376 9.79294C8.01847 9.90516 8.59396 9.85106 9.11804 9.63744C9.64212 9.42382 10.0914 9.06019 10.4096 8.59217C10.7278 8.12415 10.9007 7.57259 10.9067 7.00667C10.9097 6.62881 10.8369 6.25418 10.6926 5.90493C10.5483 5.55568 10.3355 5.23891 10.0667 4.97334C9.80244 4.70306 9.48738 4.4877 9.13961 4.33965C8.79184 4.1916 8.41822 4.11379 8.04026 4.11069C7.6623 4.10759 7.28746 4.17927 6.93731 4.3216C6.58716 4.46393 6.26861 4.67409 5.99999 4.94001ZM9.12666 8.06001C8.87402 8.3165 8.54013 8.47727 8.18208 8.51484C7.82402 8.55241 7.46404 8.46443 7.16366 8.26596C6.86329 8.06748 6.64119 7.77083 6.53533 7.42673C6.42947 7.08262 6.44643 6.71243 6.5833 6.37944C6.72017 6.04645 6.96846 5.77135 7.28572 5.60116C7.60297 5.43098 7.96949 5.37628 8.32262 5.44642C8.67574 5.51656 8.99353 5.70718 9.22167 5.98569C9.4498 6.26421 9.5741 6.61332 9.57333 6.97334C9.56363 7.38485 9.39099 7.77569 9.09333 8.06001H9.12666Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">Remotely</p>
                </div>
              </div>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
        </div>
        <div class="w-full p-2">
          <h3 class="mb-1 font-medium text-lg text-coolGray-900">Daily with developers</h3>
          <div class="flex flex-wrap items-center pb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.33333 1.33333C6.01478 1.33333 4.72585 1.72432 3.62952 2.45686C2.5332 3.18941 1.67871 4.2306 1.17413 5.44877C0.669545 6.66695 0.537523 8.00739 0.794758 9.3006C1.05199 10.5938 1.68693 11.7817 2.61928 12.714C3.55163 13.6464 4.73952 14.2813 6.03272 14.5386C7.32593 14.7958 8.66638 14.6638 9.88455 14.1592C11.1027 13.6546 12.1439 12.8001 12.8765 11.7038C13.609 10.6075 14 9.31854 14 8C14 7.12452 13.8276 6.25761 13.4925 5.44877C13.1575 4.63993 12.6664 3.90501 12.0474 3.28595C11.4283 2.66689 10.6934 2.17583 9.88455 1.8408C9.07571 1.50577 8.20881 1.33333 7.33333 1.33333ZM7.33333 13.3333C6.27849 13.3333 5.24735 13.0205 4.37028 12.4345C3.49322 11.8485 2.80964 11.0155 2.40597 10.041C2.0023 9.06643 1.89668 7.99408 2.10247 6.95951C2.30826 5.92495 2.81621 4.97464 3.56209 4.22876C4.30797 3.48288 5.25828 2.97493 6.29284 2.76914C7.32741 2.56335 8.39977 2.66897 9.3743 3.07264C10.3488 3.47631 11.1818 4.15989 11.7678 5.03695C12.3539 5.91402 12.6667 6.94516 12.6667 8C12.6667 9.41448 12.1048 10.771 11.1046 11.7712C10.1044 12.7714 8.74781 13.3333 7.33333 13.3333ZM7.33333 3.99999C7.15652 3.99999 6.98695 4.07023 6.86192 4.19526C6.7369 4.32028 6.66666 4.48985 6.66666 4.66666V7.61333L5.26666 8.42C5.13823 8.49277 5.03759 8.60611 4.98051 8.74225C4.92344 8.87838 4.91316 9.02961 4.95129 9.17222C4.98942 9.31482 5.0738 9.44074 5.1912 9.53022C5.3086 9.61971 5.45238 9.66769 5.59999 9.66666C5.71678 9.66747 5.83172 9.63758 5.93333 9.58L7.66666 8.58L7.72666 8.51999L7.83333 8.43333C7.85939 8.40033 7.88175 8.36455 7.89999 8.32666C7.92172 8.29087 7.9396 8.25288 7.95333 8.21333C7.97146 8.17094 7.98271 8.12593 7.98666 8.08L7.99999 8V4.66666C7.99999 4.48985 7.92976 4.32028 7.80473 4.19526C7.67971 4.07023 7.51014 3.99999 7.33333 3.99999Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">01:00PM</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2.98667C10.9391 1.92581 9.50028 1.32982 7.99999 1.32982C6.4997 1.32982 5.06086 1.92581 3.99999 2.98667C2.93913 4.04754 2.34314 5.48638 2.34314 6.98667C2.34314 8.48696 2.93913 9.92581 3.99999 10.9867L7.51333 14.5067C7.5753 14.5692 7.64904 14.6188 7.73028 14.6526C7.81152 14.6864 7.89865 14.7039 7.98666 14.7039C8.07467 14.7039 8.1618 14.6864 8.24304 14.6526C8.32428 14.6188 8.39802 14.5692 8.45999 14.5067L12 10.9533C13.0564 9.89689 13.6499 8.46404 13.6499 6.97001C13.6499 5.47597 13.0564 4.04312 12 2.98667ZM11.0467 10L7.99999 13.06L4.95333 10C4.35142 9.39755 3.94164 8.63017 3.77579 7.79487C3.60994 6.95956 3.69545 6.09384 4.02153 5.30713C4.34761 4.52042 4.89961 3.84804 5.60775 3.37499C6.31589 2.90194 7.14838 2.64946 7.99999 2.64946C8.8516 2.64946 9.6841 2.90194 10.3922 3.37499C11.1004 3.84804 11.6524 4.52042 11.9785 5.30713C12.3045 6.09384 12.3901 6.95956 12.2242 7.79487C12.0583 8.63017 11.6486 9.39755 11.0467 10ZM5.99999 4.94001C5.4618 5.47985 5.15959 6.21105 5.15959 6.97334C5.15959 7.73563 5.4618 8.46683 5.99999 9.00667C6.39983 9.4072 6.90905 9.68073 7.46376 9.79294C8.01847 9.90516 8.59396 9.85106 9.11804 9.63744C9.64212 9.42382 10.0914 9.06019 10.4096 8.59217C10.7278 8.12415 10.9007 7.57259 10.9067 7.00667C10.9097 6.62881 10.8369 6.25418 10.6926 5.90493C10.5483 5.55568 10.3355 5.23891 10.0667 4.97334C9.80244 4.70306 9.48738 4.4877 9.13961 4.33965C8.79184 4.1916 8.41822 4.11379 8.04026 4.11069C7.6623 4.10759 7.28746 4.17927 6.93731 4.3216C6.58716 4.46393 6.26861 4.67409 5.99999 4.94001ZM9.12666 8.06001C8.87402 8.3165 8.54013 8.47727 8.18208 8.51484C7.82402 8.55241 7.46404 8.46443 7.16366 8.26596C6.86329 8.06748 6.64119 7.77083 6.53533 7.42673C6.42947 7.08262 6.44643 6.71243 6.5833 6.37944C6.72017 6.04645 6.96846 5.77135 7.28572 5.60116C7.60297 5.43098 7.96949 5.37628 8.32262 5.44642C8.67574 5.51656 8.99353 5.70718 9.22167 5.98569C9.4498 6.26421 9.5741 6.61332 9.57333 6.97334C9.56363 7.38485 9.39099 7.77569 9.09333 8.06001H9.12666Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">Remotely</p>
                </div>
              </div>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
        </div>
        <div class="w-full p-2">
          <h3 class="mb-1 font-medium text-lg text-coolGray-900">Pitching new project</h3>
          <div class="flex flex-wrap items-center pb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.33333 1.33333C6.01478 1.33333 4.72585 1.72432 3.62952 2.45686C2.5332 3.18941 1.67871 4.2306 1.17413 5.44877C0.669545 6.66695 0.537523 8.00739 0.794758 9.3006C1.05199 10.5938 1.68693 11.7817 2.61928 12.714C3.55163 13.6464 4.73952 14.2813 6.03272 14.5386C7.32593 14.7958 8.66638 14.6638 9.88455 14.1592C11.1027 13.6546 12.1439 12.8001 12.8765 11.7038C13.609 10.6075 14 9.31854 14 8C14 7.12452 13.8276 6.25761 13.4925 5.44877C13.1575 4.63993 12.6664 3.90501 12.0474 3.28595C11.4283 2.66689 10.6934 2.17583 9.88455 1.8408C9.07571 1.50577 8.20881 1.33333 7.33333 1.33333ZM7.33333 13.3333C6.27849 13.3333 5.24735 13.0205 4.37028 12.4345C3.49322 11.8485 2.80964 11.0155 2.40597 10.041C2.0023 9.06643 1.89668 7.99408 2.10247 6.95951C2.30826 5.92495 2.81621 4.97464 3.56209 4.22876C4.30797 3.48288 5.25828 2.97493 6.29284 2.76914C7.32741 2.56335 8.39977 2.66897 9.3743 3.07264C10.3488 3.47631 11.1818 4.15989 11.7678 5.03695C12.3539 5.91402 12.6667 6.94516 12.6667 8C12.6667 9.41448 12.1048 10.771 11.1046 11.7712C10.1044 12.7714 8.74781 13.3333 7.33333 13.3333ZM7.33333 3.99999C7.15652 3.99999 6.98695 4.07023 6.86192 4.19526C6.7369 4.32028 6.66666 4.48985 6.66666 4.66666V7.61333L5.26666 8.42C5.13823 8.49277 5.03759 8.60611 4.98051 8.74225C4.92344 8.87838 4.91316 9.02961 4.95129 9.17222C4.98942 9.31482 5.0738 9.44074 5.1912 9.53022C5.3086 9.61971 5.45238 9.66769 5.59999 9.66666C5.71678 9.66747 5.83172 9.63758 5.93333 9.58L7.66666 8.58L7.72666 8.51999L7.83333 8.43333C7.85939 8.40033 7.88175 8.36455 7.89999 8.32666C7.92172 8.29087 7.9396 8.25288 7.95333 8.21333C7.97146 8.17094 7.98271 8.12593 7.98666 8.08L7.99999 8V4.66666C7.99999 4.48985 7.92976 4.32028 7.80473 4.19526C7.67971 4.07023 7.51014 3.99999 7.33333 3.99999Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">02:00PM</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2.98667C10.9391 1.92581 9.50028 1.32982 7.99999 1.32982C6.4997 1.32982 5.06086 1.92581 3.99999 2.98667C2.93913 4.04754 2.34314 5.48638 2.34314 6.98667C2.34314 8.48696 2.93913 9.92581 3.99999 10.9867L7.51333 14.5067C7.5753 14.5692 7.64904 14.6188 7.73028 14.6526C7.81152 14.6864 7.89865 14.7039 7.98666 14.7039C8.07467 14.7039 8.1618 14.6864 8.24304 14.6526C8.32428 14.6188 8.39802 14.5692 8.45999 14.5067L12 10.9533C13.0564 9.89689 13.6499 8.46404 13.6499 6.97001C13.6499 5.47597 13.0564 4.04312 12 2.98667ZM11.0467 10L7.99999 13.06L4.95333 10C4.35142 9.39755 3.94164 8.63017 3.77579 7.79487C3.60994 6.95956 3.69545 6.09384 4.02153 5.30713C4.34761 4.52042 4.89961 3.84804 5.60775 3.37499C6.31589 2.90194 7.14838 2.64946 7.99999 2.64946C8.8516 2.64946 9.6841 2.90194 10.3922 3.37499C11.1004 3.84804 11.6524 4.52042 11.9785 5.30713C12.3045 6.09384 12.3901 6.95956 12.2242 7.79487C12.0583 8.63017 11.6486 9.39755 11.0467 10ZM5.99999 4.94001C5.4618 5.47985 5.15959 6.21105 5.15959 6.97334C5.15959 7.73563 5.4618 8.46683 5.99999 9.00667C6.39983 9.4072 6.90905 9.68073 7.46376 9.79294C8.01847 9.90516 8.59396 9.85106 9.11804 9.63744C9.64212 9.42382 10.0914 9.06019 10.4096 8.59217C10.7278 8.12415 10.9007 7.57259 10.9067 7.00667C10.9097 6.62881 10.8369 6.25418 10.6926 5.90493C10.5483 5.55568 10.3355 5.23891 10.0667 4.97334C9.80244 4.70306 9.48738 4.4877 9.13961 4.33965C8.79184 4.1916 8.41822 4.11379 8.04026 4.11069C7.6623 4.10759 7.28746 4.17927 6.93731 4.3216C6.58716 4.46393 6.26861 4.67409 5.99999 4.94001ZM9.12666 8.06001C8.87402 8.3165 8.54013 8.47727 8.18208 8.51484C7.82402 8.55241 7.46404 8.46443 7.16366 8.26596C6.86329 8.06748 6.64119 7.77083 6.53533 7.42673C6.42947 7.08262 6.44643 6.71243 6.5833 6.37944C6.72017 6.04645 6.96846 5.77135 7.28572 5.60116C7.60297 5.43098 7.96949 5.37628 8.32262 5.44642C8.67574 5.51656 8.99353 5.70718 9.22167 5.98569C9.4498 6.26421 9.5741 6.61332 9.57333 6.97334C9.56363 7.38485 9.39099 7.77569 9.09333 8.06001H9.12666Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">Remotely</p>
                </div>
              </div>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
        </div>
        <div class="w-full p-2">
          <h3 class="mb-1 font-medium text-lg text-coolGray-900">Pitching new project</h3>
          <div class="flex flex-wrap items-center pb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.33333 1.33333C6.01478 1.33333 4.72585 1.72432 3.62952 2.45686C2.5332 3.18941 1.67871 4.2306 1.17413 5.44877C0.669545 6.66695 0.537523 8.00739 0.794758 9.3006C1.05199 10.5938 1.68693 11.7817 2.61928 12.714C3.55163 13.6464 4.73952 14.2813 6.03272 14.5386C7.32593 14.7958 8.66638 14.6638 9.88455 14.1592C11.1027 13.6546 12.1439 12.8001 12.8765 11.7038C13.609 10.6075 14 9.31854 14 8C14 7.12452 13.8276 6.25761 13.4925 5.44877C13.1575 4.63993 12.6664 3.90501 12.0474 3.28595C11.4283 2.66689 10.6934 2.17583 9.88455 1.8408C9.07571 1.50577 8.20881 1.33333 7.33333 1.33333ZM7.33333 13.3333C6.27849 13.3333 5.24735 13.0205 4.37028 12.4345C3.49322 11.8485 2.80964 11.0155 2.40597 10.041C2.0023 9.06643 1.89668 7.99408 2.10247 6.95951C2.30826 5.92495 2.81621 4.97464 3.56209 4.22876C4.30797 3.48288 5.25828 2.97493 6.29284 2.76914C7.32741 2.56335 8.39977 2.66897 9.3743 3.07264C10.3488 3.47631 11.1818 4.15989 11.7678 5.03695C12.3539 5.91402 12.6667 6.94516 12.6667 8C12.6667 9.41448 12.1048 10.771 11.1046 11.7712C10.1044 12.7714 8.74781 13.3333 7.33333 13.3333ZM7.33333 3.99999C7.15652 3.99999 6.98695 4.07023 6.86192 4.19526C6.7369 4.32028 6.66666 4.48985 6.66666 4.66666V7.61333L5.26666 8.42C5.13823 8.49277 5.03759 8.60611 4.98051 8.74225C4.92344 8.87838 4.91316 9.02961 4.95129 9.17222C4.98942 9.31482 5.0738 9.44074 5.1912 9.53022C5.3086 9.61971 5.45238 9.66769 5.59999 9.66666C5.71678 9.66747 5.83172 9.63758 5.93333 9.58L7.66666 8.58L7.72666 8.51999L7.83333 8.43333C7.85939 8.40033 7.88175 8.36455 7.89999 8.32666C7.92172 8.29087 7.9396 8.25288 7.95333 8.21333C7.97146 8.17094 7.98271 8.12593 7.98666 8.08L7.99999 8V4.66666C7.99999 4.48985 7.92976 4.32028 7.80473 4.19526C7.67971 4.07023 7.51014 3.99999 7.33333 3.99999Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">02:00PM</p>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2.98667C10.9391 1.92581 9.50028 1.32982 7.99999 1.32982C6.4997 1.32982 5.06086 1.92581 3.99999 2.98667C2.93913 4.04754 2.34314 5.48638 2.34314 6.98667C2.34314 8.48696 2.93913 9.92581 3.99999 10.9867L7.51333 14.5067C7.5753 14.5692 7.64904 14.6188 7.73028 14.6526C7.81152 14.6864 7.89865 14.7039 7.98666 14.7039C8.07467 14.7039 8.1618 14.6864 8.24304 14.6526C8.32428 14.6188 8.39802 14.5692 8.45999 14.5067L12 10.9533C13.0564 9.89689 13.6499 8.46404 13.6499 6.97001C13.6499 5.47597 13.0564 4.04312 12 2.98667ZM11.0467 10L7.99999 13.06L4.95333 10C4.35142 9.39755 3.94164 8.63017 3.77579 7.79487C3.60994 6.95956 3.69545 6.09384 4.02153 5.30713C4.34761 4.52042 4.89961 3.84804 5.60775 3.37499C6.31589 2.90194 7.14838 2.64946 7.99999 2.64946C8.8516 2.64946 9.6841 2.90194 10.3922 3.37499C11.1004 3.84804 11.6524 4.52042 11.9785 5.30713C12.3045 6.09384 12.3901 6.95956 12.2242 7.79487C12.0583 8.63017 11.6486 9.39755 11.0467 10ZM5.99999 4.94001C5.4618 5.47985 5.15959 6.21105 5.15959 6.97334C5.15959 7.73563 5.4618 8.46683 5.99999 9.00667C6.39983 9.4072 6.90905 9.68073 7.46376 9.79294C8.01847 9.90516 8.59396 9.85106 9.11804 9.63744C9.64212 9.42382 10.0914 9.06019 10.4096 8.59217C10.7278 8.12415 10.9007 7.57259 10.9067 7.00667C10.9097 6.62881 10.8369 6.25418 10.6926 5.90493C10.5483 5.55568 10.3355 5.23891 10.0667 4.97334C9.80244 4.70306 9.48738 4.4877 9.13961 4.33965C8.79184 4.1916 8.41822 4.11379 8.04026 4.11069C7.6623 4.10759 7.28746 4.17927 6.93731 4.3216C6.58716 4.46393 6.26861 4.67409 5.99999 4.94001ZM9.12666 8.06001C8.87402 8.3165 8.54013 8.47727 8.18208 8.51484C7.82402 8.55241 7.46404 8.46443 7.16366 8.26596C6.86329 8.06748 6.64119 7.77083 6.53533 7.42673C6.42947 7.08262 6.44643 6.71243 6.5833 6.37944C6.72017 6.04645 6.96846 5.77135 7.28572 5.60116C7.60297 5.43098 7.96949 5.37628 8.32262 5.44642C8.67574 5.51656 8.99353 5.70718 9.22167 5.98569C9.4498 6.26421 9.5741 6.61332 9.57333 6.97334C9.56363 7.38485 9.39099 7.77569 9.09333 8.06001H9.12666Z" fill="#D5DAE1"></path>
                  </svg>
                </div>
                <div class="w-auto">
                  <p class="text-xs font-medium text-coolGray-500">Remotely</p>
                </div>
              </div>
            </div>
          </div>
          <div class="border-b border-coolGray-100"></div>
        </div>
        <div class="w-full p-2">
          <button class="px-4 py-1 mt-1 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">See all schedules</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 2xl:py-44 font-normal bg-white">
  <div class="container px-4 mx-auto">
    <div class="mb-28">
      <span class="mb-9 block font-medium uppercase tracking-widest text-xs text-gray-300 leading-4">More data</span>
      <h2 class="font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Workable</h2>
    </div>
    <div class="overflow-x-auto">
      <img class="ml-10" src="uinel-assets/elements/tables/border-top-purple.png" alt="">
      <div class="inline-block min-w-full border border-gray-100 overflow-hidden rounded-5xl">
        <table class="table-auto w-full">
          <thead>
            <tr class="border-b border-gray-100">
              <th class="min-w-max flex items-center pr-24 pl-16 lg:pl-32 h-20 font-semibold uppercase text-left text-lg bg-gray-50">
                <div class="flex">
                  <input class="mr-9 border-none form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                </div>
                <span>Our plans and pricing</span>
              </th>
              <th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 1</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 2</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 3</th><th class="font-semibold uppercase h-20 text-lg bg-gray-50">Feature 4</th><th class="pr-16 lg:pr-32 font-semibold uppercase h-20 text-lg bg-gray-50">Feature 5</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b border-gray-100">
              <td class="relative pl-16 lg:pl-32 h-24 font-medium text-lg">
                <div class="flex items-center pt-5">
                  <div>
                    <input class="mr-9 form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                  </div>
                  <span>Number of Team Members</span>
                </div>
                <div class="absolute -bottom-px left-0 w-10 h-px bg-white"></div>
              </td>
              <td class="px-5 py-5 text-center bg-white text-lg text-darkBlueGray-400 h-24">
                <p class="pt-5">5</p>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24 flex items-center justify-center">
                <p class="pt-5">20</p>
                <div class="mt-5 ml-3 bg-green-200 text-green-700 text-sm font-bold rounded-full px-3 py-1 flex items-center">
                  <div class="mr-1">
                    <img src="uinel-assets/elements/tables/arrow-up-green.svg" alt="">
                  </div>
                  <span>9%</span>
                </div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <p class="pt-5">200+</p>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <p class="pt-5">Unlimited</p>
              </td>
              <td class="relative pr-16 lg:pr-32 text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <p class="pt-5">Unlimited</p>
                <div class="absolute -bottom-px right-0 w-10 h-px bg-white"></div>
              </td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="relative pl-16 lg:pl-32 font-medium text-lg h-24">
                <div class="flex items-center">
                  <input class="mr-9 form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                  <span>Users</span>
                </div>
                <div class="absolute -bottom-px left-0 w-10 h-px bg-white"></div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">3</td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24 flex items-center justify-center">
                <span>18</span>
                <div class="ml-3 bg-green-200 text-green-700 text-sm font-bold rounded-full px-3 py-1 flex items-center">
                  <div class="mr-1">
                    <img src="uinel-assets/elements/tables/arrow-up-green.svg" alt="">
                  </div>
                  <span>6%</span>
                </div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">50+</td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">100+</td>
              <td class="relative pr-16 lg:pr-32 text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <span>200+</span>
                <div class="absolute -bottom-px right-0 w-10 h-px bg-white"></div>
              </td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="relative pl-16 lg:pl-32 font-medium text-lg h-24">
                <div class="flex items-center">
                  <input class="mr-9 form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                  <span>Projects</span>
                </div>
                <div class="absolute -bottom-px left-0 w-10 h-px bg-white"></div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">3/mo</td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24 flex items-center justify-center">
                <span>15</span>
                <div class="ml-3 bg-orange-200 text-orange-700 text-sm font-bold rounded-full px-3 py-1 flex items-center">
                  <div class="mr-1">
                    <img src="uinel-assets/elements/tables/arrow-down-orange.svg" alt="">
                  </div>
                  <span>3%</span>
                </div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">Unlimited</td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">Unlimited</td>
              <td class="relative pr-16 lg:pr-32 text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <span>300+</span>
                <div class="absolute -bottom-px right-0 w-10 h-px bg-white"></div>
              </td>
            </tr>
            <tr class="border-b border-gray-100">
              <td class="relative pl-16 lg:pl-32 font-medium text-lg h-24">
                <div class="flex items-center">
                  <input class="mr-9 form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                  <span>Video Chat</span>
                </div>
                <div class="absolute -bottom-px left-0 w-10 h-px bg-white"></div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <img class="mx-auto" src="uinel-assets/elements/tables/checkmark.svg" alt="">
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24 flex items-center justify-center">
                <span>13</span>
                <div class="ml-3 bg-green-200 text-green-700 text-sm font-bold rounded-full px-3 py-1 flex items-center">
                  <div class="mr-1">
                    <img src="uinel-assets/elements/tables/arrow-up-green.svg" alt="">
                  </div>
                  <span>8%</span>
                </div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <img class="mx-auto" src="uinel-assets/elements/tables/checkmark.svg" alt="">
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <img class="mx-auto" src="uinel-assets/elements/tables/checkmark.svg" alt="">
              </td>
              <td class="relative pr-16 lg:pr-32 text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <img class="mx-auto" src="uinel-assets/elements/tables/checkmark.svg" alt="">
                <div class="absolute -bottom-px right-0 w-10 h-px bg-white"></div>
              </td>
            </tr>
            <tr>
              <td class="relative pl-16 lg:pl-32 font-medium text-lg h-24">
                <div class="flex items-center">
                  <div>
                    <input class="mr-9 form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                  </div>
                  <span>Real-Time Collaboration</span>
                </div>
                <div class="absolute -bottom-px left-0 w-10 h-px bg-white"></div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <img class="mx-auto" src="uinel-assets/elements/tables/none.svg" alt="">
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24 flex items-center justify-center">
                <span>11</span>
                <div class="ml-3 bg-orange-200 text-orange-700 text-sm font-bold rounded-full px-3 py-1 flex items-center">
                  <div class="mr-1">
                    <img src="uinel-assets/elements/tables/arrow-down-orange.svg" alt="">
                  </div>
                  <span>9%</span>
                </div>
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <img class="mx-auto" src="uinel-assets/elements/tables/checkmark.svg" alt="">
              </td>
              <td class="text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <img class="mx-auto" src="uinel-assets/elements/tables/checkmark.svg" alt="">
              </td>
              <td class="pr-16 lg:pr-32 text-center px-5 py-5 bg-white text-lg text-darkBlueGray-400 h-24">
                <img class="mx-auto" src="uinel-assets/elements/tables/checkmark.svg" alt="">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="py-12 px-4 md:px-10 bg-white shadow-lg">
        <div class="px-4 pb-2 overflow-x-auto">
          <table class="table-auto w-full text-left min-w-max">
            <thead>
              <tr>
                <th scope="col"></th>
                <th scope="col"><small class="font-normal" >Feature 1</small></th>
                <th scope="col"><small class="font-normal" >Feature 2</small></th>
                <th scope="col"><small class="font-normal" >Feature 3</small></th>
                <th scope="col"><small class="font-normal" >Feature 4</small></th>
                <th scope="col"><small class="font-normal" >Feature 5</small></th>
              </tr>
            </thead>
            <tbody>
              <tr class="bg-gray-100">
                <th class="pl-2 py-3" scope="row"><small class="font-normal" >Number of Team Members</small></th>
                <td class="py-3"><small class="font-normal" >5</small></td>
                <td class="py-3"><small class="font-normal" >20</small></td>
                <td class="py-3"><small class="font-normal" >200+</small></td>
                <td class="py-3"><small class="font-normal" >Unlimited</small></td>
                <td class="pr-2 py-3"><small class="font-normal" >Unlimited</small></td>
              </tr>
              <tr>
                <th class="pl-2 py-3" scope="row"><small class="font-normal" >Users</small></th>
                <td class="py-3"><small class="font-normal" >10</small></td>
                <td class="py-3"><small class="font-normal" >45</small></td>
                <td class="py-3"><small class="font-normal" >500+</small></td>
                <td class="py-3"><small class="font-normal" >100+</small></td>
                <td class="pr-2 py-3"><small class="font-normal" >Unlimited</small></td>
              </tr>
              <tr class="bg-gray-100">
                <th class="pl-2 py-3" scope="row"><small class="font-normal" >Projects</small></th>
                <td class="py-3"><small class="font-normal" >10</small></td>
                <td class="py-3"><small class="font-normal" >45</small></td>
                <td class="py-3"><small class="font-normal" >25/mo</small></td>
                <td class="py-3"><small class="font-normal" >Unlimited</small></td>
                <td class="pr-2 py-3"><small class="font-normal" >Unlimited</small></td>
              </tr>
              <tr>
                <th class="pl-2 py-3" scope="row"><small class="font-normal" >Video Chat</small></th>
                <td class="py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="pr-2 py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
              </tr>
              <tr class="bg-gray-100">
                <th class="pl-2 py-3" scope="row"><small class="font-normal" >Real-Time Collaboration</small></th>
                <td class="py-3">
                  <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1L11 1" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1L11 1" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="pr-2 py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
              </tr>
              <tr>
                <th class="pl-2 py-3" scope="row"><small class="font-normal" >Support</small></th>
                <td class="py-3">
                  <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1L11 1" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1L11 1" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1L11 1" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
                <td class="pr-2 py-3">
                  <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.0001 1L4.00004 8.00002L1 5" stroke="#CFBDFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="bg-white px-6 py-4 rounded shadow">
      <table class="w-full">
        <thead>
          <tr class="text-xs"><th class="pb-4 font-normal text-left">Package</th><th class="pb-4 font-normal">Feature 1</th><th class="pb-4 font-normal">Feature 2</th><th class="pb-4 font-normal">Feature 3</th><th class="pb-4 font-normal">Feature 4</th><th class="pb-4 font-normal">Feature 5</th></tr>
        </thead>
        <tbody>
          <tr class="bg-blueGray-100">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 1</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-white">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 2</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-blueGray-100">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 3</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-white">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 4</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-blueGray-100">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 5</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-white">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 6</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-blueGray-100">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 7</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
          </tr>
          <tr class="bg-white">
            <td class="px-6 py-4 text-xs font-semibold">Example for Package 8</td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="px-6 py-4">
              <svg class="w-6 h-6 mx-auto text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="py-4 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <a class="group mb-2 inline-flex items-center text-sm" href="#">
      <svg class="mr-3 text-neutral-500 group-hover:text-neutral-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.13634 13.197C6.42923 13.4899 6.9041 13.4899 7.197 13.197C7.48989 12.9041 7.48989 12.4292 7.197 12.1363L6.13634 13.197ZM2 7.99998L1.46967 7.46965C1.32902 7.6103 1.25 7.80107 1.25 7.99998C1.25 8.19889 1.32902 8.38966 1.46967 8.53031L2 7.99998ZM7.197 3.86364C7.48989 3.57075 7.48989 3.09588 7.197 2.80298C6.9041 2.51009 6.42923 2.51009 6.13634 2.80298L7.197 3.86364ZM14 8.74998C14.4142 8.74998 14.75 8.41419 14.75 7.99998C14.75 7.58577 14.4142 7.24998 14 7.24998V8.74998ZM7.197 12.1363L2.53033 7.46965L1.46967 8.53031L6.13634 13.197L7.197 12.1363ZM2.53033 8.53031L7.197 3.86364L6.13634 2.80298L1.46967 7.46965L2.53033 8.53031ZM2 8.74998L14 8.74998V7.24998L2 7.24998L2 8.74998Z" fill="currentColor"></path>
      </svg>
      <span class="text-neutral-500 group-hover:text-neutral-600">Back to Home</span>
    </a>
    <h2 class="font-heading mb-11 text-xl font-semibold">Media Files</h2>
    <div class="flex flex-wrap -m-3">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media2.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media3.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media4.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media5.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media6.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media7.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media8.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media9.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 p-3">
        <a href="#">
          <img class="mb-4 w-full" src="dashy-assets/images/table-grid-media10.png" alt="">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="font-heading text-sm font-semibold">Image 001</h3>
            </div>
            <div class="w-auto p-2">
              <p class="text-xs text-neutral-400">1.04 MB</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

<section class="py-20 md:py-40 bg-black">
  <div class="container px-4 mx-auto">
    <h1 class="font-heading text-6xl sm:text-7xl text-white font-semibold mb-24">Looking for team plans?</h1>
    <div class="w-full pb-6 px-1 bg-gray-900 rounded-lg overflow-x-auto">
      <table class="w-full min-w-max">
        <thead>
          <tr>
            <th class="p-0">
              <div class="h-20 flex items-center pl-12 pr-6">
                <span class="text-xl text-white font-semibold">Learn a new skills</span>
              </div>
            </th>
            <th class="p-0">
              <div class="h-20 flex items-center justify-center">
                <span class="text-xs text-gray-300">Free</span>
              </div>
            </th>
            <th class="p-0">
              <div class="h-20 flex items-center justify-center">
                <span class="text-xs text-gray-300">LOCATION</span>
              </div>
            </th>
            <th class="p-0">
              <div class="h-20 flex items-center justify-center">
                <span class="text-xs text-gray-300">Business</span>
              </div>
            </th>
            <th class="p-0">
              <div class="h-20 flex items-center justify-center pr-12">
                <span class="text-xs text-gray-300">Business Plus</span>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="p-0">
              <div class="pl-12 bg-black rounded-tl-lg">
                <div class="flex h-16 items-center w-full pr-6 border-r border-b border-gray-900">
                  <span class="text-sm font-medium text-gray-200 uppercase">All Courses</span>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="pr-12 bg-black rounded-tr-lg">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="p-0">
              <div class="pl-12 bg-black">
                <div class="flex h-16 items-center w-full pr-6 border-r border-b border-gray-900">
                  <span class="text-sm font-medium text-gray-200 uppercase">Learning resources</span>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="pr-12 bg-black">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="p-0">
              <div class="pl-12 bg-black rounded-bl-lg">
                <div class="flex h-16 items-center w-full pr-6 border-r border-gray-900">
                  <span class="text-sm font-medium text-gray-200 uppercase">support</span>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="pr-12 bg-black rounded-br-lg">
                <div class="flex h-16 px-20 items-center justify-center w-full">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <table class="w-full min-w-max">
        <thead>
          <tr>
            <th class="p-0">
              <div class="h-20 flex items-center pl-12 pr-6">
                <span class="text-xl text-white font-semibold">Learn the basics</span>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="p-0">
              <div class="pl-12 bg-black rounded-tl-lg">
                <div class="flex h-16 items-center w-full pr-6 border-r border-b border-gray-900">
                  <span class="text-sm font-medium text-gray-200 uppercase">Assessments</span>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="pr-12 bg-black rounded-tr-lg">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="p-0">
              <div class="pl-12 bg-black">
                <div class="flex h-16 items-center w-full pr-6 border-r border-b border-gray-900">
                  <span class="text-sm font-medium text-gray-200 uppercase">Practice application</span>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="pr-12 bg-black">
                <div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="p-0">
              <div class="pl-12 bg-black rounded-bl-lg">
                <div class="flex h-16 items-center w-full pr-6 border-r border-gray-900">
                  <span class="text-sm font-medium text-gray-200 uppercase">support</span>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="bg-black border-r border-gray-900">
                <div class="flex h-16 px-20 items-center justify-center w-full">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
            <td class="p-0">
              <div class="pr-12 bg-black rounded-br-lg">
                <div class="flex h-16 px-20 items-center justify-center w-full">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<section class="py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-2/3 p-4">
                <div class="p-8 border border-gray-200 rounded-2xl">
                    <div class="flex mb-4 items-center justify-between">
                        <div>
                            <div class="flex items-center mb-1">
                                <h6 class="text-blue-900 font-semibold mr-2">Tasks</h6>
                                <span class="py-1 px-3 bg-blue-50 rounded-md text-blue-500 text-xs font-bold">5</span>
                            </div>
                            <p class="text-gray-500 text-sm">Your current tasks</p>
                        </div>
                        <a href="#" class="inline-flex items-center justify-center px-6 py-3 h-full rounded-2xl text-white text-sm font-medium shadow-sm bg-blue-500 hover:bg-blue-600 focus:ring focus:ring-blue-300 transition duration-200">
                            <span class="mr-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <path d="M2.5 8H13.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M8 2.5V13.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </span>
                            <span>Create</span>
                        </a>
                    </div>
                    <div class="py-6 border-b border-gray-200">
                        <div class="flex justify-between items-center">
                          <div class="flex items-center">
                            <span class="inline-flex mr-4 justify-center items-center rounded-2xl bg-green-50 w-10 h-10">
                              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 8.2381H3.84615L6.15385 3L9.84615 13L12.1538 8.2381H14" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                              </svg>
                            </span>
                            <div>
                              <p class="text-blue-900 text-sm font-semibold mb-1">Testing</p>
                              <p class="text-gray-500 text-xs">QA Managers</p>
                            </div>
                          </div>
                          <div class="flex items-center">
                            <span class="px-3 py-1 rounded-md bg-blue-50 text-blue-500 text-xs font-bold uppercase mr-9">3 Tasks</span>
                            <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>
                    </div>
                    <div class="py-6 border-b border-gray-200">
                        <div class="flex justify-between items-center">
                          <div class="flex items-center">
                            <span class="inline-flex mr-4 justify-center items-center rounded-2xl bg-green-50 w-10 h-10">
                              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 8.2381H3.84615L6.15385 3L9.84615 13L12.1538 8.2381H14" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                              </svg>
                            </span>
                            <div>
                              <p class="text-blue-900 text-sm font-semibold mb-1">Testing</p>
                              <p class="text-gray-500 text-xs">QA Managers</p>
                            </div>
                          </div>
                          <div class="flex items-center">
                            <span class="px-3 py-1 rounded-md bg-blue-50 text-blue-500 text-xs font-bold uppercase mr-9">3 Tasks</span>
                            <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>
                    </div>
                    <div class="py-6 border-b border-gray-200">
                        <div class="flex justify-between items-center">
                          <div class="flex items-center">
                            <span class="inline-flex mr-4 justify-center items-center rounded-2xl bg-green-50 w-10 h-10">
                              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 8.2381H3.84615L6.15385 3L9.84615 13L12.1538 8.2381H14" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                              </svg>
                            </span>
                            <div>
                              <p class="text-blue-900 text-sm font-semibold mb-1">Testing</p>
                              <p class="text-gray-500 text-xs">QA Managers</p>
                            </div>
                          </div>
                          <div class="flex items-center">
                            <span class="px-3 py-1 rounded-md bg-blue-50 text-blue-500 text-xs font-bold uppercase mr-9">3 Tasks</span>
                            <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>
                    </div>
                    <div class="py-6 border-b border-gray-200">
                        <div class="flex justify-between items-center">
                          <div class="flex items-center">
                            <span class="inline-flex mr-4 justify-center items-center rounded-2xl bg-green-50 w-10 h-10">
                              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 8.2381H3.84615L6.15385 3L9.84615 13L12.1538 8.2381H14" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                              </svg>
                            </span>
                            <div>
                              <p class="text-blue-900 text-sm font-semibold mb-1">Testing</p>
                              <p class="text-gray-500 text-xs">QA Managers</p>
                            </div>
                          </div>
                          <div class="flex items-center">
                            <span class="px-3 py-1 rounded-md bg-blue-50 text-blue-500 text-xs font-bold uppercase mr-9">3 Tasks</span>
                            <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>
                    </div>
                    <div class="py-6">
                        <div class="flex justify-between items-center">
                          <div class="flex items-center">
                            <span class="inline-flex mr-4 justify-center items-center rounded-2xl bg-green-50 w-10 h-10">
                              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 8.2381H3.84615L6.15385 3L9.84615 13L12.1538 8.2381H14" stroke="#4CA899" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                              </svg>
                            </span>
                            <div>
                              <p class="text-blue-900 text-sm font-semibold mb-1">Testing</p>
                              <p class="text-gray-500 text-xs">QA Managers</p>
                            </div>
                          </div>
                          <div class="flex items-center">
                            <span class="px-3 py-1 rounded-md bg-blue-50 text-blue-500 text-xs font-bold uppercase mr-9">3 Tasks</span>
                            <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>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="px-8 pt-8 pb-5 border border-gray-200 rounded-2xl">
                    <div class="mb-8">
                        <div class="flex items-center mb-1">
                            <h6 class="text-blue-900 font-semibold mr-2">Latest Acticity</h6>
                            <span class="py-1 px-3 bg-blue-50 rounded-md text-blue-500 text-xs font-bold">5</span>
                        </div>
                        <p class="text-gray-500 text-sm">Amet minim mollit non deserunt.</p>
                    </div>
                    <div class="relative overflow-hidden">
                        <div class="absolute top-0 bottom-0 left-0 mx-1 bg-gray-200 w-px" style="z-index: -1"></div>
                        <div class="mb-8">
                            <div class="flex items-center mb-1">
                              <span class="inline-block p-1 mr-4 bg-blue-500 rounded-full"></span>
                              <h6 class="text-blue-900 text-sm font-medium">Random Name for Activity Timeline</h6>
                            </div>
                            <div class="flex items-center">
                              <span class="ml-6 mr-2">
                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6 11C8.20914 11 10 9.20914 10 7C10 4.79086 8.20914 3 6 3C3.79086 3 2 4.79086 2 7C2 9.20914 3.79086 11 6 11Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
                                    <path d="M6 6.00008L7.85616 4.14392" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M5 1H7" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                              </span>
                              <p class="text-gray-500 text-sm">2 hours ago</p>
                            </div>
                        </div>
                        <div class="mb-8">
                            <div class="flex items-center mb-1">
                              <span class="inline-block p-1 mr-4 bg-purple-500 rounded-full"></span>
                              <h6 class="text-blue-900 text-sm font-medium">Random Name for Activity Timeline</h6>
                            </div>
                            <div class="flex items-center">
                              <span class="ml-6 mr-2">
                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6 11C8.20914 11 10 9.20914 10 7C10 4.79086 8.20914 3 6 3C3.79086 3 2 4.79086 2 7C2 9.20914 3.79086 11 6 11Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
                                    <path d="M6 6.00008L7.85616 4.14392" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M5 1H7" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                              </span>
                              <p class="text-gray-500 text-sm">2 hours ago</p>
                            </div>
                        </div>
                        <div class="mb-8">
                            <div class="flex items-center mb-1">
                              <span class="inline-block p-1 mr-4 bg-blue-500 rounded-full"></span>
                              <h6 class="text-blue-900 text-sm font-medium">Random Name for Activity Timeline</h6>
                            </div>
                            <div class="flex items-center">
                              <span class="ml-6 mr-2">
                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6 11C8.20914 11 10 9.20914 10 7C10 4.79086 8.20914 3 6 3C3.79086 3 2 4.79086 2 7C2 9.20914 3.79086 11 6 11Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
                                    <path d="M6 6.00008L7.85616 4.14392" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M5 1H7" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                              </span>
                              <p class="text-gray-500 text-sm">2 hours ago</p>
                            </div>
                        </div>
                        <div class="mb-8">
                            <div class="flex items-center mb-1">
                              <span class="inline-block p-1 mr-4 bg-purple-500 rounded-full"></span>
                              <h6 class="text-blue-900 text-sm font-medium">Random Name for Activity Timeline</h6>
                            </div>
                            <div class="flex items-center">
                              <span class="ml-6 mr-2">
                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6 11C8.20914 11 10 9.20914 10 7C10 4.79086 8.20914 3 6 3C3.79086 3 2 4.79086 2 7C2 9.20914 3.79086 11 6 11Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
                                    <path d="M6 6.00008L7.85616 4.14392" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M5 1H7" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                              </span>
                              <p class="text-gray-500 text-sm">2 hours ago</p>
                            </div>
                        </div>
                        <div class="mb-8">
                            <div class="flex items-center mb-1">
                              <span class="inline-block p-1 mr-4 bg-blue-500 rounded-full"></span>
                              <h6 class="text-blue-900 text-sm font-medium">Random Name for Activity Timeline</h6>
                            </div>
                            <div class="flex items-center">
                              <span class="ml-6 mr-2">
                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6 11C8.20914 11 10 9.20914 10 7C10 4.79086 8.20914 3 6 3C3.79086 3 2 4.79086 2 7C2 9.20914 3.79086 11 6 11Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
                                    <path d="M6 6.00008L7.85616 4.14392" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M5 1H7" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                              </span>
                              <p class="text-gray-500 text-sm">2 hours ago</p>
                            </div>
                        </div>
                        <div>
                            <div class="flex items-center mb-1">
                              <span class="inline-block p-1 mr-4 bg-purple-500 rounded-full"></span>
                              <h6 class="text-blue-900 text-sm font-medium">Random Name for Activity Timeline</h6>
                            </div>
                            <div class="flex items-center">
                              <span class="ml-6 mr-2">
                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6 11C8.20914 11 10 9.20914 10 7C10 4.79086 8.20914 3 6 3C3.79086 3 2 4.79086 2 7C2 9.20914 3.79086 11 6 11Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
                                    <path d="M6 6.00008L7.85616 4.14392" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M5 1H7" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                              </span>
                              <p class="text-gray-500 text-sm">2 hours ago</p>
                            </div>
                        </div>
                        <div class="relative -mt-16 pb-8">
                            <div class="absolute top-0 bottom-0 left-0 bg-white -mt-20 py-20 w-full opacity-70"></div>
                            <div class="relative -mt-16 flex justify-center">
                                <a href="#" class="inline-flex items-center justify-center px-6 py-3 h-full rounded-2xl text-white text-sm font-medium shadow-sm bg-blue-500 hover:bg-blue-600 focus:ring focus:ring-blue-300 transition duration-200">
                                    <span class="mr-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M2 8.2381H3.84615L6.15385 3L9.84615 13L12.1538 8.2381H14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </span>
                                    <span>See all activities </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>