Close Menu
    Tailwind CSS Components

    Tailwind Tables Components

    Terry WhiteBy Updated:No Comments97 Mins Read

    Tailwind Tables Components is a popular utility-first CSS framework that provides a comprehensive set of pre-defined classes that allow developers to quickly style their applications. The framework includes several components to help developers create responsive and customizable tables.

    Here are some of the Tailwind CSS components that can be used to create tables:

    1. table – This class is used to create a basic table with a white background and borders around each cell.
    2. table-auto – This class is used to create a table that automatically adjusts the column widths based on the content.
    3. table-fixed – This class is used to create a table with fixed column widths.
    4. table-caption – This class is used to add a caption to the table.
    5. table-striped – This class is used to create a table with alternating row colors.
    6. table-hover – This class is used to add a hover effect to the table rows.
    7. table-borderless – This class is used to create a table without borders around the cells.
    8. table-responsive – This class is used to make the table responsive on small screens.

    In addition to these classes, Tailwind CSS also includes classes for styling individual table elements such as thead, tbody, th, and td. By using these classes in combination, developers can create highly customized and responsive tables with Tailwind CSS.

    Component #1

    <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>

    Component #2

    <section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="pt-4 bg-white shadow rounded">
      <div class="flex px-6 pb-4 border-b">
        <h3 class="text-xl font-bold">Recent Transactions</h3>
      </div>
      <div class="p-4 overflow-x-auto">
        <table class="table-auto w-full">
          <thead>
            <tr class="text-xs text-gray-500 text-left"><th class="pb-3 font-medium">Transaction ID</th><th class="pb-3 font-medium">Date</th><th class="pb-3 font-medium">E-mail</th><th class="pb-3 font-medium">Subscription</th><th class="pb-3 font-medium">Status</th></tr>
          </thead>
          <tbody>
            <tr class="text-xs bg-gray-50">
              <td class="py-5 px-6 font-medium">SR2451EW32</td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">name@shuffle.dev</td>
              <td class="font-medium">Monthly</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
            </tr>
            <tr class="text-xs">
              <td class="py-5 px-6 font-medium">SR2451EW32</td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">name@shuffle.dev</td>
              <td class="font-medium">Monthly</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-red-500 rounded-full">Canceled</span>
              </td>
            </tr>
            <tr class="text-xs bg-gray-50">
              <td class="py-5 px-6 font-medium">SR2451EW32</td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">name@shuffle.dev</td>
              <td class="font-medium">Lifetime</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-orange-500 rounded-full">Pending</span>
              </td>
            </tr>
            <tr class="text-xs">
              <td class="py-5 px-6 font-medium">SR2451EW32</td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">name@shuffle.dev</td>
              <td class="font-medium">Yearly</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
            </tr>
            <tr class="text-xs bg-gray-50">
              <td class="py-5 px-6 font-medium">SR2451EW32</td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">name@shuffle.dev</td>
              <td class="font-medium">Monthly</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="text-center mt-5">
          <a class="inline-flex items-center text-xs text-indigo-500 hover:text-blue-600 font-medium" href="#">
            <span class="inline-block mr-2">
              <svg class="text-indigo-400 h-3 w-3" viewbox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.66667 12.3333H3.33333C2.8029 12.3333 2.29419 12.1226 1.91912 11.7476C1.54405 11.3725 1.33333 10.8638 1.33333 10.3333V3.66668C1.33333 3.48987 1.2631 3.3203 1.13807 3.19527C1.01305 3.07025 0.843478 3.00001 0.666667 3.00001C0.489856 3.00001 0.320286 3.07025 0.195262 3.19527C0.0702379 3.3203 0 3.48987 0 3.66668V10.3333C0 11.2174 0.351189 12.0652 0.976311 12.6904C1.60143 13.3155 2.44928 13.6667 3.33333 13.6667H8.66667C8.84348 13.6667 9.01305 13.5964 9.13807 13.4714C9.2631 13.3464 9.33333 13.1768 9.33333 13C9.33333 12.8232 9.2631 12.6536 9.13807 12.5286C9.01305 12.4036 8.84348 12.3333 8.66667 12.3333ZM4.66667 7.66668C4.66667 7.84349 4.7369 8.01306 4.86193 8.13808C4.98695 8.26311 5.15652 8.33334 5.33333 8.33334H8.66667C8.84348 8.33334 9.01305 8.26311 9.13807 8.13808C9.2631 8.01306 9.33333 7.84349 9.33333 7.66668C9.33333 7.48987 9.2631 7.3203 9.13807 7.19527C9.01305 7.07025 8.84348 7.00001 8.66667 7.00001H5.33333C5.15652 7.00001 4.98695 7.07025 4.86193 7.19527C4.7369 7.3203 4.66667 7.48987 4.66667 7.66668ZM12 4.96001C11.9931 4.89877 11.9796 4.83843 11.96 4.78001V4.72001C11.9279 4.65146 11.8852 4.58845 11.8333 4.53334V4.53334L7.83333 0.533343C7.77822 0.481488 7.71521 0.438731 7.64667 0.406677C7.62677 0.40385 7.60657 0.40385 7.58667 0.406677C7.51894 0.367838 7.44415 0.342906 7.36667 0.333344H4.66667C4.13623 0.333344 3.62753 0.544057 3.25245 0.91913C2.87738 1.2942 2.66667 1.80291 2.66667 2.33334V9.00001C2.66667 9.53044 2.87738 10.0392 3.25245 10.4142C3.62753 10.7893 4.13623 11 4.66667 11H10C10.5304 11 11.0391 10.7893 11.4142 10.4142C11.7893 10.0392 12 9.53044 12 9.00001V5.00001C12 5.00001 12 5.00001 12 4.96001ZM8 2.60668L9.72667 4.33334H8.66667C8.48986 4.33334 8.32029 4.26311 8.19526 4.13808C8.07024 4.01306 8 3.84349 8 3.66668V2.60668ZM10.6667 9.00001C10.6667 9.17682 10.5964 9.34639 10.4714 9.47141C10.3464 9.59644 10.1768 9.66668 10 9.66668H4.66667C4.48986 9.66668 4.32029 9.59644 4.19526 9.47141C4.07024 9.34639 4 9.17682 4 9.00001V2.33334C4 2.15653 4.07024 1.98696 4.19526 1.86194C4.32029 1.73691 4.48986 1.66668 4.66667 1.66668H6.66667V3.66668C6.66847 3.89411 6.70905 4.11956 6.78667 4.33334H5.33333C5.15652 4.33334 4.98695 4.40358 4.86193 4.52861C4.7369 4.65363 4.66667 4.8232 4.66667 5.00001C4.66667 5.17682 4.7369 5.34639 4.86193 5.47141C4.98695 5.59644 5.15652 5.66668 5.33333 5.66668H10.6667V9.00001Z" fill="currentColor"></path>
              </svg>
            </span>
            <span>Load more transactions</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

    Component #3

    <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 border-r border-gray-200">
          <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 class="pl-6 border-r border-gray-200">
          <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 class="pl-6 border-r border-gray-200">
          <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 class="border-r border-gray-200">
          <a class="flex items-center justify-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 class="pl-6 border-r border-gray-200">
          <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 class="pl-6">
          <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">
        <td class="pl-6 py-6 border-l-0 border border-gray-200">Ashton Cox</td>
        <td class="pl-6 border border-gray-200">Technical Author</td>
        <td class="pl-6 border border-gray-200">San Francisco</td>
        <td class="text-center border border-gray-200">66</td>
        <td class="pl-6 border border-gray-200">22/04/2021</td>
        <td class="pl-6 border-r-0 border border-gray-200">$4,800</td>
      </tr>
      <tr class="text-xs border">
        <td class="pl-6 py-6 border-l-0 border border-gray-200">Cedric Kelly</td>
        <td class="pl-6 border border-gray-200">Javascript Developer</td>
        <td class="pl-6 border border-gray-200">Edinburgh</td>
        <td class="text-center border border-gray-200">22</td>
        <td class="pl-6 border border-gray-200">22/04/2021</td>
        <td class="pl-6 border-r-0 border border-gray-200">$3,600</td>
      </tr>
      <tr class="text-xs bg-blue-50 border">
        <td class="pl-6 py-6 border-l-0 border border-gray-200">Tiger Nixon</td>
        <td class="pl-6 border border-gray-200">System Architect</td>
        <td class="pl-6 border border-gray-200">San Francisco</td>
        <td class="text-center border border-gray-200">61</td>
        <td class="pl-6 border border-gray-200">22/04/2021</td>
        <td class="pl-6 border-r-0 border border-gray-200">$3,100</td>
      </tr>
      <tr class="text-xs">
        <td class="pl-6 py-6 border-l-0 border-r border-gray-200">Tiger Nixon</td>
        <td class="pl-6 border-l border-r border-gray-200">Technical Author</td>
        <td class="pl-6 border-l border-r border-gray-200">San Francisco</td>
        <td class="text-center border-l border-r border-gray-200">66</td>
        <td class="pl-6 border-l border-r border-gray-200">22/04/2021</td>
        <td class="pl-6 border-l border-gray-200">$4,800</td>
      </tr>
    </tbody>
  </table>
</section>

    Component #4

    <section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="pt-6 bg-white shadow rounded">
      <div class="px-6 border-b">
        <div class="flex flex-wrap items-center mb-6">
          <h3 class="text-xl font-bold">Recent Transactions</h3>
          <a class="ml-auto flex items-center py-2 px-3 text-xs text-white bg-indigo-500 hover:bg-indigo-600 rounded" href="#">
            <span class="mr-1">
              <svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13 8.33337C12.6 8.33337 12.3333 8.60004 12.3333 9.00004V11.6667C12.3333 12.0667 12.0666 12.3334 11.6666 12.3334H2.33331C1.93331 12.3334 1.66665 12.0667 1.66665 11.6667V9.00004C1.66665 8.60004 1.39998 8.33337 0.99998 8.33337C0.59998 8.33337 0.333313 8.60004 0.333313 9.00004V11.6667C0.333313 12.8 1.19998 13.6667 2.33331 13.6667H11.6666C12.8 13.6667 13.6666 12.8 13.6666 11.6667V9.00004C13.6666 8.60004 13.4 8.33337 13 8.33337ZM4.79998 4.13337L6.33331 2.60004V9.00004C6.33331 9.40004 6.59998 9.66671 6.99998 9.66671C7.39998 9.66671 7.66665 9.40004 7.66665 9.00004V2.60004L9.19998 4.13337C9.46665 4.40004 9.86665 4.40004 10.1333 4.13337C10.4 3.86671 10.4 3.46671 10.1333 3.20004L7.46665 0.533374C7.19998 0.266707 6.79998 0.266707 6.53331 0.533374L3.86665 3.20004C3.59998 3.46671 3.59998 3.86671 3.86665 4.13337C4.13331 4.40004 4.53331 4.40004 4.79998 4.13337Z" fill="#AFABF1"></path>
              </svg>
            </span>
            <span>Export</span>
          </a>
        </div>
        <div><a class="inline-block px-4 pb-2 text-sm font-medium text-indigo-500 border-b-2 border-indigo-500" href="#">Incoming</a><a class="inline-block px-4 pb-2 text-sm font-medium text-gray-500 border-b-2 border-transparent" href="#">Invoices</a></div>
      </div>
      <div class="overflow-x-auto">
        <table class="table-auto w-full">
          <thead>
            <tr class="text-xs text-gray-500 text-left">
              <th class="flex items-center pl-6 py-4 font-medium">
                <input class="mr-3" type="checkbox" name="" id="">
                <a class="flex items-center" href="#">
                  <span>Invoice ID</span>
                  <span class="ml-2">
                    <svg width="9" height="12" viewbox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.85957 7.52667L4.99957 10.3933L2.13957 7.52667C2.01403 7.40114 1.84377 7.33061 1.66623 7.33061C1.4887 7.33061 1.31843 7.40114 1.1929 7.52667C1.06736 7.65221 0.996837 7.82247 0.996837 8.00001C0.996837 8.17754 1.06736 8.3478 1.1929 8.47334L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17236 12.0005 5.34132 11.9308 5.46623 11.8067L8.79957 8.47334C8.86173 8.41118 8.91103 8.33739 8.94467 8.25617C8.97831 8.17496 8.99563 8.08791 8.99563 8.00001C8.99563 7.9121 8.97831 7.82505 8.94467 7.74384C8.91103 7.66262 8.86173 7.58883 8.79957 7.52667C8.73741 7.46451 8.66361 7.41521 8.5824 7.38157C8.50118 7.34793 8.41414 7.33061 8.32623 7.33061C8.23833 7.33061 8.15128 7.34793 8.07007 7.38157C7.98885 7.41521 7.91506 7.46451 7.8529 7.52667H7.85957ZM2.13957 4.47334L4.99957 1.60667L7.85957 4.47334C7.98447 4.59751 8.15344 4.6672 8.32957 4.6672C8.50569 4.6672 8.67466 4.59751 8.79957 4.47334C8.92373 4.34843 8.99343 4.17946 8.99343 4.00334C8.99343 3.82722 8.92373 3.65825 8.79957 3.53334L5.46623 0.200006C5.40426 0.137521 5.33052 0.0879247 5.24928 0.0540789C5.16804 0.0202331 5.08091 0.00280762 4.9929 0.00280762C4.90489 0.00280762 4.81775 0.0202331 4.73651 0.0540789C4.65527 0.0879247 4.58154 0.137521 4.51957 0.200006L1.18623 3.53334C1.06158 3.65976 0.992254 3.83052 0.993504 4.00805C0.994754 4.18559 1.06648 4.35535 1.1929 4.48001C1.31932 4.60466 1.49008 4.67398 1.66761 4.67273C1.84515 4.67148 2.01491 4.59976 2.13957 4.47334Z" fill="#67798E"></path>
                    </svg>
                  </span>
                </a>
              </th>
              <th class="py-4 font-medium">
                <a class="flex items-center" href="#">
                  <span>Date</span>
                  <span class="ml-2">
                    <svg width="9" height="12" viewbox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.85957 7.52667L4.99957 10.3933L2.13957 7.52667C2.01403 7.40114 1.84377 7.33061 1.66623 7.33061C1.4887 7.33061 1.31843 7.40114 1.1929 7.52667C1.06736 7.65221 0.996837 7.82247 0.996837 8.00001C0.996837 8.17754 1.06736 8.3478 1.1929 8.47334L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17236 12.0005 5.34132 11.9308 5.46623 11.8067L8.79957 8.47334C8.86173 8.41118 8.91103 8.33739 8.94467 8.25617C8.97831 8.17496 8.99563 8.08791 8.99563 8.00001C8.99563 7.9121 8.97831 7.82505 8.94467 7.74384C8.91103 7.66262 8.86173 7.58883 8.79957 7.52667C8.73741 7.46451 8.66361 7.41521 8.5824 7.38157C8.50118 7.34793 8.41414 7.33061 8.32623 7.33061C8.23833 7.33061 8.15128 7.34793 8.07007 7.38157C7.98885 7.41521 7.91506 7.46451 7.8529 7.52667H7.85957ZM2.13957 4.47334L4.99957 1.60667L7.85957 4.47334C7.98447 4.59751 8.15344 4.6672 8.32957 4.6672C8.50569 4.6672 8.67466 4.59751 8.79957 4.47334C8.92373 4.34843 8.99343 4.17946 8.99343 4.00334C8.99343 3.82722 8.92373 3.65825 8.79957 3.53334L5.46623 0.200006C5.40426 0.137521 5.33052 0.0879247 5.24928 0.0540789C5.16804 0.0202331 5.08091 0.00280762 4.9929 0.00280762C4.90489 0.00280762 4.81775 0.0202331 4.73651 0.0540789C4.65527 0.0879247 4.58154 0.137521 4.51957 0.200006L1.18623 3.53334C1.06158 3.65976 0.992254 3.83052 0.993504 4.00805C0.994754 4.18559 1.06648 4.35535 1.1929 4.48001C1.31932 4.60466 1.49008 4.67398 1.66761 4.67273C1.84515 4.67148 2.01491 4.59976 2.13957 4.47334Z" fill="#67798E"></path>
                    </svg>
                  </span>
                </a>
              </th>
              <th class="py-4 font-medium">
                <a class="flex items-center" href="#">
                  <span>Description</span>
                  <span class="ml-2">
                    <svg width="9" height="12" viewbox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.85957 7.52667L4.99957 10.3933L2.13957 7.52667C2.01403 7.40114 1.84377 7.33061 1.66623 7.33061C1.4887 7.33061 1.31843 7.40114 1.1929 7.52667C1.06736 7.65221 0.996837 7.82247 0.996837 8.00001C0.996837 8.17754 1.06736 8.3478 1.1929 8.47334L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17236 12.0005 5.34132 11.9308 5.46623 11.8067L8.79957 8.47334C8.86173 8.41118 8.91103 8.33739 8.94467 8.25617C8.97831 8.17496 8.99563 8.08791 8.99563 8.00001C8.99563 7.9121 8.97831 7.82505 8.94467 7.74384C8.91103 7.66262 8.86173 7.58883 8.79957 7.52667C8.73741 7.46451 8.66361 7.41521 8.5824 7.38157C8.50118 7.34793 8.41414 7.33061 8.32623 7.33061C8.23833 7.33061 8.15128 7.34793 8.07007 7.38157C7.98885 7.41521 7.91506 7.46451 7.8529 7.52667H7.85957ZM2.13957 4.47334L4.99957 1.60667L7.85957 4.47334C7.98447 4.59751 8.15344 4.6672 8.32957 4.6672C8.50569 4.6672 8.67466 4.59751 8.79957 4.47334C8.92373 4.34843 8.99343 4.17946 8.99343 4.00334C8.99343 3.82722 8.92373 3.65825 8.79957 3.53334L5.46623 0.200006C5.40426 0.137521 5.33052 0.0879247 5.24928 0.0540789C5.16804 0.0202331 5.08091 0.00280762 4.9929 0.00280762C4.90489 0.00280762 4.81775 0.0202331 4.73651 0.0540789C4.65527 0.0879247 4.58154 0.137521 4.51957 0.200006L1.18623 3.53334C1.06158 3.65976 0.992254 3.83052 0.993504 4.00805C0.994754 4.18559 1.06648 4.35535 1.1929 4.48001C1.31932 4.60466 1.49008 4.67398 1.66761 4.67273C1.84515 4.67148 2.01491 4.59976 2.13957 4.47334Z" fill="#67798E"></path>
                    </svg>
                  </span>
                </a>
              </th>
              <th class="py-4 font-medium">
                <a class="flex items-center" href="#">
                  <span>Status</span>
                  <span class="ml-2">
                    <svg width="9" height="12" viewbox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.85957 7.52667L4.99957 10.3933L2.13957 7.52667C2.01403 7.40114 1.84377 7.33061 1.66623 7.33061C1.4887 7.33061 1.31843 7.40114 1.1929 7.52667C1.06736 7.65221 0.996837 7.82247 0.996837 8.00001C0.996837 8.17754 1.06736 8.3478 1.1929 8.47334L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17236 12.0005 5.34132 11.9308 5.46623 11.8067L8.79957 8.47334C8.86173 8.41118 8.91103 8.33739 8.94467 8.25617C8.97831 8.17496 8.99563 8.08791 8.99563 8.00001C8.99563 7.9121 8.97831 7.82505 8.94467 7.74384C8.91103 7.66262 8.86173 7.58883 8.79957 7.52667C8.73741 7.46451 8.66361 7.41521 8.5824 7.38157C8.50118 7.34793 8.41414 7.33061 8.32623 7.33061C8.23833 7.33061 8.15128 7.34793 8.07007 7.38157C7.98885 7.41521 7.91506 7.46451 7.8529 7.52667H7.85957ZM2.13957 4.47334L4.99957 1.60667L7.85957 4.47334C7.98447 4.59751 8.15344 4.6672 8.32957 4.6672C8.50569 4.6672 8.67466 4.59751 8.79957 4.47334C8.92373 4.34843 8.99343 4.17946 8.99343 4.00334C8.99343 3.82722 8.92373 3.65825 8.79957 3.53334L5.46623 0.200006C5.40426 0.137521 5.33052 0.0879247 5.24928 0.0540789C5.16804 0.0202331 5.08091 0.00280762 4.9929 0.00280762C4.90489 0.00280762 4.81775 0.0202331 4.73651 0.0540789C4.65527 0.0879247 4.58154 0.137521 4.51957 0.200006L1.18623 3.53334C1.06158 3.65976 0.992254 3.83052 0.993504 4.00805C0.994754 4.18559 1.06648 4.35535 1.1929 4.48001C1.31932 4.60466 1.49008 4.67398 1.66761 4.67273C1.84515 4.67148 2.01491 4.59976 2.13957 4.47334Z" fill="#67798E"></path>
                    </svg>
                  </span>
                </a>
              </th>
              <th class="py-4 font-medium">
                <a class="flex items-center" href="#">
                  <span>Descriptions</span>
                  <span class="ml-2">
                    <svg width="9" height="12" viewbox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.85957 7.52667L4.99957 10.3933L2.13957 7.52667C2.01403 7.40114 1.84377 7.33061 1.66623 7.33061C1.4887 7.33061 1.31843 7.40114 1.1929 7.52667C1.06736 7.65221 0.996837 7.82247 0.996837 8.00001C0.996837 8.17754 1.06736 8.3478 1.1929 8.47334L4.52623 11.8067C4.65114 11.9308 4.82011 12.0005 4.99623 12.0005C5.17236 12.0005 5.34132 11.9308 5.46623 11.8067L8.79957 8.47334C8.86173 8.41118 8.91103 8.33739 8.94467 8.25617C8.97831 8.17496 8.99563 8.08791 8.99563 8.00001C8.99563 7.9121 8.97831 7.82505 8.94467 7.74384C8.91103 7.66262 8.86173 7.58883 8.79957 7.52667C8.73741 7.46451 8.66361 7.41521 8.5824 7.38157C8.50118 7.34793 8.41414 7.33061 8.32623 7.33061C8.23833 7.33061 8.15128 7.34793 8.07007 7.38157C7.98885 7.41521 7.91506 7.46451 7.8529 7.52667H7.85957ZM2.13957 4.47334L4.99957 1.60667L7.85957 4.47334C7.98447 4.59751 8.15344 4.6672 8.32957 4.6672C8.50569 4.6672 8.67466 4.59751 8.79957 4.47334C8.92373 4.34843 8.99343 4.17946 8.99343 4.00334C8.99343 3.82722 8.92373 3.65825 8.79957 3.53334L5.46623 0.200006C5.40426 0.137521 5.33052 0.0879247 5.24928 0.0540789C5.16804 0.0202331 5.08091 0.00280762 4.9929 0.00280762C4.90489 0.00280762 4.81775 0.0202331 4.73651 0.0540789C4.65527 0.0879247 4.58154 0.137521 4.51957 0.200006L1.18623 3.53334C1.06158 3.65976 0.992254 3.83052 0.993504 4.00805C0.994754 4.18559 1.06648 4.35535 1.1929 4.48001C1.31932 4.60466 1.49008 4.67398 1.66761 4.67273C1.84515 4.67148 2.01491 4.59976 2.13957 4.47334Z" fill="#67798E"></path>
                    </svg>
                  </span>
                </a>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="text-xs bg-gray-50">
              <td class="flex items-center py-5 px-6 font-medium">
                <input class="mr-3" type="checkbox" name="" id="">
                <p>M063592DR2</p>
              </td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">Code 5928MD01</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
              <td>$2500.00</td>
            </tr>
            <tr class="text-xs">
              <td class="flex items-center py-5 px-6 font-medium">
                <input class="mr-3" type="checkbox" name="" id="">
                <p>M063592DR2</p>
              </td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">Code 5928MD01</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
              <td>$2500.00</td>
            </tr>
            <tr class="text-xs bg-gray-50">
              <td class="flex items-center py-5 px-6 font-medium">
                <input class="mr-3" type="checkbox" name="" id="">
                <p>M063592DR2</p>
              </td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">Code 5928MD01</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
              <td>$2500.00</td>
            </tr>
            <tr class="text-xs">
              <td class="flex items-center py-5 px-6 font-medium">
                <input class="mr-3" type="checkbox" name="" id="">
                <p>M063592DR2</p>
              </td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">Code 5928MD01</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
              <td>$2500.00</td>
            </tr>
            <tr class="text-xs bg-gray-50">
              <td class="flex items-center py-5 px-6 font-medium">
                <input class="mr-3" type="checkbox" name="" id="">
                <p>M063592DR2</p>
              </td>
              <td class="font-medium">08.04.2021</td>
              <td class="font-medium">Code 5928MD01</td>
              <td>
                <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Completed</span>
              </td>
              <td>$2500.00</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

    Component #5

    <section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="p-4 mb-6 bg-white shadow rounded overflow-x-auto">
      <table class="table-auto w-full">
        <thead>
          <tr class="text-xs text-gray-500 text-left"><th class="pl-6 pb-3 font-medium">Customer ID</th><th class="pb-3 font-medium">User</th><th class="pb-3 font-medium">Joined</th><th class="pb-3 font-medium">Status</th><th class="pb-3 font-medium">Purchased</th><th class="pb-3 font-medium">Action</th></tr>
        </thead>
        <tbody>
          <tr class="text-xs bg-gray-50">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs bg-gray-50">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs bg-gray-50">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs bg-gray-50">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs bg-gray-50">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs bg-gray-50">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs bg-gray-50">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
          <tr class="text-xs bg-gray-50">
            <td class="py-5 px-6 font-medium">#1006</td>
            <td class="flex px-4 py-3">
              <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-gray-500">john@shuffle.dev</p>
              </div>
            </td>
            <td class="font-medium">09/04/2021</td>
            <td>
              <span class="inline-block py-1 px-2 text-white bg-green-500 rounded-full">Paid</span>
            </td>
            <td>
              <span class="inline-block py-1 px-2 text-purple-500 bg-purple-50 rounded-full">Monthly Subscription</span>
            </td>
            <td>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.4999 9C16.2789 9 16.0669 9.0878 15.9106 9.24408C15.7544 9.40036 15.6666 9.61232 15.6666 9.83333V14.8333C15.6666 15.0543 15.5788 15.2663 15.4225 15.4226C15.2662 15.5789 15.0542 15.6667 14.8332 15.6667H3.16656C2.94555 15.6667 2.73359 15.5789 2.57731 15.4226C2.42103 15.2663 2.33323 15.0543 2.33323 14.8333V3.16667C2.33323 2.94565 2.42103 2.73369 2.57731 2.57741C2.73359 2.42113 2.94555 2.33333 3.16656 2.33333H8.16657C8.38758 2.33333 8.59954 2.24554 8.75582 2.08926C8.9121 1.93298 8.9999 1.72101 8.9999 1.5C8.9999 1.27899 8.9121 1.06702 8.75582 0.910744C8.59954 0.754464 8.38758 0.666667 8.16657 0.666667H3.16656C2.50352 0.666667 1.86764 0.930059 1.3988 1.3989C0.929957 1.86774 0.666565 2.50363 0.666565 3.16667V14.8333C0.666565 15.4964 0.929957 16.1323 1.3988 16.6011C1.86764 17.0699 2.50352 17.3333 3.16656 17.3333H14.8332C15.4963 17.3333 16.1322 17.0699 16.601 16.6011C17.0698 16.1323 17.3332 15.4964 17.3332 14.8333V9.83333C17.3332 9.61232 17.2454 9.40036 17.0892 9.24408C16.9329 9.0878 16.7209 9 16.4999 9ZM3.9999 9.63333V13.1667C3.9999 13.3877 4.0877 13.5996 4.24398 13.7559C4.40026 13.9122 4.61222 14 4.83323 14H8.36657C8.47624 14.0006 8.58496 13.9796 8.68649 13.9381C8.78802 13.8967 8.88037 13.8356 8.95823 13.7583L14.7249 7.98333L17.0916 5.66667C17.1697 5.5892 17.2317 5.49703 17.274 5.39548C17.3163 5.29393 17.3381 5.18501 17.3381 5.075C17.3381 4.96499 17.3163 4.85607 17.274 4.75452C17.2317 4.65297 17.1697 4.5608 17.0916 4.48333L13.5582 0.908333C13.4808 0.830226 13.3886 0.768231 13.287 0.725924C13.1855 0.683617 13.0766 0.661835 12.9666 0.661835C12.8566 0.661835 12.7476 0.683617 12.6461 0.725924C12.5445 0.768231 12.4524 0.830226 12.3749 0.908333L10.0249 3.26667L4.24156 9.04167C4.16433 9.11953 4.10323 9.21188 4.06176 9.31341C4.02029 9.41494 3.99926 9.52366 3.9999 9.63333ZM12.9666 2.675L15.3249 5.03333L14.1416 6.21667L11.7832 3.85833L12.9666 2.675ZM5.66656 9.975L10.6082 5.03333L12.9666 7.39167L8.0249 12.3333H5.66656V9.975Z" fill="#382CDD"></path>
                </svg>
              </a>
              <a class="inline-block mr-2" href="#">
                <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.2667 6.32499L7.69169 9.90832L6.31669 8.53332C6.24198 8.44609 6.15005 8.37524 6.04666 8.32522C5.94328 8.2752 5.83067 8.24709 5.7159 8.24266C5.60114 8.23823 5.48669 8.25756 5.37975 8.29946C5.27282 8.34135 5.17569 8.4049 5.09448 8.48611C5.01327 8.56733 4.94972 8.66445 4.90783 8.77139C4.86593 8.87833 4.84659 8.99277 4.85102 9.10753C4.85546 9.2223 4.88357 9.33491 4.93359 9.4383C4.9836 9.54169 5.05446 9.63362 5.14169 9.70832L7.10002 11.675C7.17789 11.7522 7.27024 11.8133 7.37177 11.8548C7.4733 11.8963 7.58202 11.9173 7.69169 11.9167C7.91031 11.9157 8.11981 11.8289 8.27502 11.675L12.4417 7.50832C12.5198 7.43085 12.5818 7.33869 12.6241 7.23714C12.6664 7.13559 12.6882 7.02667 12.6882 6.91666C12.6882 6.80665 12.6664 6.69773 12.6241 6.59618C12.5818 6.49463 12.5198 6.40246 12.4417 6.32499C12.2856 6.16978 12.0743 6.08266 11.8542 6.08266C11.634 6.08266 11.4228 6.16978 11.2667 6.32499ZM9.00002 0.666656C7.35185 0.666656 5.74068 1.1554 4.37027 2.07108C2.99986 2.98675 1.93176 4.28824 1.30103 5.81096C0.670298 7.33368 0.50527 9.00923 0.826813 10.6257C1.14836 12.2423 1.94203 13.7271 3.10747 14.8925C4.2729 16.058 5.75776 16.8517 7.37427 17.1732C8.99078 17.4947 10.6663 17.3297 12.1891 16.699C13.7118 16.0683 15.0133 15.0002 15.9289 13.6297C16.8446 12.2593 17.3334 10.6482 17.3334 8.99999C17.3334 7.90564 17.1178 6.82201 16.699 5.81096C16.2802 4.79991 15.6664 3.88125 14.8926 3.10743C14.1188 2.33361 13.2001 1.71978 12.1891 1.30099C11.178 0.882205 10.0944 0.666656 9.00002 0.666656ZM9.00002 15.6667C7.68148 15.6667 6.39255 15.2757 5.29622 14.5431C4.19989 13.8106 3.34541 12.7694 2.84083 11.5512C2.33624 10.333 2.20422 8.99259 2.46146 7.69939C2.71869 6.40618 3.35363 5.2183 4.28598 4.28594C5.21833 3.35359 6.40622 2.71866 7.69942 2.46142C8.99263 2.20419 10.3331 2.33621 11.5512 2.84079C12.7694 3.34538 13.8106 4.19986 14.5432 5.29619C15.2757 6.39252 15.6667 7.68145 15.6667 8.99999C15.6667 10.7681 14.9643 12.4638 13.7141 13.714C12.4638 14.9643 10.7681 15.6667 9.00002 15.6667Z" fill="#17BB84"></path>
                </svg>
              </a>
              <a class="inline-block" href="#">
                <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.33333 15C8.55435 15 8.76631 14.9122 8.92259 14.7559C9.07887 14.5996 9.16667 14.3877 9.16667 14.1667V9.16666C9.16667 8.94564 9.07887 8.73368 8.92259 8.5774C8.76631 8.42112 8.55435 8.33332 8.33333 8.33332C8.11232 8.33332 7.90036 8.42112 7.74408 8.5774C7.5878 8.73368 7.5 8.94564 7.5 9.16666V14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15ZM16.6667 4.99999H13.3333V4.16666C13.3333 3.50362 13.0699 2.86773 12.6011 2.39889C12.1323 1.93005 11.4964 1.66666 10.8333 1.66666H9.16667C8.50363 1.66666 7.86774 1.93005 7.3989 2.39889C6.93006 2.86773 6.66667 3.50362 6.66667 4.16666V4.99999H3.33333C3.11232 4.99999 2.90036 5.08779 2.74408 5.24407C2.5878 5.40035 2.5 5.61231 2.5 5.83332C2.5 6.05434 2.5878 6.2663 2.74408 6.42258C2.90036 6.57886 3.11232 6.66666 3.33333 6.66666H4.16667V15.8333C4.16667 16.4964 4.43006 17.1322 4.8989 17.6011C5.36774 18.0699 6.00363 18.3333 6.66667 18.3333H13.3333C13.9964 18.3333 14.6323 18.0699 15.1011 17.6011C15.5699 17.1322 15.8333 16.4964 15.8333 15.8333V6.66666H16.6667C16.8877 6.66666 17.0996 6.57886 17.2559 6.42258C17.4122 6.2663 17.5 6.05434 17.5 5.83332C17.5 5.61231 17.4122 5.40035 17.2559 5.24407C17.0996 5.08779 16.8877 4.99999 16.6667 4.99999ZM8.33333 4.16666C8.33333 3.94564 8.42113 3.73368 8.57741 3.5774C8.73369 3.42112 8.94565 3.33332 9.16667 3.33332H10.8333C11.0543 3.33332 11.2663 3.42112 11.4226 3.5774C11.5789 3.73368 11.6667 3.94564 11.6667 4.16666V4.99999H8.33333V4.16666ZM14.1667 15.8333C14.1667 16.0543 14.0789 16.2663 13.9226 16.4226C13.7663 16.5789 13.5543 16.6667 13.3333 16.6667H6.66667C6.44565 16.6667 6.23369 16.5789 6.07741 16.4226C5.92113 16.2663 5.83333 16.0543 5.83333 15.8333V6.66666H14.1667V15.8333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667V9.16666C12.5 8.94564 12.4122 8.73368 12.2559 8.5774C12.0996 8.42112 11.8877 8.33332 11.6667 8.33332C11.4457 8.33332 11.2337 8.42112 11.0774 8.5774C10.9211 8.73368 10.8333 8.94564 10.8333 9.16666V14.1667C10.8333 14.3877 10.9211 14.5996 11.0774 14.7559C11.2337 14.9122 11.4457 15 11.6667 15Z" fill="#E85444"></path>
                </svg>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="flex flex-wrap -mx-4 items-center justify-between">
      <div class="w-full lg:w-1/3 px-4 flex items-center mb-4 lg:mb-0">
        <p class="text-xs text-gray-400">Show</p>
        <div class="mx-3 py-2 px-2 text-xs text-gray-500 bg-white border rounded">
          <select name="" id="">
            <option value="1">15</option>
            <option value="1">25</option>
            <option value="1">50</option>
            <option value="1">100</option>
          </select>
        </div>
        <p class="text-xs text-gray-400">of 1200</p>
      </div>
      <div class="w-full lg:w-auto px-4 flex items-center justify-center">
        <a class="inline-flex mr-3 items-center justify-center w-8 h-8 text-xs text-gray-500 border border-gray-300 bg-white hover:bg-indigo-50 rounded" href="#">
          <svg width="6" height="8" viewbox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.53335 3.99999L4.86668 1.66666C5.13335 1.39999 5.13335 0.999992 4.86668 0.733325C4.60002 0.466659 4.20002 0.466659 3.93335 0.733325L1.13335 3.53333C0.866683 3.79999 0.866683 4.19999 1.13335 4.46666L3.93335 7.26666C4.06668 7.39999 4.20002 7.46666 4.40002 7.46666C4.60002 7.46666 4.73335 7.39999 4.86668 7.26666C5.13335 6.99999 5.13335 6.59999 4.86668 6.33333L2.53335 3.99999Z" fill="#A4AFBB"></path>
          </svg>
        </a>
        <a class="inline-flex mr-3 items-center justify-center w-8 h-8 text-xs text-gray-500 border border-gray-300 bg-white hover:bg-indigo-50 rounded" href="#">1</a>
        <span class="inline-block mr-3">
          <svg class="h-3 w-3 text-gray-200" viewbox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 0.666687C5.26667 0.666687 4.66667 1.26669 4.66667 2.00002C4.66667 2.73335 5.26667 3.33335 6 3.33335C6.73333 3.33335 7.33333 2.73335 7.33333 2.00002C7.33333 1.26669 6.73333 0.666687 6 0.666687ZM1.33333 0.666687C0.6 0.666687 0 1.26669 0 2.00002C0 2.73335 0.6 3.33335 1.33333 3.33335C2.06667 3.33335 2.66667 2.73335 2.66667 2.00002C2.66667 1.26669 2.06667 0.666687 1.33333 0.666687ZM10.6667 0.666687C9.93333 0.666687 9.33333 1.26669 9.33333 2.00002C9.33333 2.73335 9.93333 3.33335 10.6667 3.33335C11.4 3.33335 12 2.73335 12 2.00002C12 1.26669 11.4 0.666687 10.6667 0.666687Z" fill="currentColor"></path>
          </svg>
        </span>
        <a class="inline-flex mr-3 items-center justify-center w-8 h-8 text-xs text-white bg-indigo-500 rounded" href="#">12</a><a class="inline-flex mr-3 items-center justify-center w-8 h-8 text-xs text-gray-500 border border-gray-300 bg-white hover:bg-indigo-50 rounded" href="#">13</a><a class="inline-flex mr-3 items-center justify-center w-8 h-8 text-xs text-gray-500 border border-gray-300 bg-white hover:bg-indigo-50 rounded" href="#">14</a>
        <span class="inline-block mr-3">
          <svg class="h-3 w-3 text-gray-200" viewbox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 0.666687C5.26667 0.666687 4.66667 1.26669 4.66667 2.00002C4.66667 2.73335 5.26667 3.33335 6 3.33335C6.73333 3.33335 7.33333 2.73335 7.33333 2.00002C7.33333 1.26669 6.73333 0.666687 6 0.666687ZM1.33333 0.666687C0.6 0.666687 0 1.26669 0 2.00002C0 2.73335 0.6 3.33335 1.33333 3.33335C2.06667 3.33335 2.66667 2.73335 2.66667 2.00002C2.66667 1.26669 2.06667 0.666687 1.33333 0.666687ZM10.6667 0.666687C9.93333 0.666687 9.33333 1.26669 9.33333 2.00002C9.33333 2.73335 9.93333 3.33335 10.6667 3.33335C11.4 3.33335 12 2.73335 12 2.00002C12 1.26669 11.4 0.666687 10.6667 0.666687Z" fill="currentColor"></path>
          </svg>
        </span>
        <a class="inline-flex mr-3 items-center justify-center w-8 h-8 text-xs border border-gray-300 bg-white hover:bg-indigo-50 rounded" href="#">62</a>
        <a class="inline-flex items-center justify-center w-8 h-8 text-xs text-gray-500 border border-gray-300 bg-white hover:bg-indigo-50 rounded" href="#">
          <svg width="6" height="8" viewbox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.88663 3.52667L2.05996 0.700006C1.99799 0.637521 1.92425 0.587925 1.84301 0.554079C1.76177 0.520233 1.67464 0.502808 1.58663 0.502808C1.49862 0.502808 1.41148 0.520233 1.33024 0.554079C1.249 0.587925 1.17527 0.637521 1.1133 0.700006C0.989128 0.824915 0.919434 0.993883 0.919434 1.17001C0.919434 1.34613 0.989128 1.5151 1.1133 1.64001L3.4733 4.00001L1.1133 6.36001C0.989128 6.48491 0.919434 6.65388 0.919434 6.83001C0.919434 7.00613 0.989128 7.1751 1.1133 7.30001C1.17559 7.36179 1.24947 7.41068 1.33069 7.44385C1.41192 7.47703 1.49889 7.49385 1.58663 7.49334C1.67437 7.49385 1.76134 7.47703 1.84257 7.44385C1.92379 7.41068 1.99767 7.36179 2.05996 7.30001L4.88663 4.47334C4.94911 4.41136 4.99871 4.33763 5.03256 4.25639C5.0664 4.17515 5.08383 4.08801 5.08383 4.00001C5.08383 3.912 5.0664 3.82486 5.03256 3.74362C4.99871 3.66238 4.94911 3.58865 4.88663 3.52667Z" fill="#A4AFBB"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

    Component #6

    <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 border-r border-gray-200">
          <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 class="pl-6 border-r border-gray-200">
          <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 class="pl-6 border-r border-gray-200">
          <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 class="border-r border-gray-200">
          <a class="flex items-center text-xs justify-center 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 class="pl-6 border-r border-gray-200">
          <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 class="pl-6">
          <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 border">
        <td class="pl-6 py-6 border-l-0 border border-gray-200">Ashton Cox</td>
        <td class="pl-6 border border-gray-200">Technical Author</td>
        <td class="pl-6 border border-gray-200">San Francisco</td>
        <td class="text-center border border-gray-200">66</td>
        <td class="pl-6 border border-gray-200">22/04/2021</td>
        <td class="pl-6 border-r-0 border border-gray-200">$4,800</td>
      </tr>
      <tr class="text-xs border">
        <td class="pl-6 py-6 border-l-0 border border-gray-200">Cedric Kelly</td>
        <td class="pl-6 border border-gray-200">Javascript Developer</td>
        <td class="pl-6 border border-gray-200">Edinburgh</td>
        <td class="text-center border border-gray-200">22</td>
        <td class="pl-6 border border-gray-200">22/04/2021</td>
        <td class="pl-6 border-r-0 border border-gray-200">$3,600</td>
      </tr>
      <tr class="text-xs border">
        <td class="pl-6 py-6 border-l-0 border border-gray-200">Tiger Nixon</td>
        <td class="pl-6 border border-gray-200">System Architect</td>
        <td class="pl-6 border border-gray-200">San Francisco</td>
        <td class="text-center border border-gray-200">61</td>
        <td class="pl-6 border border-gray-200">22/04/2021</td>
        <td class="pl-6 border-r-0 border border-gray-200">$3,100</td>
      </tr>
      <tr class="text-xs">
        <td class="pl-6 py-6 border-l-0 border-r border-gray-200">Tiger Nixon</td>
        <td class="pl-6 border-l border-r border-gray-200">Technical Author</td>
        <td class="pl-6 border-l border-r border-gray-200">San Francisco</td>
        <td class="text-center border-l border-r border-gray-200">66</td>
        <td class="pl-6 border-l border-r border-gray-200">22/04/2021</td>
        <td class="pl-6 border-l border-gray-200">$4,800</td>
      </tr>
    </tbody>
  </table>
</section>

    Component #7

    <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 class="pl-6">
          <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 class="pl-6">
          <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 class="pl-6">
          <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 class="pl-6">
          <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 class="pl-6">
          <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 border-t border-gray-200">
        <td class="pl-6 py-6">Ashton Cox</td>
        <td class="pl-6">Technical Author</td>
        <td class="pl-6">San Francisco</td>
        <td class="pl-6">66</td>
        <td class="pl-6">22/04/2021</td>
        <td class="pl-6">$4,800</td>
      </tr>
      <tr class="text-xs border-t border-gray-200">
        <td class="pl-6 py-6">Cedric Kelly</td>
        <td class="pl-6">Javascript Developer</td>
        <td class="pl-6">Edinburgh</td>
        <td class="pl-6">22</td>
        <td class="pl-6">22/04/2021</td>
        <td class="pl-6">$3,600</td>
      </tr>
      <tr class="text-xs border-t border-gray-200">
        <td class="pl-6 py-6">Tiger Nixon</td>
        <td class="pl-6">System Architect</td>
        <td class="pl-6">San Francisco</td>
        <td class="pl-6">61</td>
        <td class="pl-6">22/04/2021</td>
        <td class="pl-6">$3,100</td>
      </tr>
      <tr class="text-xs border-t border-gray-200">
        <td class="pl-6 py-6">Tiger Nixon</td>
        <td class="pl-6">Technical Author</td>
        <td class="pl-6">San Francisco</td>
        <td class="pl-6">66</td>
        <td class="pl-6">22/04/2021</td>
        <td class="pl-6">$4,800</td>
      </tr>
    </tbody>
  </table>
</section>

    Component #8

    <section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <div class="pt-4 bg-white shadow rounded">
          <div class="px-6 border-b border-blue-50">
            <div class="flex flex-wrap items-center mb-4">
              <div>
                <h3 class="text-xl font-bold">Project Progress Data</h3>
                <p class="text-sm text-gray-500 font-medium">List of recent contracts and freelancers</p>
              </div>
              <a class="ml-auto flex items-center py-2 px-3 text-xs text-white bg-indigo-500 hover:bg-indigo-600 rounded" href="#">
                <span class="mr-1">
                  <svg class="h-3 w-3 text-indigo-300" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13 8.33337C12.6 8.33337 12.3333 8.60004 12.3333 9.00004V11.6667C12.3333 12.0667 12.0666 12.3334 11.6666 12.3334H2.33331C1.93331 12.3334 1.66665 12.0667 1.66665 11.6667V9.00004C1.66665 8.60004 1.39998 8.33337 0.99998 8.33337C0.59998 8.33337 0.333313 8.60004 0.333313 9.00004V11.6667C0.333313 12.8 1.19998 13.6667 2.33331 13.6667H11.6666C12.8 13.6667 13.6666 12.8 13.6666 11.6667V9.00004C13.6666 8.60004 13.4 8.33337 13 8.33337ZM4.79998 4.13337L6.33331 2.60004V9.00004C6.33331 9.40004 6.59998 9.66671 6.99998 9.66671C7.39998 9.66671 7.66665 9.40004 7.66665 9.00004V2.60004L9.19998 4.13337C9.46665 4.40004 9.86665 4.40004 10.1333 4.13337C10.4 3.86671 10.4 3.46671 10.1333 3.20004L7.46665 0.533374C7.19998 0.266707 6.79998 0.266707 6.53331 0.533374L3.86665 3.20004C3.59998 3.46671 3.59998 3.86671 3.86665 4.13337C4.13331 4.40004 4.53331 4.40004 4.79998 4.13337Z" fill="currentColor"></path>
                  </svg>
                </span>
                <span>Report</span>
              </a>
            </div>
            <div><a class="inline-block px-4 pb-2 text-sm font-medium text-indigo-500 border-b-2 border-indigo-500" href="#">Progress</a><a class="inline-block px-4 pb-2 text-sm font-medium text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Completed</a><a class="inline-block px-4 pb-2 text-sm font-medium text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Invoices</a></div>
          </div>
          <div class="overflow-x-auto">
            <table class="table-auto w-full">
              <thead class="bg-gray-50">
                <tr class="text-xs text-gray-500 text-left">
                  <th class="flex items-center pl-6 py-4 font-medium">
                    <input class="mr-3" type="checkbox" name="" id="">
                    <span>Information</span>
                  </th>
                  <th class="py-4 font-medium">Project Name</th><th class="py-4 font-medium">Progress</th>
                </tr>
              </thead>
              <tbody>
                <tr class="border-b border-blue-50">
                  <td class="flex items-center py-4 px-6 font-medium">
                    <input class="mr-3" type="checkbox" name="" id="">
                    <div class="flex px-4 py-3">
                      <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                      <div>
                        <p class="text-sm font-medium">John Smith</p>
                        <p class="text-xs text-gray-500">Freelancer</p>
                      </div>
                    </div>
                  </td>
                  <td class="font-medium">
                    <p class="text-sm">Example of Project</p>
                    <p class="text-xs text-gray-500">New development</p>
                  </td>
                  <td class="pr-6">
                    <p class="mb-1 text-xs text-indigo-500 font-medium">65%</p>
                    <div class="flex">
                      <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                        <div class="absolute top-0 left-0 h-full w-2/6 bg-indigo-500 rounded-full"></div>
                      </div>
                      <a class="ml-auto" href="#">
                        <svg width="16" height="4" viewbox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8 0.333344C7.67037 0.333344 7.34813 0.431092 7.07405 0.614228C6.79997 0.797363 6.58635 1.05766 6.4602 1.36221C6.33406 1.66675 6.30105 2.00186 6.36536 2.32516C6.42967 2.64846 6.5884 2.94543 6.82149 3.17852C7.05458 3.41161 7.35155 3.57034 7.67485 3.63465C7.99815 3.69896 8.33326 3.66596 8.63781 3.53981C8.94235 3.41366 9.20265 3.20004 9.38578 2.92596C9.56892 2.65188 9.66667 2.32965 9.66667 2.00001C9.66667 1.55798 9.49107 1.13406 9.17851 0.821499C8.86595 0.508939 8.44203 0.333344 8 0.333344ZM2.16667 0.333344C1.83703 0.333344 1.5148 0.431092 1.24072 0.614228C0.966635 0.797363 0.753014 1.05766 0.626868 1.36221C0.500722 1.66675 0.467717 2.00186 0.532025 2.32516C0.596334 2.64846 0.755068 2.94543 0.988156 3.17852C1.22124 3.41161 1.51822 3.57034 1.84152 3.63465C2.16482 3.69896 2.49993 3.66596 2.80447 3.53981C3.10902 3.41366 3.36931 3.20004 3.55245 2.92596C3.73559 2.65188 3.83333 2.32965 3.83333 2.00001C3.83333 1.55798 3.65774 1.13406 3.34518 0.821499C3.03262 0.508939 2.6087 0.333344 2.16667 0.333344ZM13.8333 0.333344C13.5037 0.333344 13.1815 0.431092 12.9074 0.614228C12.6333 0.797363 12.4197 1.05766 12.2935 1.36221C12.1674 1.66675 12.1344 2.00186 12.1987 2.32516C12.263 2.64846 12.4217 2.94543 12.6548 3.17852C12.8879 3.41161 13.1849 3.57034 13.5082 3.63465C13.8315 3.69896 14.1666 3.66596 14.4711 3.53981C14.7757 3.41366 15.036 3.20004 15.2191 2.92596C15.4023 2.65188 15.5 2.32965 15.5 2.00001C15.5 1.55798 15.3244 1.13406 15.0118 0.821499C14.6993 0.508939 14.2754 0.333344 13.8333 0.333344Z" fill="#67798E"></path>
                        </svg>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr class="border-b border-blue-50">
                  <td class="flex items-center py-4 px-6 font-medium">
                    <input class="mr-3" type="checkbox" name="" id="">
                    <div class="flex px-4 py-3">
                      <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                      <div>
                        <p class="text-sm font-medium">John Smith</p>
                        <p class="text-xs text-gray-500">Freelancer</p>
                      </div>
                    </div>
                  </td>
                  <td class="font-medium">
                    <p class="text-sm">Example of Project</p>
                    <p class="text-xs text-gray-500">New development</p>
                  </td>
                  <td class="pr-6">
                    <p class="mb-1 text-xs text-indigo-500 font-medium">65%</p>
                    <div class="flex">
                      <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                        <div class="absolute top-0 left-0 h-full w-2/6 bg-indigo-500 rounded-full"></div>
                      </div>
                      <a class="ml-auto" href="#">
                        <svg width="16" height="4" viewbox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8 0.333344C7.67037 0.333344 7.34813 0.431092 7.07405 0.614228C6.79997 0.797363 6.58635 1.05766 6.4602 1.36221C6.33406 1.66675 6.30105 2.00186 6.36536 2.32516C6.42967 2.64846 6.5884 2.94543 6.82149 3.17852C7.05458 3.41161 7.35155 3.57034 7.67485 3.63465C7.99815 3.69896 8.33326 3.66596 8.63781 3.53981C8.94235 3.41366 9.20265 3.20004 9.38578 2.92596C9.56892 2.65188 9.66667 2.32965 9.66667 2.00001C9.66667 1.55798 9.49107 1.13406 9.17851 0.821499C8.86595 0.508939 8.44203 0.333344 8 0.333344ZM2.16667 0.333344C1.83703 0.333344 1.5148 0.431092 1.24072 0.614228C0.966635 0.797363 0.753014 1.05766 0.626868 1.36221C0.500722 1.66675 0.467717 2.00186 0.532025 2.32516C0.596334 2.64846 0.755068 2.94543 0.988156 3.17852C1.22124 3.41161 1.51822 3.57034 1.84152 3.63465C2.16482 3.69896 2.49993 3.66596 2.80447 3.53981C3.10902 3.41366 3.36931 3.20004 3.55245 2.92596C3.73559 2.65188 3.83333 2.32965 3.83333 2.00001C3.83333 1.55798 3.65774 1.13406 3.34518 0.821499C3.03262 0.508939 2.6087 0.333344 2.16667 0.333344ZM13.8333 0.333344C13.5037 0.333344 13.1815 0.431092 12.9074 0.614228C12.6333 0.797363 12.4197 1.05766 12.2935 1.36221C12.1674 1.66675 12.1344 2.00186 12.1987 2.32516C12.263 2.64846 12.4217 2.94543 12.6548 3.17852C12.8879 3.41161 13.1849 3.57034 13.5082 3.63465C13.8315 3.69896 14.1666 3.66596 14.4711 3.53981C14.7757 3.41366 15.036 3.20004 15.2191 2.92596C15.4023 2.65188 15.5 2.32965 15.5 2.00001C15.5 1.55798 15.3244 1.13406 15.0118 0.821499C14.6993 0.508939 14.2754 0.333344 13.8333 0.333344Z" fill="#67798E"></path>
                        </svg>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr class="border-b border-blue-50">
                  <td class="flex items-center py-4 px-6 font-medium">
                    <input class="mr-3" type="checkbox" name="" id="">
                    <div class="flex px-4 py-3">
                      <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                      <div>
                        <p class="text-sm font-medium">John Smith</p>
                        <p class="text-xs text-gray-500">Freelancer</p>
                      </div>
                    </div>
                  </td>
                  <td class="font-medium">
                    <p class="text-sm">Example of Project</p>
                    <p class="text-xs text-gray-500">New development</p>
                  </td>
                  <td class="pr-6">
                    <p class="mb-1 text-xs text-indigo-500 font-medium">65%</p>
                    <div class="flex">
                      <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                        <div class="absolute top-0 left-0 h-full w-2/6 bg-indigo-500 rounded-full"></div>
                      </div>
                      <a class="ml-auto" href="#">
                        <svg width="16" height="4" viewbox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8 0.333344C7.67037 0.333344 7.34813 0.431092 7.07405 0.614228C6.79997 0.797363 6.58635 1.05766 6.4602 1.36221C6.33406 1.66675 6.30105 2.00186 6.36536 2.32516C6.42967 2.64846 6.5884 2.94543 6.82149 3.17852C7.05458 3.41161 7.35155 3.57034 7.67485 3.63465C7.99815 3.69896 8.33326 3.66596 8.63781 3.53981C8.94235 3.41366 9.20265 3.20004 9.38578 2.92596C9.56892 2.65188 9.66667 2.32965 9.66667 2.00001C9.66667 1.55798 9.49107 1.13406 9.17851 0.821499C8.86595 0.508939 8.44203 0.333344 8 0.333344ZM2.16667 0.333344C1.83703 0.333344 1.5148 0.431092 1.24072 0.614228C0.966635 0.797363 0.753014 1.05766 0.626868 1.36221C0.500722 1.66675 0.467717 2.00186 0.532025 2.32516C0.596334 2.64846 0.755068 2.94543 0.988156 3.17852C1.22124 3.41161 1.51822 3.57034 1.84152 3.63465C2.16482 3.69896 2.49993 3.66596 2.80447 3.53981C3.10902 3.41366 3.36931 3.20004 3.55245 2.92596C3.73559 2.65188 3.83333 2.32965 3.83333 2.00001C3.83333 1.55798 3.65774 1.13406 3.34518 0.821499C3.03262 0.508939 2.6087 0.333344 2.16667 0.333344ZM13.8333 0.333344C13.5037 0.333344 13.1815 0.431092 12.9074 0.614228C12.6333 0.797363 12.4197 1.05766 12.2935 1.36221C12.1674 1.66675 12.1344 2.00186 12.1987 2.32516C12.263 2.64846 12.4217 2.94543 12.6548 3.17852C12.8879 3.41161 13.1849 3.57034 13.5082 3.63465C13.8315 3.69896 14.1666 3.66596 14.4711 3.53981C14.7757 3.41366 15.036 3.20004 15.2191 2.92596C15.4023 2.65188 15.5 2.32965 15.5 2.00001C15.5 1.55798 15.3244 1.13406 15.0118 0.821499C14.6993 0.508939 14.2754 0.333344 13.8333 0.333344Z" fill="#67798E"></path>
                        </svg>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr class="border-b border-blue-50">
                  <td class="flex items-center py-4 px-6 font-medium">
                    <input class="mr-3" type="checkbox" name="" id="">
                    <div class="flex px-4 py-3">
                      <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                      <div>
                        <p class="text-sm font-medium">John Smith</p>
                        <p class="text-xs text-gray-500">Freelancer</p>
                      </div>
                    </div>
                  </td>
                  <td class="font-medium">
                    <p class="text-sm">Example of Project</p>
                    <p class="text-xs text-gray-500">New development</p>
                  </td>
                  <td class="pr-6">
                    <p class="mb-1 text-xs text-indigo-500 font-medium">65%</p>
                    <div class="flex">
                      <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                        <div class="absolute top-0 left-0 h-full w-2/6 bg-indigo-500 rounded-full"></div>
                      </div>
                      <a class="ml-auto" href="#">
                        <svg width="16" height="4" viewbox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8 0.333344C7.67037 0.333344 7.34813 0.431092 7.07405 0.614228C6.79997 0.797363 6.58635 1.05766 6.4602 1.36221C6.33406 1.66675 6.30105 2.00186 6.36536 2.32516C6.42967 2.64846 6.5884 2.94543 6.82149 3.17852C7.05458 3.41161 7.35155 3.57034 7.67485 3.63465C7.99815 3.69896 8.33326 3.66596 8.63781 3.53981C8.94235 3.41366 9.20265 3.20004 9.38578 2.92596C9.56892 2.65188 9.66667 2.32965 9.66667 2.00001C9.66667 1.55798 9.49107 1.13406 9.17851 0.821499C8.86595 0.508939 8.44203 0.333344 8 0.333344ZM2.16667 0.333344C1.83703 0.333344 1.5148 0.431092 1.24072 0.614228C0.966635 0.797363 0.753014 1.05766 0.626868 1.36221C0.500722 1.66675 0.467717 2.00186 0.532025 2.32516C0.596334 2.64846 0.755068 2.94543 0.988156 3.17852C1.22124 3.41161 1.51822 3.57034 1.84152 3.63465C2.16482 3.69896 2.49993 3.66596 2.80447 3.53981C3.10902 3.41366 3.36931 3.20004 3.55245 2.92596C3.73559 2.65188 3.83333 2.32965 3.83333 2.00001C3.83333 1.55798 3.65774 1.13406 3.34518 0.821499C3.03262 0.508939 2.6087 0.333344 2.16667 0.333344ZM13.8333 0.333344C13.5037 0.333344 13.1815 0.431092 12.9074 0.614228C12.6333 0.797363 12.4197 1.05766 12.2935 1.36221C12.1674 1.66675 12.1344 2.00186 12.1987 2.32516C12.263 2.64846 12.4217 2.94543 12.6548 3.17852C12.8879 3.41161 13.1849 3.57034 13.5082 3.63465C13.8315 3.69896 14.1666 3.66596 14.4711 3.53981C14.7757 3.41366 15.036 3.20004 15.2191 2.92596C15.4023 2.65188 15.5 2.32965 15.5 2.00001C15.5 1.55798 15.3244 1.13406 15.0118 0.821499C14.6993 0.508939 14.2754 0.333344 13.8333 0.333344Z" fill="#67798E"></path>
                        </svg>
                      </a>
                    </div>
                  </td>
                </tr>
                <tr class="border-b border-blue-50">
                  <td class="flex items-center py-4 px-6 font-medium">
                    <input class="mr-3" type="checkbox" name="" id="">
                    <div class="flex px-4 py-3">
                      <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1559893088-c0787ebfc084?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                      <div>
                        <p class="text-sm font-medium">John Smith</p>
                        <p class="text-xs text-gray-500">Freelancer</p>
                      </div>
                    </div>
                  </td>
                  <td class="font-medium">
                    <p class="text-sm">Example of Project</p>
                    <p class="text-xs text-gray-500">New development</p>
                  </td>
                  <td class="pr-6">
                    <p class="mb-1 text-xs text-indigo-500 font-medium">65%</p>
                    <div class="flex">
                      <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                        <div class="absolute top-0 left-0 h-full w-2/6 bg-indigo-500 rounded-full"></div>
                      </div>
                      <a class="ml-auto" href="#">
                        <svg width="16" height="4" viewbox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8 0.333344C7.67037 0.333344 7.34813 0.431092 7.07405 0.614228C6.79997 0.797363 6.58635 1.05766 6.4602 1.36221C6.33406 1.66675 6.30105 2.00186 6.36536 2.32516C6.42967 2.64846 6.5884 2.94543 6.82149 3.17852C7.05458 3.41161 7.35155 3.57034 7.67485 3.63465C7.99815 3.69896 8.33326 3.66596 8.63781 3.53981C8.94235 3.41366 9.20265 3.20004 9.38578 2.92596C9.56892 2.65188 9.66667 2.32965 9.66667 2.00001C9.66667 1.55798 9.49107 1.13406 9.17851 0.821499C8.86595 0.508939 8.44203 0.333344 8 0.333344ZM2.16667 0.333344C1.83703 0.333344 1.5148 0.431092 1.24072 0.614228C0.966635 0.797363 0.753014 1.05766 0.626868 1.36221C0.500722 1.66675 0.467717 2.00186 0.532025 2.32516C0.596334 2.64846 0.755068 2.94543 0.988156 3.17852C1.22124 3.41161 1.51822 3.57034 1.84152 3.63465C2.16482 3.69896 2.49993 3.66596 2.80447 3.53981C3.10902 3.41366 3.36931 3.20004 3.55245 2.92596C3.73559 2.65188 3.83333 2.32965 3.83333 2.00001C3.83333 1.55798 3.65774 1.13406 3.34518 0.821499C3.03262 0.508939 2.6087 0.333344 2.16667 0.333344ZM13.8333 0.333344C13.5037 0.333344 13.1815 0.431092 12.9074 0.614228C12.6333 0.797363 12.4197 1.05766 12.2935 1.36221C12.1674 1.66675 12.1344 2.00186 12.1987 2.32516C12.263 2.64846 12.4217 2.94543 12.6548 3.17852C12.8879 3.41161 13.1849 3.57034 13.5082 3.63465C13.8315 3.69896 14.1666 3.66596 14.4711 3.53981C14.7757 3.41366 15.036 3.20004 15.2191 2.92596C15.4023 2.65188 15.5 2.32965 15.5 2.00001C15.5 1.55798 15.3244 1.13406 15.0118 0.821499C14.6993 0.508939 14.2754 0.333344 13.8333 0.333344Z" fill="#67798E"></path>
                        </svg>
                      </a>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="py-4 text-center">
              <a class="inline-flex items-center text-xs text-indigo-500 hover:text-blue-600 font-medium" href="#">
                <span class="mr-1">
                  <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.99984 8.66669H1.33317C1.15636 8.66669 0.98679 8.73692 0.861766 8.86195C0.736742 8.98697 0.666504 9.15654 0.666504 9.33335V14.6667C0.666504 14.8435 0.736742 15.0131 0.861766 15.1381C0.98679 15.2631 1.15636 15.3334 1.33317 15.3334H3.99984C4.17665 15.3334 4.34622 15.2631 4.47124 15.1381C4.59627 15.0131 4.6665 14.8435 4.6665 14.6667V9.33335C4.6665 9.15654 4.59627 8.98697 4.47124 8.86195C4.34622 8.73692 4.17665 8.66669 3.99984 8.66669ZM3.33317 14H1.99984V10H3.33317V14ZM14.6665 6.00002H11.9998C11.823 6.00002 11.6535 6.07026 11.5284 6.19528C11.4034 6.32031 11.3332 6.48988 11.3332 6.66669V14.6667C11.3332 14.8435 11.4034 15.0131 11.5284 15.1381C11.6535 15.2631 11.823 15.3334 11.9998 15.3334H14.6665C14.8433 15.3334 15.0129 15.2631 15.1379 15.1381C15.2629 15.0131 15.3332 14.8435 15.3332 14.6667V6.66669C15.3332 6.48988 15.2629 6.32031 15.1379 6.19528C15.0129 6.07026 14.8433 6.00002 14.6665 6.00002ZM13.9998 14H12.6665V7.33335H13.9998V14ZM9.33317 0.666687H6.6665C6.48969 0.666687 6.32012 0.736925 6.1951 0.861949C6.07007 0.986973 5.99984 1.15654 5.99984 1.33335V14.6667C5.99984 14.8435 6.07007 15.0131 6.1951 15.1381C6.32012 15.2631 6.48969 15.3334 6.6665 15.3334H9.33317C9.50998 15.3334 9.67955 15.2631 9.80457 15.1381C9.9296 15.0131 9.99984 14.8435 9.99984 14.6667V1.33335C9.99984 1.15654 9.9296 0.986973 9.80457 0.861949C9.67955 0.736925 9.50998 0.666687 9.33317 0.666687ZM8.6665 14H7.33317V2.00002H8.6665V14Z" fill="#8880EB"></path>
                  </svg>
                </span>
                <span>See more Projects</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="py-4 bg-white rounded">
          <div class="px-6 pb-6 border-b border-blue-50">
            <h3 class="text-xl font-bold">Social Media Traffic</h3>
            <p class="text-sm text-gray-500">Visits from social media links</p>
          </div>
          <div class="p-6 border-b border-blue-50">
            <div class="flex -mx-4">
              <div class="flex items-center w-1/2 px-4">
                <img class="mr-2 h-6" src="artemis-assets/mini-logos/instagram.svg" alt="">
                <p class="text-sm font-medium">Instagram</p>
              </div>
              <div class="w-1/2 px-4">
                <p class="mb-1 text-xs text-indigo-500 font-medium">90%</p>
                <div class="flex">
                  <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                    <div class="absolute top-0 left-0 h-full w-10/12 bg-indigo-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-6 border-b border-blue-50">
            <div class="flex -mx-4">
              <div class="flex items-center w-1/2 px-4">
                <img class="mr-2 h-6" src="artemis-assets/mini-logos/twitter.svg" alt="">
                <p class="text-sm font-medium">Twitter</p>
              </div>
              <div class="w-1/2 px-4">
                <p class="mb-1 text-xs text-indigo-500 font-medium">82%</p>
                <div class="flex">
                  <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                    <div class="absolute top-0 left-0 h-full w-9/12 bg-indigo-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-6 border-b border-blue-50">
            <div class="flex -mx-4">
              <div class="flex items-center w-1/2 px-4">
                <img class="mr-2 h-6" src="artemis-assets/mini-logos/facebook.svg" alt="">
                <p class="text-sm font-medium">Facebook</p>
              </div>
              <div class="w-1/2 px-4">
                <p class="mb-1 text-xs text-indigo-500 font-medium">75%</p>
                <div class="flex">
                  <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                    <div class="absolute top-0 left-0 h-full w-8/12 bg-indigo-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-6 border-b border-blue-50">
            <div class="flex -mx-4">
              <div class="flex items-center w-1/2 px-4">
                <img class="mr-2 h-6" src="artemis-assets/mini-logos/linkedin.svg" alt="">
                <p class="text-sm font-medium">Linkedin</p>
              </div>
              <div class="w-1/2 px-4">
                <p class="mb-1 text-xs text-indigo-500 font-medium">65%</p>
                <div class="flex">
                  <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                    <div class="absolute top-0 left-0 h-full w-7/12 bg-indigo-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-6 border-b border-blue-50">
            <div class="flex -mx-4">
              <div class="flex items-center w-1/2 px-4">
                <img class="mr-2 h-6" src="artemis-assets/mini-logos/tiktok.svg" alt="">
                <p class="text-sm font-medium">Tik Tok</p>
              </div>
              <div class="w-1/2 px-4">
                <p class="mb-1 text-xs text-indigo-500 font-medium">50%</p>
                <div class="flex">
                  <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                    <div class="absolute top-0 left-0 h-full w-6/12 bg-indigo-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-6 border-b border-blue-50">
            <div class="flex -mx-4">
              <div class="flex items-center w-1/2 px-4">
                <img class="mr-2 h-6" src="artemis-assets/mini-logos/reddit.svg" alt="">
                <p class="text-sm font-medium">Reddit</p>
              </div>
              <div class="w-1/2 px-4">
                <p class="mb-1 text-xs text-indigo-500 font-medium">42%</p>
                <div class="flex">
                  <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                    <div class="absolute top-0 left-0 h-full w-5/12 bg-indigo-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="p-6">
            <div class="flex -mx-4">
              <div class="flex items-center w-1/2 px-4">
                <img class="mr-2 h-6" src="artemis-assets/mini-logos/producthunt.svg" alt="">
                <p class="text-sm font-medium">Product Hunt</p>
              </div>
              <div class="w-1/2 px-4">
                <p class="mb-1 text-xs text-indigo-500 font-medium">25%</p>
                <div class="flex">
                  <div class="relative h-1 w-48 bg-indigo-50 rounded-full">
                    <div class="absolute top-0 left-0 h-full w-3/12 bg-indigo-500 rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
    Share.

    Terry White is a professional technical writer, WordPress developer, Web Designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him

    Related Posts

    Add A Comment
    Leave A Reply