UI Components in Trizzle library

Tailwind Component #81

<section class="py-3">
  <div class="container px-4 mx-auto">
    <a class="block p-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
      <h4 class="text-white font-semibold leading-6 mb-1">Implement Login</h4>
      <div class="flex items-center mb-4">
        <span class="h-2 w-2 mr-1 bg-pink-400 rounded-full"></span>
        <span class="text-xs font-medium text-pink-400">Development</span>
      </div>
      <p class="text-xs text-gray-300 leading-normal mb-10">This is an example task that can be used within a Kanban system.</p>
      <div class="pt-4 border-t border-gray-500">
        <div class="flex flex-wrap items-center justify-between -m-2">
          <div class="w-auto p-2">
            <div class="flex items-center p-2 bg-gray-500 rounded-md">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="ml-2 text-xs font-medium text-gray-200">Jul 03</span>
            </div>
          </div>
          <div class="w-auto p-2">
            <div class="flex h-full items-center">
              <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</section>

Tailwind Component #82

Tailwind CSS

Trizzle

<section class="relative pt-24 lg:py-44">
  <img class="hidden lg:block absolute top-0 right-0 h-full w-1/2" src="trizzle-assets/images/placeholder-right-dashboard.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="container px-4 mx-auto">
      <div class="lg:w-1/2">
        <div class="relative max-w-xs lg:max-w-md mx-auto text-center">
          <a class="inline-block mx-auto mb-10" href="#">
            <img class="block" src="trizzle-assets/logos/trizzle-logo-blue.svg" alt="">
          </a>
        </div>
        <div class="relative max-w-md mx-auto">
          <div class="text-center mb-10">
            <h2 class="text-2xl text-gray-100 font-semibold mb-2">Sign up with new account</h2>
            <p class="text-gray-300 font-medium">Start your journey with us</p>
          </div>
          <form action="">
            <div class="relative w-full h-14 py-4 px-3 mb-8 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">Name</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput5-1" type="text">
            </div>
            <div class="relative w-full h-14 py-4 px-3 mb-8 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">Email*</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput5-2" type="email">
            </div>
            <div class="relative w-full h-14 py-4 px-3 mb-4 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">Password*</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput5-3" type="password">
            </div>
            <span class="block text-xs text-gray-300 font-semibold mb-6">Must be at least 12 characters.</span>
            <button class="block w-full py-4 mb-4 leading-6 text-white font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Create account</button>
            <a class="flex items-center justify-center w-full py-4 mb-6 leading-6 text-white font-semibold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
              <div class="w-4 bg-white rounded-sm">
                <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.5 0H14L8 4.738L2 0H1.5C0.672 0 0 0.672 0 1.5V10.5C0 11.328 0.672 12 1.5 12H2V2.646L8 7.261L14 2.645V12H14.5C15.328 12 16 11.328 16 10.5V1.5C16 0.672 15.328 0 14.5 0Z" fill="#F44336"></path>
                </svg>
              </div>
              <span class="ml-3">Sign In with Gmail</span>
            </a>
            <p class="font-medium text-center">
              <span class="text-gray-300">Already have an acoount?</span>
              <a class="inline-block text-blue-500 hover:underline" href="#">Sign In</a>
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
  <img class="lg:hidden mt-24" src="trizzle-assets/images/placeholder-right-dashboard.png" alt="">
</section>

Tailwind Component #83

Tailwind CSS

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-red-700 rounded-lg">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 12C9.75278 12 9.5111 12.0733 9.30554 12.2107C9.09998 12.348 8.93976 12.5432 8.84516 12.7716C8.75055 13.0001 8.72579 13.2514 8.77402 13.4939C8.82225 13.7363 8.94131 13.9591 9.11612 14.1339C9.29094 14.3087 9.51367 14.4277 9.75614 14.476C9.99862 14.5242 10.25 14.4995 10.4784 14.4049C10.7068 14.3102 10.902 14.15 11.0393 13.9445C11.1767 13.7389 11.25 13.4972 11.25 13.25C11.25 12.9185 11.1183 12.6005 10.8839 12.3661C10.6495 12.1317 10.3315 12 10 12ZM10 10.5C10.2652 10.5 10.5196 10.3946 10.7071 10.2071C10.8946 10.0196 11 9.76522 11 9.5V6.5C11 6.23478 10.8946 5.98043 10.7071 5.79289C10.5196 5.60536 10.2652 5.5 10 5.5C9.73479 5.5 9.48043 5.60536 9.2929 5.79289C9.10536 5.98043 9 6.23478 9 6.5V9.5C9 9.76522 9.10536 10.0196 9.2929 10.2071C9.48043 10.3946 9.73479 10.5 10 10.5ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34874 18.9425 4.80691 17.0678 2.93219C15.1931 1.05746 12.6513 0.00294858 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C17.9976 12.121 17.1539 14.1544 15.6542 15.6542C14.1544 17.1539 12.121 17.9976 10 18Z" fill="#FF4842"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-red-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block text-red-50">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Tailwind Component #84

Tailwind CSS

Trizzle

<section class="py-3" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap mb-4 items-center justify-between">
        <div class="w-full sm:w-auto">
          <h4 class="text-xl leading-normal font-semibold text-white">Discover our tools</h4>
          <p class="text-xs font-medium text-gray-300 mb-4">Your subtitle text about discovering tools</p>
        </div>
        <div class="w-full sm:w-auto"><a x-on:click.prevent="showContent = true" x-show="!showContent" class="inline-block py-2 px-4 text-xs leading-5 font-semibold text-blue-500 bg-gray-600 hover:bg-gray-700 rounded-lg" href="#">See All</a></div>
      </div>
      <a class="group flex py-3 pl-4 pr-6 items-center justify-between bg-gray-600 hover:bg-gray-700 rounded-md transition duration-200" href="#">
        <div class="flex max-w-md pr-10">
          <div class="flex-shrink-0 flex w-10 h-10 mr-3 items-center justify-center rounded-md bg-gray-700">
            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 16.9999C12.2652 16.9999 12.5196 16.8945 12.7071 16.707C12.8946 16.5195 13 16.2651 13 15.9999V13.9999C13 13.7347 12.8946 13.4803 12.7071 13.2928C12.5196 13.1053 12.2652 12.9999 12 12.9999C11.7348 12.9999 11.4804 13.1053 11.2929 13.2928C11.1054 13.4803 11 13.7347 11 13.9999V15.9999C11 16.2651 11.1054 16.5195 11.2929 16.707C11.4804 16.8945 11.7348 16.9999 12 16.9999ZM8.00001 16.9999C8.26522 16.9999 8.51958 16.8945 8.70711 16.707C8.89465 16.5195 9.00001 16.2651 9.00001 15.9999V13.9999C9.00001 13.7347 8.89465 13.4803 8.70711 13.2928C8.51958 13.1053 8.26522 12.9999 8.00001 12.9999C7.73479 12.9999 7.48044 13.1053 7.2929 13.2928C7.10536 13.4803 7.00001 13.7347 7.00001 13.9999V15.9999C7.00001 16.2651 7.10536 16.5195 7.2929 16.707C7.48044 16.8945 7.73479 16.9999 8.00001 16.9999ZM17 4.99991H15.62L13.89 1.5499C13.8371 1.42296 13.7587 1.30828 13.6595 1.21303C13.5603 1.11779 13.4425 1.04402 13.3135 0.996347C13.1846 0.948672 13.0471 0.928113 12.9098 0.935953C12.7725 0.943793 12.6383 0.979865 12.5156 1.04191C12.3929 1.10396 12.2843 1.19065 12.1966 1.29657C12.1089 1.40249 12.044 1.52536 12.0059 1.6575C11.9679 1.78964 11.9575 1.92821 11.9754 2.06455C11.9933 2.20089 12.0391 2.33208 12.11 2.44991L13.38 4.99991H6.62001L7.89001 2.44991C7.98707 2.21681 7.99237 1.95563 7.90483 1.71879C7.81729 1.48196 7.6434 1.287 7.41807 1.17307C7.19274 1.05914 6.93265 1.03467 6.69002 1.10456C6.44739 1.17446 6.24019 1.33356 6.11001 1.5499L4.38001 4.99991H3.00001C2.2932 5.01066 1.61288 5.27065 1.07906 5.73404C0.545229 6.19742 0.19218 6.83443 0.0821768 7.53271C-0.0278264 8.23099 0.112282 8.94569 0.477792 9.55075C0.843302 10.1558 1.41073 10.6124 2.08001 10.8399L2.82001 18.2999C2.89463 19.0425 3.24335 19.7306 3.79808 20.2298C4.35281 20.7291 5.07371 21.0036 5.82001 20.9999H14.2C14.9463 21.0036 15.6672 20.7291 16.2219 20.2298C16.7767 19.7306 17.1254 19.0425 17.2 18.2999L17.94 10.8399C18.6107 10.6117 19.1791 10.1535 19.5443 9.54639C19.9096 8.9393 20.0482 8.22254 19.9356 7.52305C19.823 6.82356 19.4665 6.18649 18.9292 5.72468C18.3919 5.26287 17.7085 5.00612 17 4.99991ZM15.19 18.0999C15.1651 18.3474 15.0489 18.5768 14.864 18.7432C14.6791 18.9096 14.4388 19.0012 14.19 18.9999H5.81001C5.56124 19.0012 5.32094 18.9096 5.13603 18.7432C4.95112 18.5768 4.83488 18.3474 4.81001 18.0999L4.10001 10.9999H15.9L15.19 18.0999ZM17 8.9999H3.00001C2.73479 8.9999 2.48044 8.89455 2.2929 8.70701C2.10536 8.51948 2.00001 8.26512 2.00001 7.99991C2.00001 7.73469 2.10536 7.48033 2.2929 7.2928C2.48044 7.10526 2.73479 6.99991 3.00001 6.99991H17C17.2652 6.99991 17.5196 7.10526 17.7071 7.2928C17.8946 7.48033 18 7.73469 18 7.99991C18 8.26512 17.8946 8.51948 17.7071 8.70701C17.5196 8.89455 17.2652 8.9999 17 8.9999Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div>
            <h5 class="text-sm leading-5 font-semibold text-gray-100">Create events in your calendar</h5>
            <span class="text-xs leading-5 text-gray-300 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span>
          </div>
        </div>
        <span class="text-gray-400 group-hover:text-gray-300">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
          </svg>
        </span>
      </a>
      <a class="group flex py-3 pl-4 pr-6 items-center justify-between hover:bg-gray-700 rounded-md transition duration-200" href="#">
        <div class="flex max-w-md pr-10">
          <div class="flex-shrink-0 flex w-10 h-10 mr-3 items-center justify-center rounded-md bg-gray-700">
            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 18C10.1978 18 10.3911 17.9414 10.5556 17.8315C10.72 17.7216 10.8482 17.5654 10.9239 17.3827C10.9996 17.2 11.0194 16.9989 10.9808 16.8049C10.9422 16.6109 10.847 16.4327 10.7071 16.2929C10.5673 16.153 10.3891 16.0578 10.1951 16.0192C10.0011 15.9806 9.80004 16.0004 9.61732 16.0761C9.43459 16.1518 9.27841 16.28 9.16853 16.4444C9.05865 16.6089 9 16.8022 9 17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM15 18C15.1978 18 15.3911 17.9414 15.5556 17.8315C15.72 17.7216 15.8482 17.5654 15.9239 17.3827C15.9996 17.2 16.0194 16.9989 15.9808 16.8049C15.9422 16.6109 15.847 16.4327 15.7071 16.2929C15.5673 16.153 15.3891 16.0578 15.1951 16.0192C15.0011 15.9806 14.8 16.0004 14.6173 16.0761C14.4346 16.1518 14.2784 16.28 14.1685 16.4444C14.0586 16.6089 14 16.8022 14 17C14 17.2652 14.1054 17.5196 14.2929 17.7071C14.4804 17.8946 14.7348 18 15 18ZM15 14C15.1978 14 15.3911 13.9414 15.5556 13.8315C15.72 13.7216 15.8482 13.5654 15.9239 13.3827C15.9996 13.2 16.0194 12.9989 15.9808 12.8049C15.9422 12.6109 15.847 12.4327 15.7071 12.2929C15.5673 12.153 15.3891 12.0578 15.1951 12.0192C15.0011 11.9806 14.8 12.0004 14.6173 12.0761C14.4346 12.1518 14.2784 12.28 14.1685 12.4444C14.0586 12.6089 14 12.8022 14 13C14 13.2652 14.1054 13.5196 14.2929 13.7071C14.4804 13.8946 14.7348 14 15 14ZM10 14C10.1978 14 10.3911 13.9414 10.5556 13.8315C10.72 13.7216 10.8482 13.5654 10.9239 13.3827C10.9996 13.2 11.0194 12.9989 10.9808 12.8049C10.9422 12.6109 10.847 12.4327 10.7071 12.2929C10.5673 12.153 10.3891 12.0578 10.1951 12.0192C10.0011 11.9806 9.80004 12.0004 9.61732 12.0761C9.43459 12.1518 9.27841 12.28 9.16853 12.4444C9.05865 12.6089 9 12.8022 9 13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8946 9.73478 14 10 14ZM17 2H16V1C16 0.734784 15.8946 0.48043 15.7071 0.292893C15.5196 0.105357 15.2652 0 15 0C14.7348 0 14.4804 0.105357 14.2929 0.292893C14.1054 0.48043 14 0.734784 14 1V2H6V1C6 0.734784 5.89464 0.48043 5.70711 0.292893C5.51957 0.105357 5.26522 0 5 0C4.73478 0 4.48043 0.105357 4.29289 0.292893C4.10536 0.48043 4 0.734784 4 1V2H3C2.20435 2 1.44129 2.31607 0.87868 2.87868C0.316071 3.44129 0 4.20435 0 5V19C0 19.7956 0.316071 20.5587 0.87868 21.1213C1.44129 21.6839 2.20435 22 3 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V5C20 4.20435 19.6839 3.44129 19.1213 2.87868C18.5587 2.31607 17.7956 2 17 2ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19V10H18V19ZM18 8H2V5C2 4.73478 2.10536 4.48043 2.29289 4.29289C2.48043 4.10536 2.73478 4 3 4H4V5C4 5.26522 4.10536 5.51957 4.29289 5.70711C4.48043 5.89464 4.73478 6 5 6C5.26522 6 5.51957 5.89464 5.70711 5.70711C5.89464 5.51957 6 5.26522 6 5V4H14V5C14 5.26522 14.1054 5.51957 14.2929 5.70711C14.4804 5.89464 14.7348 6 15 6C15.2652 6 15.5196 5.89464 15.7071 5.70711C15.8946 5.51957 16 5.26522 16 5V4H17C17.2652 4 17.5196 4.10536 17.7071 4.29289C17.8946 4.48043 18 4.73478 18 5V8ZM5 14C5.19778 14 5.39112 13.9414 5.55557 13.8315C5.72002 13.7216 5.84819 13.5654 5.92388 13.3827C5.99957 13.2 6.01937 12.9989 5.98079 12.8049C5.9422 12.6109 5.84696 12.4327 5.70711 12.2929C5.56725 12.153 5.38907 12.0578 5.19509 12.0192C5.00111 11.9806 4.80004 12.0004 4.61732 12.0761C4.43459 12.1518 4.27841 12.28 4.16853 12.4444C4.05865 12.6089 4 12.8022 4 13C4 13.2652 4.10536 13.5196 4.29289 13.7071C4.48043 13.8946 4.73478 14 5 14ZM5 18C5.19778 18 5.39112 17.9414 5.55557 17.8315C5.72002 17.7216 5.84819 17.5654 5.92388 17.3827C5.99957 17.2 6.01937 16.9989 5.98079 16.8049C5.9422 16.6109 5.84696 16.4327 5.70711 16.2929C5.56725 16.153 5.38907 16.0578 5.19509 16.0192C5.00111 15.9806 4.80004 16.0004 4.61732 16.0761C4.43459 16.1518 4.27841 16.28 4.16853 16.4444C4.05865 16.6089 4 16.8022 4 17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div>
            <h5 class="text-sm leading-5 font-semibold text-gray-100">Receive your payments</h5>
            <span class="text-xs leading-5 text-gray-300 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span>
          </div>
        </div>
        <span class="text-gray-400 group-hover:text-gray-300">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
          </svg>
        </span>
      </a>
      <a class="group flex py-3 pl-4 pr-6 items-center justify-between bg-gray-600 hover:bg-gray-700 rounded-md transition duration-200" href="#">
        <div class="flex max-w-md pr-10">
          <div class="flex-shrink-0 flex w-10 h-10 mr-3 items-center justify-center rounded-md bg-gray-700">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 16H1C0.734784 16 0.48043 16.1054 0.292893 16.2929C0.105357 16.4804 0 16.7348 0 17C0 17.2652 0.105357 17.5196 0.292893 17.7071C0.48043 17.8946 0.734784 18 1 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 20H1C0.734784 20 0.48043 20.1054 0.292893 20.2929C0.105357 20.4804 0 20.7348 0 21C0 21.2652 0.105357 21.5196 0.292893 21.7071C0.48043 21.8946 0.734784 22 1 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20ZM5 6C4.80222 6 4.60888 6.05865 4.44443 6.16853C4.27998 6.27841 4.15181 6.43459 4.07612 6.61732C4.00043 6.80004 3.98063 7.00111 4.01921 7.19509C4.0578 7.38907 4.15304 7.56725 4.29289 7.70711C4.43275 7.84696 4.61093 7.9422 4.80491 7.98079C4.99889 8.01937 5.19996 7.99957 5.38268 7.92388C5.56541 7.84819 5.72159 7.72002 5.83147 7.55557C5.94135 7.39112 6 7.19778 6 7C6 6.73478 5.89464 6.48043 5.70711 6.29289C5.51957 6.10536 5.26522 6 5 6ZM19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V11C0 11.7956 0.31607 12.5587 0.87868 13.1213C1.44129 13.6839 2.20435 14 3 14H19C19.7956 14 20.5587 13.6839 21.1213 13.1213C21.6839 12.5587 22 11.7956 22 11V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM11 4C10.4067 4 9.82664 4.17595 9.33329 4.50559C8.83994 4.83524 8.45542 5.30377 8.22836 5.85195C8.0013 6.40013 7.94189 7.00333 8.05764 7.58527C8.1734 8.16721 8.45912 8.70176 8.87868 9.12132C9.29824 9.54088 9.83279 9.8266 10.4147 9.94236C10.9967 10.0581 11.5999 9.9987 12.1481 9.77164C12.6962 9.54458 13.1648 9.16006 13.4944 8.66671C13.8241 8.17336 14 7.59334 14 7C14 6.20435 13.6839 5.44129 13.1213 4.87868C12.5587 4.31607 11.7956 4 11 4ZM11 8C10.8022 8 10.6089 7.94135 10.4444 7.83147C10.28 7.72159 10.1518 7.56541 10.0761 7.38268C10.0004 7.19996 9.98063 6.99889 10.0192 6.80491C10.0578 6.61093 10.153 6.43275 10.2929 6.29289C10.4327 6.15304 10.6109 6.0578 10.8049 6.01921C10.9989 5.98063 11.2 6.00043 11.3827 6.07612C11.5654 6.15181 11.7216 6.27998 11.8315 6.44443C11.9414 6.60888 12 6.80222 12 7C12 7.26522 11.8946 7.51957 11.7071 7.70711C11.5196 7.89464 11.2652 8 11 8ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div>
            <h5 class="text-sm leading-5 font-semibold text-gray-100">Instant sales support</h5>
            <span class="text-xs leading-5 text-gray-300 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span>
          </div>
        </div>
        <span class="text-gray-400 group-hover:text-gray-300">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
          </svg>
        </span>
      </a>
      <a x-show="showContent" class="visibility-item group flex py-3 pl-4 pr-6 items-center justify-between hover:bg-gray-700 rounded-md transition duration-200" href="#">
        <div class="flex max-w-md pr-10">
          <div class="flex-shrink-0 flex w-10 h-10 mr-3 items-center justify-center rounded-md bg-gray-700">
            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 18C10.1978 18 10.3911 17.9414 10.5556 17.8315C10.72 17.7216 10.8482 17.5654 10.9239 17.3827C10.9996 17.2 11.0194 16.9989 10.9808 16.8049C10.9422 16.6109 10.847 16.4327 10.7071 16.2929C10.5673 16.153 10.3891 16.0578 10.1951 16.0192C10.0011 15.9806 9.80004 16.0004 9.61732 16.0761C9.43459 16.1518 9.27841 16.28 9.16853 16.4444C9.05865 16.6089 9 16.8022 9 17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM15 18C15.1978 18 15.3911 17.9414 15.5556 17.8315C15.72 17.7216 15.8482 17.5654 15.9239 17.3827C15.9996 17.2 16.0194 16.9989 15.9808 16.8049C15.9422 16.6109 15.847 16.4327 15.7071 16.2929C15.5673 16.153 15.3891 16.0578 15.1951 16.0192C15.0011 15.9806 14.8 16.0004 14.6173 16.0761C14.4346 16.1518 14.2784 16.28 14.1685 16.4444C14.0586 16.6089 14 16.8022 14 17C14 17.2652 14.1054 17.5196 14.2929 17.7071C14.4804 17.8946 14.7348 18 15 18ZM15 14C15.1978 14 15.3911 13.9414 15.5556 13.8315C15.72 13.7216 15.8482 13.5654 15.9239 13.3827C15.9996 13.2 16.0194 12.9989 15.9808 12.8049C15.9422 12.6109 15.847 12.4327 15.7071 12.2929C15.5673 12.153 15.3891 12.0578 15.1951 12.0192C15.0011 11.9806 14.8 12.0004 14.6173 12.0761C14.4346 12.1518 14.2784 12.28 14.1685 12.4444C14.0586 12.6089 14 12.8022 14 13C14 13.2652 14.1054 13.5196 14.2929 13.7071C14.4804 13.8946 14.7348 14 15 14ZM10 14C10.1978 14 10.3911 13.9414 10.5556 13.8315C10.72 13.7216 10.8482 13.5654 10.9239 13.3827C10.9996 13.2 11.0194 12.9989 10.9808 12.8049C10.9422 12.6109 10.847 12.4327 10.7071 12.2929C10.5673 12.153 10.3891 12.0578 10.1951 12.0192C10.0011 11.9806 9.80004 12.0004 9.61732 12.0761C9.43459 12.1518 9.27841 12.28 9.16853 12.4444C9.05865 12.6089 9 12.8022 9 13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8946 9.73478 14 10 14ZM17 2H16V1C16 0.734784 15.8946 0.48043 15.7071 0.292893C15.5196 0.105357 15.2652 0 15 0C14.7348 0 14.4804 0.105357 14.2929 0.292893C14.1054 0.48043 14 0.734784 14 1V2H6V1C6 0.734784 5.89464 0.48043 5.70711 0.292893C5.51957 0.105357 5.26522 0 5 0C4.73478 0 4.48043 0.105357 4.29289 0.292893C4.10536 0.48043 4 0.734784 4 1V2H3C2.20435 2 1.44129 2.31607 0.87868 2.87868C0.316071 3.44129 0 4.20435 0 5V19C0 19.7956 0.316071 20.5587 0.87868 21.1213C1.44129 21.6839 2.20435 22 3 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V5C20 4.20435 19.6839 3.44129 19.1213 2.87868C18.5587 2.31607 17.7956 2 17 2ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19V10H18V19ZM18 8H2V5C2 4.73478 2.10536 4.48043 2.29289 4.29289C2.48043 4.10536 2.73478 4 3 4H4V5C4 5.26522 4.10536 5.51957 4.29289 5.70711C4.48043 5.89464 4.73478 6 5 6C5.26522 6 5.51957 5.89464 5.70711 5.70711C5.89464 5.51957 6 5.26522 6 5V4H14V5C14 5.26522 14.1054 5.51957 14.2929 5.70711C14.4804 5.89464 14.7348 6 15 6C15.2652 6 15.5196 5.89464 15.7071 5.70711C15.8946 5.51957 16 5.26522 16 5V4H17C17.2652 4 17.5196 4.10536 17.7071 4.29289C17.8946 4.48043 18 4.73478 18 5V8ZM5 14C5.19778 14 5.39112 13.9414 5.55557 13.8315C5.72002 13.7216 5.84819 13.5654 5.92388 13.3827C5.99957 13.2 6.01937 12.9989 5.98079 12.8049C5.9422 12.6109 5.84696 12.4327 5.70711 12.2929C5.56725 12.153 5.38907 12.0578 5.19509 12.0192C5.00111 11.9806 4.80004 12.0004 4.61732 12.0761C4.43459 12.1518 4.27841 12.28 4.16853 12.4444C4.05865 12.6089 4 12.8022 4 13C4 13.2652 4.10536 13.5196 4.29289 13.7071C4.48043 13.8946 4.73478 14 5 14ZM5 18C5.19778 18 5.39112 17.9414 5.55557 17.8315C5.72002 17.7216 5.84819 17.5654 5.92388 17.3827C5.99957 17.2 6.01937 16.9989 5.98079 16.8049C5.9422 16.6109 5.84696 16.4327 5.70711 16.2929C5.56725 16.153 5.38907 16.0578 5.19509 16.0192C5.00111 15.9806 4.80004 16.0004 4.61732 16.0761C4.43459 16.1518 4.27841 16.28 4.16853 16.4444C4.05865 16.6089 4 16.8022 4 17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div>
            <h5 class="text-sm leading-5 font-semibold text-gray-100">Schedule Events on Your Calendar</h5>
            <span class="text-xs leading-5 text-gray-300 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span>
          </div>
        </div>
        <span class="text-gray-400 group-hover:text-gray-300">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
          </svg>
        </span>
      </a>
      <a x-show="showContent" class="visibility-item group flex py-3 pl-4 pr-6 items-center justify-between bg-gray-600 hover:bg-gray-700 rounded-md transition duration-200" href="#">
        <div class="flex max-w-md pr-10">
          <div class="flex-shrink-0 flex w-10 h-10 mr-3 items-center justify-center rounded-md bg-gray-700">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 16H1C0.734784 16 0.48043 16.1054 0.292893 16.2929C0.105357 16.4804 0 16.7348 0 17C0 17.2652 0.105357 17.5196 0.292893 17.7071C0.48043 17.8946 0.734784 18 1 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 20H1C0.734784 20 0.48043 20.1054 0.292893 20.2929C0.105357 20.4804 0 20.7348 0 21C0 21.2652 0.105357 21.5196 0.292893 21.7071C0.48043 21.8946 0.734784 22 1 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20ZM5 6C4.80222 6 4.60888 6.05865 4.44443 6.16853C4.27998 6.27841 4.15181 6.43459 4.07612 6.61732C4.00043 6.80004 3.98063 7.00111 4.01921 7.19509C4.0578 7.38907 4.15304 7.56725 4.29289 7.70711C4.43275 7.84696 4.61093 7.9422 4.80491 7.98079C4.99889 8.01937 5.19996 7.99957 5.38268 7.92388C5.56541 7.84819 5.72159 7.72002 5.83147 7.55557C5.94135 7.39112 6 7.19778 6 7C6 6.73478 5.89464 6.48043 5.70711 6.29289C5.51957 6.10536 5.26522 6 5 6ZM19 0H3C2.20435 0 1.44129 0.31607 0.87868 0.87868C0.31607 1.44129 0 2.20435 0 3V11C0 11.7956 0.31607 12.5587 0.87868 13.1213C1.44129 13.6839 2.20435 14 3 14H19C19.7956 14 20.5587 13.6839 21.1213 13.1213C21.6839 12.5587 22 11.7956 22 11V3C22 2.20435 21.6839 1.44129 21.1213 0.87868C20.5587 0.31607 19.7956 0 19 0ZM20 11C20 11.2652 19.8946 11.5196 19.7071 11.7071C19.5196 11.8946 19.2652 12 19 12H3C2.73478 12 2.48043 11.8946 2.29289 11.7071C2.10536 11.5196 2 11.2652 2 11V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V11ZM11 4C10.4067 4 9.82664 4.17595 9.33329 4.50559C8.83994 4.83524 8.45542 5.30377 8.22836 5.85195C8.0013 6.40013 7.94189 7.00333 8.05764 7.58527C8.1734 8.16721 8.45912 8.70176 8.87868 9.12132C9.29824 9.54088 9.83279 9.8266 10.4147 9.94236C10.9967 10.0581 11.5999 9.9987 12.1481 9.77164C12.6962 9.54458 13.1648 9.16006 13.4944 8.66671C13.8241 8.17336 14 7.59334 14 7C14 6.20435 13.6839 5.44129 13.1213 4.87868C12.5587 4.31607 11.7956 4 11 4ZM11 8C10.8022 8 10.6089 7.94135 10.4444 7.83147C10.28 7.72159 10.1518 7.56541 10.0761 7.38268C10.0004 7.19996 9.98063 6.99889 10.0192 6.80491C10.0578 6.61093 10.153 6.43275 10.2929 6.29289C10.4327 6.15304 10.6109 6.0578 10.8049 6.01921C10.9989 5.98063 11.2 6.00043 11.3827 6.07612C11.5654 6.15181 11.7216 6.27998 11.8315 6.44443C11.9414 6.60888 12 6.80222 12 7C12 7.26522 11.8946 7.51957 11.7071 7.70711C11.5196 7.89464 11.2652 8 11 8ZM17 6C16.8022 6 16.6089 6.05865 16.4444 6.16853C16.28 6.27841 16.1518 6.43459 16.0761 6.61732C16.0004 6.80004 15.9806 7.00111 16.0192 7.19509C16.0578 7.38907 16.153 7.56725 16.2929 7.70711C16.4327 7.84696 16.6109 7.9422 16.8049 7.98079C16.9989 8.01937 17.2 7.99957 17.3827 7.92388C17.5654 7.84819 17.7216 7.72002 17.8315 7.55557C17.9414 7.39112 18 7.19778 18 7C18 6.73478 17.8946 6.48043 17.7071 6.29289C17.5196 6.10536 17.2652 6 17 6Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div>
            <h5 class="text-sm leading-5 font-semibold text-gray-100">Process Your Payments</h5>
            <span class="text-xs leading-5 text-gray-300 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span>
          </div>
        </div>
        <span class="text-gray-400 group-hover:text-gray-300">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
          </svg>
        </span>
      </a>
      <a x-show="showContent" class="visibility-item group flex py-3 pl-4 pr-6 items-center justify-between hover:bg-gray-700 rounded-md transition duration-200" href="#">
        <div class="flex max-w-md pr-10">
          <div class="flex-shrink-0 flex w-10 h-10 mr-3 items-center justify-center rounded-md bg-gray-700">
            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 18C10.1978 18 10.3911 17.9414 10.5556 17.8315C10.72 17.7216 10.8482 17.5654 10.9239 17.3827C10.9996 17.2 11.0194 16.9989 10.9808 16.8049C10.9422 16.6109 10.847 16.4327 10.7071 16.2929C10.5673 16.153 10.3891 16.0578 10.1951 16.0192C10.0011 15.9806 9.80004 16.0004 9.61732 16.0761C9.43459 16.1518 9.27841 16.28 9.16853 16.4444C9.05865 16.6089 9 16.8022 9 17C9 17.2652 9.10536 17.5196 9.29289 17.7071C9.48043 17.8946 9.73478 18 10 18ZM15 18C15.1978 18 15.3911 17.9414 15.5556 17.8315C15.72 17.7216 15.8482 17.5654 15.9239 17.3827C15.9996 17.2 16.0194 16.9989 15.9808 16.8049C15.9422 16.6109 15.847 16.4327 15.7071 16.2929C15.5673 16.153 15.3891 16.0578 15.1951 16.0192C15.0011 15.9806 14.8 16.0004 14.6173 16.0761C14.4346 16.1518 14.2784 16.28 14.1685 16.4444C14.0586 16.6089 14 16.8022 14 17C14 17.2652 14.1054 17.5196 14.2929 17.7071C14.4804 17.8946 14.7348 18 15 18ZM15 14C15.1978 14 15.3911 13.9414 15.5556 13.8315C15.72 13.7216 15.8482 13.5654 15.9239 13.3827C15.9996 13.2 16.0194 12.9989 15.9808 12.8049C15.9422 12.6109 15.847 12.4327 15.7071 12.2929C15.5673 12.153 15.3891 12.0578 15.1951 12.0192C15.0011 11.9806 14.8 12.0004 14.6173 12.0761C14.4346 12.1518 14.2784 12.28 14.1685 12.4444C14.0586 12.6089 14 12.8022 14 13C14 13.2652 14.1054 13.5196 14.2929 13.7071C14.4804 13.8946 14.7348 14 15 14ZM10 14C10.1978 14 10.3911 13.9414 10.5556 13.8315C10.72 13.7216 10.8482 13.5654 10.9239 13.3827C10.9996 13.2 11.0194 12.9989 10.9808 12.8049C10.9422 12.6109 10.847 12.4327 10.7071 12.2929C10.5673 12.153 10.3891 12.0578 10.1951 12.0192C10.0011 11.9806 9.80004 12.0004 9.61732 12.0761C9.43459 12.1518 9.27841 12.28 9.16853 12.4444C9.05865 12.6089 9 12.8022 9 13C9 13.2652 9.10536 13.5196 9.29289 13.7071C9.48043 13.8946 9.73478 14 10 14ZM17 2H16V1C16 0.734784 15.8946 0.48043 15.7071 0.292893C15.5196 0.105357 15.2652 0 15 0C14.7348 0 14.4804 0.105357 14.2929 0.292893C14.1054 0.48043 14 0.734784 14 1V2H6V1C6 0.734784 5.89464 0.48043 5.70711 0.292893C5.51957 0.105357 5.26522 0 5 0C4.73478 0 4.48043 0.105357 4.29289 0.292893C4.10536 0.48043 4 0.734784 4 1V2H3C2.20435 2 1.44129 2.31607 0.87868 2.87868C0.316071 3.44129 0 4.20435 0 5V19C0 19.7956 0.316071 20.5587 0.87868 21.1213C1.44129 21.6839 2.20435 22 3 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V5C20 4.20435 19.6839 3.44129 19.1213 2.87868C18.5587 2.31607 17.7956 2 17 2ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H3C2.73478 20 2.48043 19.8946 2.29289 19.7071C2.10536 19.5196 2 19.2652 2 19V10H18V19ZM18 8H2V5C2 4.73478 2.10536 4.48043 2.29289 4.29289C2.48043 4.10536 2.73478 4 3 4H4V5C4 5.26522 4.10536 5.51957 4.29289 5.70711C4.48043 5.89464 4.73478 6 5 6C5.26522 6 5.51957 5.89464 5.70711 5.70711C5.89464 5.51957 6 5.26522 6 5V4H14V5C14 5.26522 14.1054 5.51957 14.2929 5.70711C14.4804 5.89464 14.7348 6 15 6C15.2652 6 15.5196 5.89464 15.7071 5.70711C15.8946 5.51957 16 5.26522 16 5V4H17C17.2652 4 17.5196 4.10536 17.7071 4.29289C17.8946 4.48043 18 4.73478 18 5V8ZM5 14C5.19778 14 5.39112 13.9414 5.55557 13.8315C5.72002 13.7216 5.84819 13.5654 5.92388 13.3827C5.99957 13.2 6.01937 12.9989 5.98079 12.8049C5.9422 12.6109 5.84696 12.4327 5.70711 12.2929C5.56725 12.153 5.38907 12.0578 5.19509 12.0192C5.00111 11.9806 4.80004 12.0004 4.61732 12.0761C4.43459 12.1518 4.27841 12.28 4.16853 12.4444C4.05865 12.6089 4 12.8022 4 13C4 13.2652 4.10536 13.5196 4.29289 13.7071C4.48043 13.8946 4.73478 14 5 14ZM5 18C5.19778 18 5.39112 17.9414 5.55557 17.8315C5.72002 17.7216 5.84819 17.5654 5.92388 17.3827C5.99957 17.2 6.01937 16.9989 5.98079 16.8049C5.9422 16.6109 5.84696 16.4327 5.70711 16.2929C5.56725 16.153 5.38907 16.0578 5.19509 16.0192C5.00111 15.9806 4.80004 16.0004 4.61732 16.0761C4.43459 16.1518 4.27841 16.28 4.16853 16.4444C4.05865 16.6089 4 16.8022 4 17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18Z" fill="#194BFB"></path>
            </svg>
          </div>
          <div>
            <h5 class="text-sm leading-5 font-semibold text-gray-100">Get Instant Sales Assistance</h5>
            <span class="text-xs leading-5 text-gray-300 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec quam et nibh sodales molestie.</span>
          </div>
        </div>
        <span class="text-gray-400 group-hover:text-gray-300">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.83 5.28995L2.59 1.04995C2.49704 0.95622 2.38644 0.881826 2.26458 0.831057C2.14272 0.780288 2.01202 0.75415 1.88 0.75415C1.74799 0.75415 1.61729 0.780288 1.49543 0.831057C1.37357 0.881826 1.26297 0.95622 1.17 1.04995C0.983753 1.23731 0.879211 1.49076 0.879211 1.75495C0.879211 2.01913 0.983753 2.27259 1.17 2.45995L4.71 5.99995L1.17 9.53995C0.983753 9.72731 0.879211 9.98076 0.879211 10.2449C0.879211 10.5091 0.983753 10.7626 1.17 10.9499C1.26344 11.0426 1.37426 11.116 1.4961 11.1657C1.61794 11.2155 1.7484 11.2407 1.88 11.2399C2.01161 11.2407 2.14207 11.2155 2.26391 11.1657C2.38575 11.116 2.49656 11.0426 2.59 10.9499L6.83 6.70995C6.92373 6.61699 6.99813 6.50638 7.04889 6.38453C7.09966 6.26267 7.1258 6.13196 7.1258 5.99995C7.1258 5.86794 7.09966 5.73723 7.04889 5.61537C6.99813 5.49351 6.92373 5.38291 6.83 5.28995Z" fill="currentColor"></path>
          </svg>
        </span>
      </a>
    </div>
  </div>
</section>

Tailwind Component #85

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="h-full max-w-sm mx-auto p-6 bg-gray-500 rounded-xl">
          <div class="flex flex-shrink-0 w-12 h-12 mb-4 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 3.50002H10.72L10.4 2.50002C10.1926 1.91325 9.80775 1.40553 9.2989 1.04718C8.79005 0.688841 8.18236 0.497623 7.56 0.500022H3C2.20435 0.500022 1.44129 0.816093 0.87868 1.3787C0.316071 1.94131 0 2.70437 0 3.50002V16.5C0 17.2957 0.316071 18.0587 0.87868 18.6213C1.44129 19.184 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.184 19.1213 18.6213C19.6839 18.0587 20 17.2957 20 16.5V6.50002C20 5.70437 19.6839 4.94131 19.1213 4.3787C18.5587 3.81609 17.7956 3.50002 17 3.50002ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3947 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3947 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V3.50002C2 3.23481 2.10536 2.98045 2.29289 2.79292C2.48043 2.60538 2.73478 2.50002 3 2.50002H7.56C7.76964 2.49948 7.97416 2.56484 8.14463 2.68686C8.3151 2.80889 8.44291 2.9814 8.51 3.18002L9.05 4.82002C9.11709 5.01864 9.2449 5.19116 9.41537 5.31318C9.58584 5.4352 9.79036 5.50056 10 5.50002H17C17.2652 5.50002 17.5196 5.60538 17.7071 5.79292C17.8946 5.98045 18 6.23481 18 6.50002V16.5Z" fill="#194BFB"></path>
            </svg>
          </div>
          <h5 class="text-lg text-gray-100 font-semibold mb-8">Drive Storage</h5>
          <div class="flex mb-2 items-center justify-between">
            <span class="text-xs text-blue-500 font-semibold">45 GB</span>
            <span class="text-xs text-gray-300 font-semibold">100 GB</span>
          </div>
          <div class="relative py-1 bg-gray-700 rounded-full">
            <div class="absolute top-0 left-0 h-full w-2/3 bg-blue-500 rounded-full"></div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="relative h-full max-w-sm mx-auto p-6 bg-gray-500 rounded-xl">
          <div class="flex flex-wrap items-center justify-between mb-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-shrink-0 w-12 h-12 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
                <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H8V5C8 5.79565 8.31607 6.55871 8.87868 7.12132C9.44129 7.68393 10.2044 8 11 8H14V9C14 9.26522 14.1054 9.51957 14.2929 9.70711C14.4804 9.89464 14.7348 10 15 10C15.2652 10 15.5196 9.89464 15.7071 9.70711C15.8946 9.51957 16 9.26522 16 9V7C16 7 16 7 16 6.94C15.9896 6.84813 15.9695 6.75763 15.94 6.67V6.58C15.8919 6.47718 15.8278 6.38267 15.75 6.3L9.75 0.3C9.66734 0.222216 9.57282 0.158081 9.47 0.11C9.44015 0.10576 9.40985 0.10576 9.38 0.11C9.27841 0.0517412 9.16622 0.0143442 9.05 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H10C10.2652 20 10.5196 19.8946 10.7071 19.7071C10.8946 19.5196 11 19.2652 11 19C11 18.7348 10.8946 18.4804 10.7071 18.2929C10.5196 18.1054 10.2652 18 10 18ZM10 3.41L12.59 6H11C10.7348 6 10.4804 5.89464 10.2929 5.70711C10.1054 5.51957 10 5.26522 10 5V3.41ZM5 6C4.73478 6 4.48043 6.10536 4.29289 6.29289C4.10536 6.48043 4 6.73478 4 7C4 7.26522 4.10536 7.51957 4.29289 7.70711C4.48043 7.89464 4.73478 8 5 8H6C6.26522 8 6.51957 7.89464 6.70711 7.70711C6.89464 7.51957 7 7.26522 7 7C7 6.73478 6.89464 6.48043 6.70711 6.29289C6.51957 6.10536 6.26522 6 6 6H5ZM19.71 18.29L18.54 17.13C18.914 16.4773 19.0636 15.7199 18.9661 14.974C18.8686 14.2281 18.5292 13.5347 18 13C17.513 12.4957 16.8854 12.1497 16.199 12.0071C15.5126 11.8646 14.7992 11.9321 14.1517 12.2008C13.5041 12.4695 12.9526 12.927 12.5688 13.5137C12.185 14.1004 11.9868 14.7891 12 15.49C11.9966 16.0932 12.1509 16.6868 12.4476 17.2119C12.7444 17.7371 13.1733 18.1755 13.6917 18.4838C14.2102 18.7921 14.8003 18.9594 15.4034 18.9693C16.0065 18.9791 16.6017 18.8311 17.13 18.54L18.29 19.71C18.383 19.8037 18.4936 19.8781 18.6154 19.9289C18.7373 19.9797 18.868 20.0058 19 20.0058C19.132 20.0058 19.2627 19.9797 19.3846 19.9289C19.5064 19.8781 19.617 19.8037 19.71 19.71C19.8037 19.617 19.8781 19.5064 19.9289 19.3846C19.9797 19.2627 20.0058 19.132 20.0058 19C20.0058 18.868 19.9797 18.7373 19.9289 18.6154C19.8781 18.4936 19.8037 18.383 19.71 18.29ZM16.54 16.54C16.2544 16.8086 15.8771 16.9581 15.485 16.9581C15.0929 16.9581 14.7156 16.8086 14.43 16.54C14.1547 16.2598 14.0003 15.8828 14 15.49C13.9979 15.2928 14.0359 15.0971 14.1115 14.915C14.1871 14.7328 14.2989 14.5678 14.44 14.43C14.7066 14.1648 15.0641 14.0111 15.44 14C15.6422 13.9876 15.8447 14.0171 16.035 14.0866C16.2252 14.1562 16.399 14.2643 16.5455 14.4042C16.692 14.5441 16.808 14.7128 16.8862 14.8996C16.9644 15.0865 17.0031 15.2875 17 15.49C16.9917 15.8871 16.8263 16.2647 16.54 16.54ZM11 10H5C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11C4 11.2652 4.10536 11.5196 4.29289 11.7071C4.48043 11.8946 4.73478 12 5 12H11C11.2652 12 11.5196 11.8946 11.7071 11.7071C11.8946 11.5196 12 11.2652 12 11C12 10.7348 11.8946 10.4804 11.7071 10.2929C11.5196 10.1054 11.2652 10 11 10ZM9 16C9.26522 16 9.51957 15.8946 9.70711 15.7071C9.89464 15.5196 10 15.2652 10 15C10 14.7348 9.89464 14.4804 9.70711 14.2929C9.51957 14.1054 9.26522 14 9 14H5C4.73478 14 4.48043 14.1054 4.29289 14.2929C4.10536 14.4804 4 14.7348 4 15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16H9Z" fill="#194BFB"></path>
                </svg>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex">
                <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
                <img class="w-7 h-7 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              </div>
            </div>
          </div>
          <h5 class="text-lg text-gray-100 font-semibold mb-12">Research</h5>
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-300 font-semibold">10 Files</span>
            <span class="text-sm text-gray-300 font-semibold">5 GB</span>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-2/4 px-3 mb-6">
        <div class="relative h-full max-w-sm md:max-w-none mx-auto p-6 bg-gray-500 rounded-xl">
          <div class="flex flex-wrap items-center justify-between -mx-2">
            <div class="w-full md:w-1/2 px-2 mb-12 md:mb-0">
              <div class="max-w-xxs pr-12">
                <div class="flex flex-shrink-0 w-12 h-12 mb-9 items-center justify-center bg-blue-500 bg-opacity-20 text-blue-500 rounded-xl">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 12.86V12.81C19.9879 12.6169 19.9544 12.4257 19.9 12.24L18.26 2.51003C18.1428 1.80198 17.7757 1.15939 17.2253 0.698869C16.6749 0.238344 15.9776 -0.00960096 15.26 2.60161e-05H4.69C3.98097 0.00232221 3.29566 0.255676 2.75565 0.715148C2.21563 1.17462 1.85581 1.81051 1.74 2.51003L0.12 12.22C0.0656405 12.4057 0.0321011 12.5969 0.02 12.79V12.84C-1.86265e-08 12.91 0 13 0 13V17C0 17.7957 0.316071 18.5587 0.87868 19.1213C1.44129 19.684 2.20435 20 3 20H17C17.7956 20 18.5587 19.684 19.1213 19.1213C19.6839 18.5587 20 17.7957 20 17V13C20 13 20 12.91 20 12.86ZM3.71 2.83003C3.75048 2.59523 3.87346 2.38261 4.05679 2.23044C4.24013 2.07827 4.47177 1.99656 4.71 2.00003H15.31C15.5482 1.99656 15.7799 2.07827 15.9632 2.23044C16.1465 2.38261 16.2695 2.59523 16.31 2.83003L17.51 10.05C17.342 10.0168 17.1712 10.0001 17 10H3C2.83546 10.0013 2.67141 10.0181 2.51 10.05L3.71 2.83003ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8947 17.2652 18 17 18H3C2.73478 18 2.48043 17.8947 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V13.08L2.08 12.62C2.15502 12.4374 2.28242 12.2811 2.44614 12.1707C2.60986 12.0604 2.80257 12.001 3 12H17C17.1974 12.001 17.3901 12.0604 17.5539 12.1707C17.7176 12.2811 17.845 12.4374 17.92 12.62L18 13.08V17ZM15 14C14.8022 14 14.6089 14.0587 14.4444 14.1686C14.28 14.2784 14.1518 14.4346 14.0761 14.6173C14.0004 14.8001 13.9806 15.0011 14.0192 15.1951C14.0578 15.3891 14.153 15.5673 14.2929 15.7071C14.4327 15.847 14.6109 15.9422 14.8049 15.9808C14.9989 16.0194 15.2 15.9996 15.3827 15.9239C15.5654 15.8482 15.7216 15.72 15.8315 15.5556C15.9414 15.3911 16 15.1978 16 15C16 14.7348 15.8946 14.4805 15.7071 14.2929C15.5196 14.1054 15.2652 14 15 14Z" fill="#194BFB"></path>
                  </svg>
                </div>
                <h5 class="text-lg text-gray-100 font-semibold mb-1">Used percentage</h5>
                <p class="text-sm text-gray-300 font-semibold">Check your storage on your dashboard</p>
              </div>
            </div>
            <div class="w-full md:w-1/2 px-2">
              <div class="chart px-2" data-type="radial-bar-part" style="min-height: 120px;"></div>
              <div class="flex items-end justify-center -mt-12">
                <span class="text-3xl leading-none text-gray-200 font-semibold">64</span>
                <span class="text-2xl leading-none text-gray-400 font-semibold">%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #86

Tailwind CSS

Trizzle

<div x-data="{ mobileNavOpen: false }">
  <nav class="lg:hidden flex items-center justify-between p-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2 xl:mr-12">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden relative z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 opacity-50" :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}"></div>
    <nav class="fixed top-0 left-0 bottom-0 w-full max-w-xxs flex flex-col h-full py-8 px-4 bg-gray-700 overflow-auto">
      <div class="mb-6">
        <a class="inline-block mb-12" href="#">
          <img class="h-7" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <ul>
          <li class="mb-4">
            <a class="flex items-center p-4 text-white bg-blue-500 rounded-xl" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 11H1C0.734784 11 0.48043 11.1054 0.292893 11.2929C0.105357 11.4804 0 11.7348 0 12V19C0 19.2652 0.105357 19.5196 0.292893 19.7071C0.48043 19.8946 0.734784 20 1 20H8C8.26522 20 8.51957 19.8946 8.70711 19.7071C8.89464 19.5196 9 19.2652 9 19V12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11ZM7 18H2V13H7V18ZM19 0H12C11.7348 0 11.4804 0.105357 11.2929 0.292893C11.1054 0.48043 11 0.734784 11 1V8C11 8.26522 11.1054 8.51957 11.2929 8.70711C11.4804 8.89464 11.7348 9 12 9H19C19.2652 9 19.5196 8.89464 19.7071 8.70711C19.8946 8.51957 20 8.26522 20 8V1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0ZM18 7H13V2H18V7ZM19 11H12C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V12C20 11.7348 19.8946 11.4804 19.7071 11.2929C19.5196 11.1054 19.2652 11 19 11ZM18 18H13V13H18V18ZM8 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H8C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0ZM7 7H2V2H7V7Z" fill="currentColor"></path>
              </svg>
              <span class="ml-4 text-sm font-semibold">Overview</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Analytics</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Products</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 17C12.2653 17 12.5196 16.8947 12.7071 16.7071C12.8947 16.5196 13 16.2652 13 16V14C13 13.7348 12.8947 13.4805 12.7071 13.2929C12.5196 13.1054 12.2653 13 12 13C11.7348 13 11.4805 13.1054 11.2929 13.2929C11.1054 13.4805 11 13.7348 11 14V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4805 16.8947 11.7348 17 12 17ZM8.00004 17C8.26525 17 8.51961 16.8947 8.70714 16.7071C8.89468 16.5196 9.00004 16.2652 9.00004 16V14C9.00004 13.7348 8.89468 13.4805 8.70714 13.2929C8.51961 13.1054 8.26525 13 8.00004 13C7.73482 13 7.48047 13.1054 7.29293 13.2929C7.10539 13.4805 7.00004 13.7348 7.00004 14V16C7.00004 16.2652 7.10539 16.5196 7.29293 16.7071C7.48047 16.8947 7.73482 17 8.00004 17ZM17 5.00003H15.62L13.89 1.55003C13.8372 1.42308 13.7587 1.3084 13.6595 1.21316C13.5603 1.11791 13.4426 1.04414 13.3136 0.996469C13.1846 0.948794 13.0472 0.928235 12.9099 0.936075C12.7726 0.943915 12.6384 0.979987 12.5157 1.04204C12.3929 1.10408 12.2843 1.19078 12.1966 1.2967C12.1089 1.40261 12.044 1.52548 12.006 1.65762C11.9679 1.78976 11.9575 1.92833 11.9754 2.06467C11.9933 2.20102 12.0391 2.3322 12.11 2.45003L13.38 5.00003H6.62004L7.89004 2.45003C7.9871 2.21693 7.9924 1.95575 7.90486 1.71891C7.81732 1.48208 7.64343 1.28712 7.4181 1.17319C7.19277 1.05926 6.93268 1.03479 6.69005 1.10469C6.44742 1.17458 6.24022 1.33368 6.11004 1.55003L4.38004 5.00003H3.00004C2.29323 5.01078 1.61291 5.27077 1.07909 5.73416C0.545259 6.19755 0.192211 6.83455 0.0822073 7.53283C-0.0277959 8.23112 0.112313 8.94581 0.477823 9.55088C0.843332 10.1559 1.41076 10.6125 2.08004 10.84L2.82004 18.3C2.89466 19.0426 3.24338 19.7307 3.79811 20.2299C4.35284 20.7292 5.07374 21.0038 5.82004 21H14.2C14.9463 21.0038 15.6672 20.7292 16.222 20.2299C16.7767 19.7307 17.1254 19.0426 17.2 18.3L17.94 10.84C18.6108 10.6118 19.1791 10.1536 19.5443 9.54651C19.9096 8.93942 20.0482 8.22266 19.9356 7.52317C19.823 6.82368 19.4665 6.18661 18.9292 5.7248C18.3919 5.26299 17.7085 5.00624 17 5.00003ZM15.19 18.1C15.1652 18.3475 15.0489 18.5769 14.864 18.7433C14.6791 18.9098 14.4388 19.0013 14.19 19H5.81004C5.56127 19.0013 5.32097 18.9098 5.13606 18.7433C4.95115 18.5769 4.83491 18.3475 4.81004 18.1L4.10004 11H15.9L15.19 18.1ZM17 9.00003H3.00004C2.73482 9.00003 2.48047 8.89467 2.29293 8.70713C2.10539 8.5196 2.00004 8.26524 2.00004 8.00003C2.00004 7.73481 2.10539 7.48046 2.29293 7.29292C2.48047 7.10538 2.73482 7.00003 3.00004 7.00003H17C17.2653 7.00003 17.5196 7.10538 17.7071 7.29292C17.8947 7.48046 18 7.73481 18 8.00003C18 8.26524 17.8947 8.5196 17.7071 8.70713C17.5196 8.89467 17.2653 9.00003 17 9.00003Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 mr-auto text-sm font-semibold">Orders</span>
              <span class="flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-xs font-semibold rounded-full">4</span>
            </a>
          </li>
          <li>
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Customers</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <a class="group block py-6 pl-6 pr-8 mb-4 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">
          <div class="flex w-12 h-12 mb-4 items-center justify-center bg-blue-600 group-hover:bg-blue-500 rounded-xl">
            <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.70978 6.53994C5.61681 6.44621 5.50621 6.37182 5.38435 6.32105C5.2625 6.27028 5.13179 6.24414 4.99978 6.24414C4.86777 6.24414 4.73706 6.27028 4.6152 6.32105C4.49334 6.37182 4.38274 6.44621 4.28978 6.53994L1.28978 9.53994C1.09617 9.72824 0.985294 9.98574 0.981544 10.2558C0.977793 10.5258 1.08147 10.7863 1.26978 10.9799C1.45808 11.1735 1.71558 11.2844 1.98564 11.2882C2.25569 11.2919 2.51617 11.1882 2.70978 10.9999L4.99978 8.65994L7.28978 10.9999C7.38274 11.0937 7.49334 11.1681 7.6152 11.2188C7.73706 11.2696 7.86777 11.2957 7.99978 11.2957C8.13179 11.2957 8.2625 11.2696 8.38435 11.2188C8.50621 11.1681 8.61681 11.0937 8.70978 10.9999C8.80351 10.907 8.8779 10.7964 8.92867 10.6745C8.97944 10.5527 9.00558 10.422 9.00558 10.2899C9.00558 10.1579 8.97944 10.0272 8.92867 9.90536C8.8779 9.7835 8.80351 9.6729 8.70978 9.57994L5.70978 6.53994ZM2.70978 5.45994L4.99978 3.15994L7.28978 5.45994C7.38274 5.55367 7.49334 5.62806 7.6152 5.67883C7.73706 5.7296 7.86777 5.75574 7.99978 5.75574C8.13179 5.75574 8.2625 5.7296 8.38435 5.67883C8.50621 5.62806 8.61681 5.55367 8.70978 5.45994C8.80351 5.36698 8.8779 5.25637 8.92867 5.13452C8.97944 5.01266 9.00558 4.88195 9.00558 4.74994C9.00558 4.61793 8.97944 4.48722 8.92867 4.36536C8.8779 4.2435 8.80351 4.1329 8.70978 4.03994L5.70978 1.03994C5.61681 0.946211 5.50621 0.871816 5.38435 0.821048C5.2625 0.770279 5.13179 0.744141 4.99978 0.744141C4.86777 0.744141 4.73706 0.770279 4.6152 0.821048C4.49334 0.871816 4.38274 0.946211 4.28978 1.03994L1.28978 4.03994C1.10147 4.22824 0.995686 4.48364 0.995686 4.74994C0.995686 5.01624 1.10147 5.27164 1.28978 5.45994C1.47808 5.64824 1.73348 5.75403 1.99978 5.75403C2.26608 5.75403 2.52147 5.64824 2.70978 5.45994Z" fill="white"></path>
            </svg>
          </div>
          <h5 class="text-sm font-medium text-blue-50 mb-2">Upgrade to PRO</h5>
          <p class="text-xs leading-normal font-semibold text-blue-200">One year support, monthly updates for up to 5 team members.</p>
        </a>
        <a class="group flex py-5 px-6 items-center bg-gray-600 hover:bg-gray-500 rounded-xl transition duration-200" href="#">
          <div class="flex w-8 h-8 mr-2 items-center justify-center bg-gray-500 group-hover:bg-gray-600 rounded-lg">
            <img src="trizzle-assets/logos/logo-shuffle-blue.svg" alt="">
          </div>
          <span class="text-sm text-gray-100 font-medium">Shuffle</span>
          <div class="ml-auto text-gray-400 group-hover:text-gray-300">
            <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.00016 3.83333C2.3298 3.83333 2.65203 3.73559 2.92611 3.55245C3.2002 3.36931 3.41382 3.10902 3.53996 2.80447C3.66611 2.49993 3.69911 2.16482 3.63481 1.84152C3.5705 1.51822 3.41176 1.22124 3.17867 0.988156C2.94559 0.755068 2.64862 0.596334 2.32531 0.532025C2.00201 0.467717 1.6669 0.500722 1.36236 0.626868C1.05781 0.753014 0.797517 0.966635 0.614381 1.24072C0.431245 1.5148 0.333497 1.83703 0.333497 2.16667C0.333497 2.6087 0.509092 3.03262 0.821653 3.34518C1.13421 3.65774 1.55814 3.83333 2.00016 3.83333ZM2.00016 12.1667C1.67053 12.1667 1.3483 12.2644 1.07421 12.4476C0.800132 12.6307 0.58651 12.891 0.460364 13.1955C0.334218 13.5001 0.301213 13.8352 0.365521 14.1585C0.42983 14.4818 0.588565 14.7788 0.821653 15.0118C1.05474 15.2449 1.35171 15.4037 1.67501 15.468C1.99831 15.5323 2.33343 15.4993 2.63797 15.3731C2.94251 15.247 3.20281 15.0334 3.38595 14.7593C3.56908 14.4852 3.66683 14.163 3.66683 13.8333C3.66683 13.3913 3.49124 12.9674 3.17867 12.6548C2.86611 12.3423 2.44219 12.1667 2.00016 12.1667ZM2.00016 6.33333C1.67053 6.33333 1.3483 6.43108 1.07421 6.61422C0.800132 6.79735 0.58651 7.05765 0.460364 7.3622C0.334218 7.66674 0.301213 8.00185 0.365521 8.32515C0.42983 8.64845 0.588565 8.94543 0.821653 9.17851C1.05474 9.4116 1.35171 9.57033 1.67501 9.63464C1.99831 9.69895 2.33343 9.66595 2.63797 9.5398C2.94251 9.41365 3.20281 9.20003 3.38595 8.92595C3.56908 8.65187 3.66683 8.32964 3.66683 8C3.66683 7.55797 3.49124 7.13405 3.17867 6.82149C2.86611 6.50893 2.44219 6.33333 2.00016 6.33333Z" fill="currentColor"></path>
            </svg>
          </div>
        </a>
      </div>
    </nav>
  </div>
  <div class="hidden lg:block relative z-50">
    <nav class="fixed top-0 left-0 bottom-0 w-full max-w-xxs flex flex-col h-full py-8 px-4 bg-gray-700 overflow-auto">
      <div class="mb-6">
        <a class="inline-block mb-12" href="#">
          <img class="h-7" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <ul>
          <li class="mb-4">
            <a class="flex items-center p-4 text-white bg-blue-500 rounded-xl" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 11H1C0.734784 11 0.48043 11.1054 0.292893 11.2929C0.105357 11.4804 0 11.7348 0 12V19C0 19.2652 0.105357 19.5196 0.292893 19.7071C0.48043 19.8946 0.734784 20 1 20H8C8.26522 20 8.51957 19.8946 8.70711 19.7071C8.89464 19.5196 9 19.2652 9 19V12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11ZM7 18H2V13H7V18ZM19 0H12C11.7348 0 11.4804 0.105357 11.2929 0.292893C11.1054 0.48043 11 0.734784 11 1V8C11 8.26522 11.1054 8.51957 11.2929 8.70711C11.4804 8.89464 11.7348 9 12 9H19C19.2652 9 19.5196 8.89464 19.7071 8.70711C19.8946 8.51957 20 8.26522 20 8V1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0ZM18 7H13V2H18V7ZM19 11H12C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20H19C19.2652 20 19.5196 19.8946 19.7071 19.7071C19.8946 19.5196 20 19.2652 20 19V12C20 11.7348 19.8946 11.4804 19.7071 11.2929C19.5196 11.1054 19.2652 11 19 11ZM18 18H13V13H18V18ZM8 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V8C0 8.26522 0.105357 8.51957 0.292893 8.70711C0.48043 8.89464 0.734784 9 1 9H8C8.26522 9 8.51957 8.89464 8.70711 8.70711C8.89464 8.51957 9 8.26522 9 8V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0ZM7 7H2V2H7V7Z" fill="currentColor"></path>
              </svg>
              <span class="ml-4 text-sm font-semibold">Overview</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 4C9.73478 4 9.48043 4.10536 9.29289 4.29289C9.10536 4.48043 9 4.73478 9 5V15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4ZM5 10C4.73478 10 4.48043 10.1054 4.29289 10.2929C4.10536 10.4804 4 10.7348 4 11V15C4 15.2652 4.10536 15.5196 4.29289 15.7071C4.48043 15.8946 4.73478 16 5 16C5.26522 16 5.51957 15.8946 5.70711 15.7071C5.89464 15.5196 6 15.2652 6 15V11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10ZM15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9V15C14 15.2652 14.1054 15.5196 14.2929 15.7071C14.4804 15.8946 14.7348 16 15 16C15.2652 16 15.5196 15.8946 15.7071 15.7071C15.8946 15.5196 16 15.2652 16 15V9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Analytics</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 4.5H14V3.5C14 2.70435 13.6839 1.94129 13.1213 1.37868C12.5587 0.816071 11.7956 0.5 11 0.5H9C8.20435 0.5 7.44129 0.816071 6.87868 1.37868C6.31607 1.94129 6 2.70435 6 3.5V4.5H3C2.20435 4.5 1.44129 4.81607 0.87868 5.37868C0.316071 5.94129 0 6.70435 0 7.5V16.5C0 17.2956 0.316071 18.0587 0.87868 18.6213C1.44129 19.1839 2.20435 19.5 3 19.5H17C17.7956 19.5 18.5587 19.1839 19.1213 18.6213C19.6839 18.0587 20 17.2956 20 16.5V7.5C20 6.70435 19.6839 5.94129 19.1213 5.37868C18.5587 4.81607 17.7956 4.5 17 4.5ZM8 3.5C8 3.23478 8.10536 2.98043 8.29289 2.79289C8.48043 2.60536 8.73478 2.5 9 2.5H11C11.2652 2.5 11.5196 2.60536 11.7071 2.79289C11.8946 2.98043 12 3.23478 12 3.5V4.5H8V3.5ZM18 16.5C18 16.7652 17.8946 17.0196 17.7071 17.2071C17.5196 17.3946 17.2652 17.5 17 17.5H3C2.73478 17.5 2.48043 17.3946 2.29289 17.2071C2.10536 17.0196 2 16.7652 2 16.5V11C2.97544 11.3869 3.97818 11.7011 5 11.94V12.53C5 12.7952 5.10536 13.0496 5.29289 13.2371C5.48043 13.4246 5.73478 13.53 6 13.53C6.26522 13.53 6.51957 13.4246 6.70711 13.2371C6.89464 13.0496 7 12.7952 7 12.53V12.32C7.99435 12.4554 8.99649 12.5255 10 12.53C11.0035 12.5255 12.0057 12.4554 13 12.32V12.53C13 12.7952 13.1054 13.0496 13.2929 13.2371C13.4804 13.4246 13.7348 13.53 14 13.53C14.2652 13.53 14.5196 13.4246 14.7071 13.2371C14.8946 13.0496 15 12.7952 15 12.53V11.94C16.0218 11.7011 17.0246 11.3869 18 11V16.5ZM18 8.81C17.0274 9.22049 16.0244 9.55483 15 9.81V9.5C15 9.23478 14.8946 8.98043 14.7071 8.79289C14.5196 8.60536 14.2652 8.5 14 8.5C13.7348 8.5 13.4804 8.60536 13.2929 8.79289C13.1054 8.98043 13 9.23478 13 9.5V10.24C11.0113 10.54 8.98875 10.54 7 10.24V9.5C7 9.23478 6.89464 8.98043 6.70711 8.79289C6.51957 8.60536 6.26522 8.5 6 8.5C5.73478 8.5 5.48043 8.60536 5.29289 8.79289C5.10536 8.98043 5 9.23478 5 9.5V9.83C3.97562 9.57483 2.9726 9.24049 2 8.83V7.5C2 7.23478 2.10536 6.98043 2.29289 6.79289C2.48043 6.60536 2.73478 6.5 3 6.5H17C17.2652 6.5 17.5196 6.60536 17.7071 6.79289C17.8946 6.98043 18 7.23478 18 7.5V8.81Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Products</span>
            </a>
          </li>
          <li class="mb-4">
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 17C12.2653 17 12.5196 16.8947 12.7071 16.7071C12.8947 16.5196 13 16.2652 13 16V14C13 13.7348 12.8947 13.4805 12.7071 13.2929C12.5196 13.1054 12.2653 13 12 13C11.7348 13 11.4805 13.1054 11.2929 13.2929C11.1054 13.4805 11 13.7348 11 14V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4805 16.8947 11.7348 17 12 17ZM8.00004 17C8.26525 17 8.51961 16.8947 8.70714 16.7071C8.89468 16.5196 9.00004 16.2652 9.00004 16V14C9.00004 13.7348 8.89468 13.4805 8.70714 13.2929C8.51961 13.1054 8.26525 13 8.00004 13C7.73482 13 7.48047 13.1054 7.29293 13.2929C7.10539 13.4805 7.00004 13.7348 7.00004 14V16C7.00004 16.2652 7.10539 16.5196 7.29293 16.7071C7.48047 16.8947 7.73482 17 8.00004 17ZM17 5.00003H15.62L13.89 1.55003C13.8372 1.42308 13.7587 1.3084 13.6595 1.21316C13.5603 1.11791 13.4426 1.04414 13.3136 0.996469C13.1846 0.948794 13.0472 0.928235 12.9099 0.936075C12.7726 0.943915 12.6384 0.979987 12.5157 1.04204C12.3929 1.10408 12.2843 1.19078 12.1966 1.2967C12.1089 1.40261 12.044 1.52548 12.006 1.65762C11.9679 1.78976 11.9575 1.92833 11.9754 2.06467C11.9933 2.20102 12.0391 2.3322 12.11 2.45003L13.38 5.00003H6.62004L7.89004 2.45003C7.9871 2.21693 7.9924 1.95575 7.90486 1.71891C7.81732 1.48208 7.64343 1.28712 7.4181 1.17319C7.19277 1.05926 6.93268 1.03479 6.69005 1.10469C6.44742 1.17458 6.24022 1.33368 6.11004 1.55003L4.38004 5.00003H3.00004C2.29323 5.01078 1.61291 5.27077 1.07909 5.73416C0.545259 6.19755 0.192211 6.83455 0.0822073 7.53283C-0.0277959 8.23112 0.112313 8.94581 0.477823 9.55088C0.843332 10.1559 1.41076 10.6125 2.08004 10.84L2.82004 18.3C2.89466 19.0426 3.24338 19.7307 3.79811 20.2299C4.35284 20.7292 5.07374 21.0038 5.82004 21H14.2C14.9463 21.0038 15.6672 20.7292 16.222 20.2299C16.7767 19.7307 17.1254 19.0426 17.2 18.3L17.94 10.84C18.6108 10.6118 19.1791 10.1536 19.5443 9.54651C19.9096 8.93942 20.0482 8.22266 19.9356 7.52317C19.823 6.82368 19.4665 6.18661 18.9292 5.7248C18.3919 5.26299 17.7085 5.00624 17 5.00003ZM15.19 18.1C15.1652 18.3475 15.0489 18.5769 14.864 18.7433C14.6791 18.9098 14.4388 19.0013 14.19 19H5.81004C5.56127 19.0013 5.32097 18.9098 5.13606 18.7433C4.95115 18.5769 4.83491 18.3475 4.81004 18.1L4.10004 11H15.9L15.19 18.1ZM17 9.00003H3.00004C2.73482 9.00003 2.48047 8.89467 2.29293 8.70713C2.10539 8.5196 2.00004 8.26524 2.00004 8.00003C2.00004 7.73481 2.10539 7.48046 2.29293 7.29292C2.48047 7.10538 2.73482 7.00003 3.00004 7.00003H17C17.2653 7.00003 17.5196 7.10538 17.7071 7.29292C17.8947 7.48046 18 7.73481 18 8.00003C18 8.26524 17.8947 8.5196 17.7071 8.70713C17.5196 8.89467 17.2653 9.00003 17 9.00003Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 mr-auto text-sm font-semibold">Orders</span>
              <span class="flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-xs font-semibold rounded-full">4</span>
            </a>
          </li>
          <li>
            <a class="flex items-center p-4 text-gray-300 hover:bg-gray-800 rounded-xl" href="#">
              <span class="text-gray-400">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.81 10.28C13.443 9.60024 13.7996 8.70877 13.81 7.78C13.81 6.77748 13.4118 5.81602 12.7029 5.10714C11.994 4.39825 11.0325 4 10.03 4C9.02748 4 8.06602 4.39825 7.35714 5.10714C6.64825 5.81602 6.25 6.77748 6.25 7.78C6.26044 8.70877 6.61702 9.60024 7.25 10.28C6.36865 10.7189 5.61022 11.3699 5.04292 12.1746C4.47561 12.9793 4.11723 13.9124 4 14.89C3.97083 15.1552 4.0482 15.4212 4.21511 15.6293C4.38202 15.8375 4.62478 15.9708 4.89 16C5.15522 16.0292 5.42116 15.9518 5.62932 15.7849C5.83749 15.618 5.97083 15.3752 6 15.11C6.11933 14.1411 6.58885 13.2494 7.32009 12.6027C8.05133 11.956 8.99382 11.599 9.97 11.599C10.9462 11.599 11.8887 11.956 12.6199 12.6027C13.3512 13.2494 13.8207 14.1411 13.94 15.11C13.9678 15.3664 14.0936 15.6022 14.2911 15.768C14.4887 15.9339 14.7426 16.017 15 16H15.11C15.3721 15.9698 15.6117 15.8373 15.7766 15.6313C15.9414 15.4252 16.0181 15.1624 15.99 14.9C15.8815 13.9276 15.5344 12.997 14.9796 12.191C14.4248 11.3851 13.6796 10.7286 12.81 10.28ZM10 9.56C9.64795 9.56 9.3038 9.4556 9.01108 9.26002C8.71836 9.06443 8.49022 8.78643 8.35549 8.46118C8.22077 8.13592 8.18552 7.77803 8.2542 7.43274C8.32288 7.08745 8.49241 6.77029 8.74135 6.52135C8.99029 6.27241 9.30745 6.10288 9.65274 6.0342C9.99803 5.96552 10.3559 6.00077 10.6812 6.13549C11.0064 6.27022 11.2844 6.49837 11.48 6.79109C11.6756 7.0838 11.78 7.42795 11.78 7.78C11.78 8.25208 11.5925 8.70484 11.2586 9.03865C10.9248 9.37247 10.4721 9.56 10 9.56ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H17C17.7956 20 18.5587 19.6839 19.1213 19.1213C19.6839 18.5587 20 17.7956 20 17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V17Z" fill="currentColor"></path>
                </svg>
              </span>
              <span class="ml-4 text-sm font-semibold">Customers</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <a class="group block py-6 pl-6 pr-8 mb-4 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">
          <div class="flex w-12 h-12 mb-4 items-center justify-center bg-blue-600 group-hover:bg-blue-500 rounded-xl">
            <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.70978 6.53994C5.61681 6.44621 5.50621 6.37182 5.38435 6.32105C5.2625 6.27028 5.13179 6.24414 4.99978 6.24414C4.86777 6.24414 4.73706 6.27028 4.6152 6.32105C4.49334 6.37182 4.38274 6.44621 4.28978 6.53994L1.28978 9.53994C1.09617 9.72824 0.985294 9.98574 0.981544 10.2558C0.977793 10.5258 1.08147 10.7863 1.26978 10.9799C1.45808 11.1735 1.71558 11.2844 1.98564 11.2882C2.25569 11.2919 2.51617 11.1882 2.70978 10.9999L4.99978 8.65994L7.28978 10.9999C7.38274 11.0937 7.49334 11.1681 7.6152 11.2188C7.73706 11.2696 7.86777 11.2957 7.99978 11.2957C8.13179 11.2957 8.2625 11.2696 8.38435 11.2188C8.50621 11.1681 8.61681 11.0937 8.70978 10.9999C8.80351 10.907 8.8779 10.7964 8.92867 10.6745C8.97944 10.5527 9.00558 10.422 9.00558 10.2899C9.00558 10.1579 8.97944 10.0272 8.92867 9.90536C8.8779 9.7835 8.80351 9.6729 8.70978 9.57994L5.70978 6.53994ZM2.70978 5.45994L4.99978 3.15994L7.28978 5.45994C7.38274 5.55367 7.49334 5.62806 7.6152 5.67883C7.73706 5.7296 7.86777 5.75574 7.99978 5.75574C8.13179 5.75574 8.2625 5.7296 8.38435 5.67883C8.50621 5.62806 8.61681 5.55367 8.70978 5.45994C8.80351 5.36698 8.8779 5.25637 8.92867 5.13452C8.97944 5.01266 9.00558 4.88195 9.00558 4.74994C9.00558 4.61793 8.97944 4.48722 8.92867 4.36536C8.8779 4.2435 8.80351 4.1329 8.70978 4.03994L5.70978 1.03994C5.61681 0.946211 5.50621 0.871816 5.38435 0.821048C5.2625 0.770279 5.13179 0.744141 4.99978 0.744141C4.86777 0.744141 4.73706 0.770279 4.6152 0.821048C4.49334 0.871816 4.38274 0.946211 4.28978 1.03994L1.28978 4.03994C1.10147 4.22824 0.995686 4.48364 0.995686 4.74994C0.995686 5.01624 1.10147 5.27164 1.28978 5.45994C1.47808 5.64824 1.73348 5.75403 1.99978 5.75403C2.26608 5.75403 2.52147 5.64824 2.70978 5.45994Z" fill="white"></path>
            </svg>
          </div>
          <h5 class="text-sm font-medium text-blue-50 mb-2">Upgrade to PRO</h5>
          <p class="text-xs leading-normal font-semibold text-blue-200">One year support, monthly updates for up to 5 team members.</p>
        </a>
        <a class="group flex py-5 px-6 items-center bg-gray-600 hover:bg-gray-500 rounded-xl transition duration-200" href="#">
          <div class="flex w-8 h-8 mr-2 items-center justify-center bg-gray-500 group-hover:bg-gray-600 rounded-lg">
            <img src="trizzle-assets/logos/logo-shuffle-blue.svg" alt="">
          </div>
          <span class="text-sm text-gray-100 font-medium">Shuffle</span>
          <div class="ml-auto text-gray-400 group-hover:text-gray-300">
            <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.00016 3.83333C2.3298 3.83333 2.65203 3.73559 2.92611 3.55245C3.2002 3.36931 3.41382 3.10902 3.53996 2.80447C3.66611 2.49993 3.69911 2.16482 3.63481 1.84152C3.5705 1.51822 3.41176 1.22124 3.17867 0.988156C2.94559 0.755068 2.64862 0.596334 2.32531 0.532025C2.00201 0.467717 1.6669 0.500722 1.36236 0.626868C1.05781 0.753014 0.797517 0.966635 0.614381 1.24072C0.431245 1.5148 0.333497 1.83703 0.333497 2.16667C0.333497 2.6087 0.509092 3.03262 0.821653 3.34518C1.13421 3.65774 1.55814 3.83333 2.00016 3.83333ZM2.00016 12.1667C1.67053 12.1667 1.3483 12.2644 1.07421 12.4476C0.800132 12.6307 0.58651 12.891 0.460364 13.1955C0.334218 13.5001 0.301213 13.8352 0.365521 14.1585C0.42983 14.4818 0.588565 14.7788 0.821653 15.0118C1.05474 15.2449 1.35171 15.4037 1.67501 15.468C1.99831 15.5323 2.33343 15.4993 2.63797 15.3731C2.94251 15.247 3.20281 15.0334 3.38595 14.7593C3.56908 14.4852 3.66683 14.163 3.66683 13.8333C3.66683 13.3913 3.49124 12.9674 3.17867 12.6548C2.86611 12.3423 2.44219 12.1667 2.00016 12.1667ZM2.00016 6.33333C1.67053 6.33333 1.3483 6.43108 1.07421 6.61422C0.800132 6.79735 0.58651 7.05765 0.460364 7.3622C0.334218 7.66674 0.301213 8.00185 0.365521 8.32515C0.42983 8.64845 0.588565 8.94543 0.821653 9.17851C1.05474 9.4116 1.35171 9.57033 1.67501 9.63464C1.99831 9.69895 2.33343 9.66595 2.63797 9.5398C2.94251 9.41365 3.20281 9.20003 3.38595 8.92595C3.56908 8.65187 3.66683 8.32964 3.66683 8C3.66683 7.55797 3.49124 7.13405 3.17867 6.82149C2.86611 6.50893 2.44219 6.33333 2.00016 6.33333Z" fill="currentColor"></path>
            </svg>
          </div>
        </a>
      </div>
    </nav>
  </div>
  <div class="relative z-40 mx-auto lg:ml-80"></div>
</div>

Tailwind Component #87

Tailwind CSS

Trizzle

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative flex items-center justify-between py-5 px-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="hidden xl:inline-flex h-14 p-3 items-center w-40 2xl:w-56 bg-gray-700 border border-gray-400 rounded-lg">
          <a class="inline-block text-gray-400 hover:text-gray-300" href="#">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.7099 19.29L16.9999 15.61C18.44 13.8144 19.1374 11.5353 18.9487 9.24133C18.76 6.94733 17.6996 4.81281 15.9854 3.27667C14.2713 1.74053 12.0337 0.919537 9.73283 0.982497C7.43194 1.04546 5.24263 1.98759 3.61505 3.61517C1.98747 5.24275 1.04534 7.43207 0.982375 9.73295C0.919414 12.0338 1.74041 14.2714 3.27655 15.9855C4.81269 17.6997 6.94721 18.7601 9.2412 18.9488C11.5352 19.1375 13.8143 18.4401 15.6099 17L19.2899 20.68C19.3829 20.7738 19.4935 20.8482 19.6153 20.8989C19.7372 20.9497 19.8679 20.9758 19.9999 20.9758C20.1319 20.9758 20.2626 20.9497 20.3845 20.8989C20.5063 20.8482 20.6169 20.7738 20.7099 20.68C20.8901 20.4936 20.9909 20.2444 20.9909 19.985C20.9909 19.7257 20.8901 19.4765 20.7099 19.29ZM9.9999 17C8.61544 17 7.26206 16.5895 6.11091 15.8203C4.95977 15.0511 4.06256 13.9579 3.53275 12.6788C3.00293 11.3997 2.86431 9.99226 3.13441 8.63439C3.4045 7.27653 4.07119 6.02925 5.05016 5.05028C6.02912 4.07131 7.27641 3.40463 8.63427 3.13453C9.99214 2.86443 11.3996 3.00306 12.6787 3.53287C13.9578 4.06268 15.051 4.95989 15.8202 6.11103C16.5894 7.26218 16.9999 8.61556 16.9999 10C16.9999 11.8565 16.2624 13.637 14.9497 14.9498C13.6369 16.2625 11.8564 17 9.9999 17Z" fill="currentColor"></path>
            </svg>
          </a>
          <input class="pl-3 bg-transparent text-gray-100 placeholder-gray-400 outline-none" id="horizontalNavInput5-1" type="text" placeholder="Search...">
        </div>
      </div>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <ul class="flex items-center">
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Overview</a></li>
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Analytics</a></li>
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Products</a></li>
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">
            <span>Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Customers</a></li>
      </ul>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2">
      <div class="flex flex-wrap items-center -mb-2">
        <a class="inline-block mb-2 mr-6 text-gray-400 hover:text-gray-300" href="#">
          <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="inline-block mb-2 mr-8 text-gray-400 hover:text-gray-300" href="#">
          <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="group inline-flex mb-2 items-center" href="#">
          <img class="h-8 w-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men.png" alt="">
          <h4 class="text-white font-extrabold tracking-wide mr-4">John Doe</h4>
          <span class="text-gray-400 group-hover:text-gray-300">
            <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 opacity-50"></div>
    <nav class="relative flex flex-col p-8 h-full w-full bg-gray-700 overflow-y-auto">
      <div class="flex items-center justify-between mb-8">
        <a class="inline-flex items-center" href="#">
          <img class="h-10" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div class="flex w-full h-14 p-3 mb-24 items-center bg-gray-700 border border-gray-400 rounded-lg">
        <a class="inline-block text-gray-400 hover:text-gray-300" href="#">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.4733 12.5267L10.9999 10.0733C11.96 8.87627 12.4249 7.35686 12.2991 5.82753C12.1733 4.2982 11.4664 2.87519 10.3236 1.85109C9.18085 0.827001 7.68914 0.279671 6.15522 0.321644C4.62129 0.363618 3.16175 0.991705 2.0767 2.07676C0.991644 3.16181 0.363557 4.62136 0.321583 6.15528C0.27961 7.6892 0.82694 9.18091 1.85103 10.3237C2.87512 11.4664 4.29814 12.1734 5.82747 12.2992C7.3568 12.425 8.87621 11.9601 10.0733 11L12.5266 13.4533C12.5886 13.5158 12.6623 13.5654 12.7436 13.5993C12.8248 13.6331 12.9119 13.6505 12.9999 13.6505C13.0879 13.6505 13.1751 13.6331 13.2563 13.5993C13.3376 13.5654 13.4113 13.5158 13.4733 13.4533C13.5934 13.329 13.6606 13.1629 13.6606 12.99C13.6606 12.8171 13.5934 12.651 13.4733 12.5267ZM6.33327 11C5.41029 11 4.50804 10.7263 3.74061 10.2135C2.97318 9.70074 2.37504 8.97191 2.02183 8.11919C1.66862 7.26646 1.57621 6.32815 1.75627 5.42291C1.93634 4.51766 2.38079 3.68614 3.03344 3.0335C3.68608 2.38085 4.5176 1.9364 5.42285 1.75633C6.32809 1.57627 7.2664 1.66868 8.11913 2.02189C8.97185 2.3751 9.70068 2.97324 10.2135 3.74067C10.7262 4.5081 10.9999 5.41035 10.9999 6.33333C10.9999 7.57101 10.5083 8.75799 9.6331 9.63316C8.75793 10.5083 7.57095 11 6.33327 11Z" fill="currentColor"></path>
          </svg>
        </a>
        <input class="pl-3 text-sm bg-transparent text-gray-100 placeholder-gray-400 outline-none" id="horizontalNavInput5-1" type="text" placeholder="Search...">
      </div>
      <ul class="mb-10">
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Overview</a></li>
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Analytics</a></li>
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Products</a></li>
        <li class="mb-10">
          <a class="inline-flex w-full items-center justify-between text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <span>Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Customers</a></li>
      </ul>
      <a class="flex mt-auto items-center justify-between" href="#">
        <div class="flex items-center">
          <img class="h-8 w-8 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
          <h5 class="leading-none font-semibold text-gray-100">John Doe</h5>
        </div>
        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L5 5L9 1" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </nav>
  </div>
</section>

Tailwind Component #88

Tailwind CSS

Trizzle

<section class="pt-5 pb-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center mb-8">
      <div class="w-full md:w-auto mb-6 md:mb-0 md:mr-5">
        <div class="relative w-full h-14 max-w-sm py-4 px-3 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
          <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-medium text-gray-100 px-1 bg-gray-600">Job Keywords</span>
          <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="jobSearchingInput1-1" type="text">
        </div>
      </div>
      <div class="w-full md:w-auto mb-6 md:mb-0 md:mr-6">
        <div class="relative w-full h-14 max-w-sm py-4 px-3 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
          <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-medium text-gray-100 px-1 bg-gray-600">Location</span>
          <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="jobSearchingInput1-2" type="text" placeholder="Select location">
        </div>
      </div>
      <div>
        <button class="inline-block h-14 py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Search</button>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <div class="relative p-6 bg-gray-500 rounded-xl">
          <a class="inline-block absolute top-0 right-0 m-6 text-gray-300 hover:text-gray-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="inline-flex items-center justify-center w-16 h-16 mb-6 bg-purple-500 rounded-lg">
            <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8729 24.5972L6.0221 24.5972L2.0684 17.8231L5.7387 11.262L2.39182 11.262L0 6.68164L16.1083 6.68164L18.628 11.0002L10.9888 11.0002L7.02915 17.897L10.8729 24.5972Z" fill="#232B3A"></path>
              <path d="M9.93945 17.7865L12.4656 13.4L16.2914 20.3588L23.9609 20.3588L28.0246 13.6219L30.4044 17.6013L26.3771 24.8378L18.7439 24.8378L20.3182 27.2068L17.9389 32.0003L9.93945 17.7865Z" fill="#232B3A"></path>
              <path d="M17.6275 17.7122L22.5151 17.7122L30.6668 3.6645L25.5538 3.52868L23.9671 6.41591L20.2576 -1.80511e-06L12.0448 -3.69131e-07L9.93359 4.15804L17.6215 4.15804L21.5021 10.9075L17.6275 17.7122Z" fill="#232B3A"></path>
              <defs><rect width="30.6667" height="32" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-xl text-white font-bold mb-3">Front-End Developer</h4>
          <p class="text-gray-300 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices malesuada nibh et porta...</p>
          <div class="flex items-center mb-6">
            <div class="flex mr-2">
              <img class="w-8 h-8 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
              <img class="w-8 h-8 -ml-2 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
              <div class="flex items-center justify-center w-8 h-8 -ml-2 bg-gray-500 rounded-full">
                <div class="flex items-center justify-center w-7 h-7 bg-gray-400 text-xs text-gray-300 font-semibold rounded-full">+2</div>
              </div>
            </div>
            <span class="text-xs text-gray-300">Five friends work here</span>
          </div>
          <a class="block py-4 px-12 text-center text-white font-bold text-sm leading-6 bg-blue-500 hover:bg-blue-600 rounded-xl transition duration-200" href="#">Apply Now</a>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #89

Tailwind CSS

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-50 fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-gray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-xl w-full mx-auto p-6 bg-gray-500 rounded-xl">
    <div class="flex items-center justify-between pb-6 mb-6 border-b border-gray-600">
      <div class="flex flex-wrap items-center">
        <div class="flex items-center justify-center h-14 w-14 mb-4 sm:mb-0 bg-gray-600 rounded-xl mr-4">
          <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19.707 8.29291L11.707 0.292914C11.5672 0.153061 11.389 0.0578154 11.195 0.019223C11.0011 -0.0193694 10.8 0.000424638 10.6173 0.076102C10.4346 0.151779 10.2784 0.279941 10.1685 0.444379C10.0586 0.608817 10 0.802145 10 0.999914V4.54483C7.2683 4.79768 4.72926 6.06078 2.87973 8.08695C1.0302 10.1131 0.0033085 12.7565 2.93403e-09 15.4999V16.9999C-1.59013e-05 17.2076 0.0646263 17.4101 0.184952 17.5794C0.305279 17.7486 0.475319 17.8763 0.671467 17.9445C0.867616 18.0127 1.08014 18.0182 1.27954 17.9601C1.47893 17.9021 1.65531 17.7834 1.78418 17.6205C2.76383 16.4555 3.96583 15.4973 5.31997 14.802C6.6741 14.1068 8.15322 13.6884 9.6709 13.5712C9.7207 13.5649 9.8457 13.5551 10 13.5453V16.9999C10 17.1977 10.0586 17.391 10.1685 17.5555C10.2784 17.7199 10.4346 17.848 10.6173 17.9237C10.8 17.9994 11.0011 18.0192 11.195 17.9806C11.389 17.942 11.5672 17.8468 11.707 17.7069L19.707 9.70691C19.7999 9.61408 19.8735 9.50387 19.9238 9.38256C19.9741 9.26125 19.9999 9.13122 19.9999 8.99991C19.9999 8.8686 19.9741 8.73858 19.9238 8.61727C19.8735 8.49596 19.7999 8.38574 19.707 8.29291ZM12 14.5859V12.4999C12 12.3686 11.9742 12.2385 11.9239 12.1172C11.8737 11.9958 11.8 11.8856 11.7072 11.7927C11.6143 11.6999 11.5041 11.6262 11.3827 11.576C11.2614 11.5257 11.1313 11.4999 11 11.4999C10.7451 11.4999 9.7041 11.5492 9.43848 11.5849C6.74307 11.8332 4.17736 12.8572 2.05176 14.5331C2.29289 12.3274 3.33918 10.2882 4.99026 8.80598C6.64135 7.32373 8.78119 6.50263 11 6.49991C11.1313 6.49995 11.2614 6.47411 11.3827 6.42386C11.5041 6.37362 11.6143 6.29996 11.7072 6.2071C11.8 6.11423 11.8737 6.00398 11.9239 5.88264C11.9742 5.7613 12 5.63125 12 5.49991V3.41397L17.5859 8.99991L12 14.5859Z" fill="#194BFB"></path>
          </svg>
        </div>
        <div class="w-full sm:w-auto">
          <h4 class="text-xl text-gray-100 leading-6 font-semibold">Share to web</h4>
          <span class="text-xs text-gray-300 font-semibold">Publish and share link with anyone</span>
        </div>
      </div>
      <button class="flex items-center justify-center h-6 w-11 bg-blue-500 rounded-full" x-data="{ toggle: true }" x-on:click="toggle=!toggle">
        <div :class="{'bg-transparent': toggle, 'bg-white': !toggle }" class="h-5 w-5 rounded-full"></div>
        <div :class="{'bg-transparent': !toggle, 'bg-white': toggle }" class="h-5 w-5 rounded-full bg-white"></div>
      </button>
    </div>
    <div class="pb-6 mb-6 border-b border-gray-600">
      <div class="flex flex-wrap items-center justify-between mb-6">
        <h5 class="text-sm text-gray-300">
          <span>Anyone with link</span>
          <span class="font-semibold">can view</span>
        </h5>
        <a class="inline-block text-sm font-semibold text-blue-500 hover:text-blue-600" href="#">Settings</a>
      </div>
      <div class="relative flex items-center px-6 py-4 border border-gray-400 rounded-lg">
        <input x-ref="link" class="block w-full text-gray-100 placeholder-gray-100 bg-transparent outline-none" id="modalInput5-1" type="text" value="https://shuffle.dev/trizzle-ui/random-link">
        <button x-on:click="navigator.clipboard.writeText($refs.link.value)" class="inline-block ml-4 text-gray-200 hover:text-gray-300">
          <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 6.94C17.9896 6.84813 17.9695 6.75763 17.94 6.67V6.58C17.8919 6.47718 17.8278 6.38267 17.75 6.3L11.75 0.3C11.6673 0.222216 11.5728 0.158081 11.47 0.11C11.4402 0.10576 11.4099 0.10576 11.38 0.11C11.2784 0.0517412 11.1662 0.0143442 11.05 0H7C6.20435 0 5.44129 0.316071 4.87868 0.87868C4.31607 1.44129 4 2.20435 4 3V4H3C2.20435 4 1.44129 4.31607 0.87868 4.87868C0.316071 5.44129 0 6.20435 0 7V17C0 17.7956 0.316071 18.5587 0.87868 19.1213C1.44129 19.6839 2.20435 20 3 20H11C11.7956 20 12.5587 19.6839 13.1213 19.1213C13.6839 18.5587 14 17.7956 14 17V16H15C15.7956 16 16.5587 15.6839 17.1213 15.1213C17.6839 14.5587 18 13.7956 18 13V7C18 7 18 7 18 6.94ZM12 3.41L14.59 6H13C12.7348 6 12.4804 5.89464 12.2929 5.70711C12.1054 5.51957 12 5.26522 12 5V3.41ZM12 17C12 17.2652 11.8946 17.5196 11.7071 17.7071C11.5196 17.8946 11.2652 18 11 18H3C2.73478 18 2.48043 17.8946 2.29289 17.7071C2.10536 17.5196 2 17.2652 2 17V7C2 6.73478 2.10536 6.48043 2.29289 6.29289C2.48043 6.10536 2.73478 6 3 6H4V13C4 13.7956 4.31607 14.5587 4.87868 15.1213C5.44129 15.6839 6.20435 16 7 16H12V17ZM16 13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H7C6.73478 14 6.48043 13.8946 6.29289 13.7071C6.10536 13.5196 6 13.2652 6 13V3C6 2.73478 6.10536 2.48043 6.29289 2.29289C6.48043 2.10536 6.73478 2 7 2H10V5C10 5.79565 10.3161 6.55871 10.8787 7.12132C11.4413 7.68393 12.2044 8 13 8H16V13Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="flex flex-wrap items-center justify-between">
      <a class="inline-flex items-center text-sm font-semibold text-blue-500 hover:text-blue-600" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 8.94C20.9896 8.84813 20.9695 8.75763 20.94 8.67V8.58C20.8919 8.47718 20.8278 8.38267 20.75 8.3L14.75 2.3C14.6673 2.22222 14.5728 2.15808 14.47 2.11C14.4402 2.10576 14.4099 2.10576 14.38 2.11C14.2784 2.05174 14.1662 2.01434 14.05 2H10C9.20435 2 8.44129 2.31607 7.87868 2.87868C7.31607 3.44129 7 4.20435 7 5V6H6C5.20435 6 4.44129 6.31607 3.87868 6.87868C3.31607 7.44129 3 8.20435 3 9V19C3 19.7956 3.31607 20.5587 3.87868 21.1213C4.44129 21.6839 5.20435 22 6 22H14C14.7956 22 15.5587 21.6839 16.1213 21.1213C16.6839 20.5587 17 19.7956 17 19V18H18C18.7956 18 19.5587 17.6839 20.1213 17.1213C20.6839 16.5587 21 15.7956 21 15V9C21 9 21 9 21 8.94ZM15 5.41L17.59 8H16C15.7348 8 15.4804 7.89464 15.2929 7.70711C15.1054 7.51957 15 7.26522 15 7V5.41ZM15 19C15 19.2652 14.8946 19.5196 14.7071 19.7071C14.5196 19.8946 14.2652 20 14 20H6C5.73478 20 5.48043 19.8946 5.29289 19.7071C5.10536 19.5196 5 19.2652 5 19V9C5 8.73478 5.10536 8.48043 5.29289 8.29289C5.48043 8.10536 5.73478 8 6 8H7V15C7 15.7956 7.31607 16.5587 7.87868 17.1213C8.44129 17.6839 9.20435 18 10 18H15V19ZM19 15C19 15.2652 18.8946 15.5196 18.7071 15.7071C18.5196 15.8946 18.2652 16 18 16H10C9.73478 16 9.48043 15.8946 9.29289 15.7071C9.10536 15.5196 9 15.2652 9 15V5C9 4.73478 9.10536 4.48043 9.29289 4.29289C9.48043 4.10536 9.73478 4 10 4H13V7C13 7.79565 13.3161 8.55871 13.8787 9.12132C14.4413 9.68393 15.2044 10 16 10H19V15Z" fill="currentColor"></path>
        </svg>
        <span class="ml-2">Copy link</span>
      </a>
      <div class="w-full sm:w-auto mt-6 sm:mt-0 -mb-2">
        <a x-on:click.prevent="modal = false" class="inline-block w-full sm:w-auto py-3 px-5 mb-2 mr-6 text-center font-semibold leading-6 text-gray-200 bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Close</a><a class="inline-block w-full sm:w-auto py-3 px-5 mb-2 text-center font-semibold leading-6 text-blue-50 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Share file</a>
      </div>
    </div>
  </div>
</div>

Tailwind Component #90

Tailwind CSS

Trizzle

<section x-data="{ inc: 10, show: 10, min: 10, max: 20 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="pt-6 pb-8 bg-gray-500 rounded-xl">
      <div class="px-6">
        <div class="mb-6">
          <h4 class="text-lg text-gray-100 font-semibold mb-6">Users</h4>
          <div class="md:flex items-center">
            <div class="relative inline-block h-14 w-full max-w-xxs py-4 px-3 mb-5 md:mb-0 md:mr-6 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-100 px-1 bg-gray-500">Role</span>
              <input class="block w-full ml-2 outline-none bg-transparent text-sm text-gray-100 font-medium" id="messagesInput1-1" placeholder="All Roles" type="search">
            </div>
            <div class="inline-flex items-center h-14 w-full max-w-sm py-4 px-3 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
              </svg>
              <input class="block w-full ml-2 outline-none bg-transparent text-sm text-gray-100 font-medium" id="messagesInput1-1" placeholder="Search user..." type="search">
            </div>
          </div>
        </div>
        <div class="w-full pb-6 overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="p-0">
                  <div class="flex items-center h-11 py-3 px-6 rounded-l-xl bg-gray-600">
                    <input type="checkbox" value="" id="">
                    <label class="ml-2 text-xs text-gray-300 font-semibold">NAME</label>
                  </div>
                </th>
                <th class="p-0">
                  <div class="flex items-center h-11 py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">COMPANY</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="flex items-center h-11 py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">ROLE</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="flex items-center h-11 py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">STATUS</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="flex items-center h-11 py-3 px-6 rounded-r-xl bg-gray-600"></div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">John Doe</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
               <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <input type="checkbox" value="" id="">
                      <img class="w-8 h-8 ml-4 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-circle-border.png" alt="">
                      <span class="text-sm font-medium text-gray-100">Mike John</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block px-2 py-1 text-xs text-gray-300 font-medium bg-gray-700 rounded-full">Explicitway</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Front-end Developer</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="inline-block py-1 px-2 text-xs leading-5 font-medium text-green-500 bg-green-800 rounded-full">ACTIVE</span>
                  </div>
                </td>
                <td class="p-0">
                  <a class="inline-flex h-9 px-4 mr-2 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.0002 7.50012C12.8234 7.50012 12.6538 7.57036 12.5288 7.69538C12.4037 7.82041 12.3335 7.98998 12.3335 8.16679V12.1668C12.3335 12.3436 12.2633 12.5132 12.1382 12.6382C12.0132 12.7632 11.8436 12.8335 11.6668 12.8335H2.3335C2.15669 12.8335 1.98712 12.7632 1.86209 12.6382C1.73707 12.5132 1.66683 12.3436 1.66683 12.1668V2.83346C1.66683 2.65664 1.73707 2.48708 1.86209 2.36205C1.98712 2.23703 2.15669 2.16679 2.3335 2.16679H6.3335C6.51031 2.16679 6.67988 2.09655 6.8049 1.97153C6.92992 1.8465 7.00016 1.67693 7.00016 1.50012C7.00016 1.32331 6.92992 1.15374 6.8049 1.02872C6.67988 0.903693 6.51031 0.833455 6.3335 0.833455H2.3335C1.80306 0.833455 1.29436 1.04417 0.919283 1.41924C0.54421 1.79431 0.333496 2.30302 0.333496 2.83346V12.1668C0.333496 12.6972 0.54421 13.2059 0.919283 13.581C1.29436 13.9561 1.80306 14.1668 2.3335 14.1668H11.6668C12.1973 14.1668 12.706 13.9561 13.081 13.581C13.4561 13.2059 13.6668 12.6972 13.6668 12.1668V8.16679C13.6668 7.98998 13.5966 7.82041 13.4716 7.69538C13.3465 7.57036 13.177 7.50012 13.0002 7.50012ZM3.00016 8.00679V10.8335C3.00016 11.0103 3.0704 11.1798 3.19543 11.3049C3.32045 11.4299 3.49002 11.5001 3.66683 11.5001H6.4935C6.58123 11.5006 6.66821 11.4838 6.74943 11.4506C6.83066 11.4175 6.90454 11.3686 6.96683 11.3068L11.5802 6.68679L13.4735 4.83346C13.536 4.77148 13.5856 4.69775 13.6194 4.61651C13.6533 4.53527 13.6707 4.44813 13.6707 4.36012C13.6707 4.27211 13.6533 4.18498 13.6194 4.10374C13.5856 4.0225 13.536 3.94876 13.4735 3.88679L10.6468 1.02679C10.5849 0.964303 10.5111 0.914707 10.4299 0.880861C10.3486 0.847015 10.2615 0.82959 10.1735 0.82959C10.0855 0.82959 9.99835 0.847015 9.91711 0.880861C9.83587 0.914707 9.76214 0.964303 9.70016 1.02679L7.82016 2.91346L3.1935 7.53346C3.13171 7.59575 3.08283 7.66963 3.04965 7.75085C3.01647 7.83208 2.99966 7.91905 3.00016 8.00679ZM10.1735 2.44012L12.0602 4.32679L11.1135 5.27346L9.22683 3.38679L10.1735 2.44012ZM4.3335 8.28012L8.28683 4.32679L10.1735 6.21346L6.22016 10.1668H4.3335V8.28012Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Edit</span>
                  </a>
                  <a x-on:click.prevent="hidden = true" class="inline-flex h-9 px-4 items-center justify-center bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
                    <svg width="12" height="15" viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11.3333 3.49992H8.66667V2.83325C8.66667 2.30282 8.45595 1.79411 8.08088 1.41904C7.70581 1.04397 7.1971 0.833252 6.66667 0.833252H5.33333C4.8029 0.833252 4.29419 1.04397 3.91912 1.41904C3.54405 1.79411 3.33333 2.30282 3.33333 2.83325V3.49992H0.666667C0.489856 3.49992 0.320286 3.57016 0.195262 3.69518C0.0702379 3.8202 0 3.98977 0 4.16658C0 4.3434 0.0702379 4.51297 0.195262 4.63799C0.320286 4.76301 0.489856 4.83325 0.666667 4.83325H1.33333V12.1666C1.33333 12.697 1.54405 13.2057 1.91912 13.5808C2.29419 13.9559 2.8029 14.1666 3.33333 14.1666H8.66667C9.1971 14.1666 9.70581 13.9559 10.0809 13.5808C10.456 13.2057 10.6667 12.697 10.6667 12.1666V4.83325H11.3333C11.5101 4.83325 11.6797 4.76301 11.8047 4.63799C11.9298 4.51297 12 4.3434 12 4.16658C12 3.98977 11.9298 3.8202 11.8047 3.69518C11.6797 3.57016 11.5101 3.49992 11.3333 3.49992ZM4.66667 2.83325C4.66667 2.65644 4.7369 2.48687 4.86193 2.36185C4.98695 2.23682 5.15652 2.16659 5.33333 2.16659H6.66667C6.84348 2.16659 7.01305 2.23682 7.13807 2.36185C7.2631 2.48687 7.33333 2.65644 7.33333 2.83325V3.49992H4.66667V2.83325ZM9.33333 12.1666C9.33333 12.3434 9.2631 12.513 9.13807 12.638C9.01305 12.763 8.84348 12.8333 8.66667 12.8333H3.33333C3.15652 12.8333 2.98695 12.763 2.86193 12.638C2.7369 12.513 2.66667 12.3434 2.66667 12.1666V4.83325H9.33333V12.1666Z" fill="#3D485B"></path>
                    </svg>
                    <span class="ml-2 text-xs text-gray-200 font-semibold">Delete</span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="flex flex-wrap items-center justify-between px-6 pt-8 border-t border-gray-400">
        <div class="w-full sm:w-auto mb-6 sm:mb-0">
          <div class="flex items-center justify-between">
            <p class="text-sm font-medium text-gray-400">
              <span>Showing</span>
              <span x-text="inc > show ? inc - show : 1" class="px-px text-gray-200">1</span>
              <span>to</span>
              <span x-text="inc" class="px-px text-gray-200">10</span>
              <span x-text="'of ' + max + ' results'">of 20 results</span>
            </p>
          </div>
        </div>
        <div class="w-full sm:w-auto mb-6 sm:mb-0">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5"><a x-on:click.prevent="inc > min ? inc -= show : min" class="inline-flex items-center h-9 py-1 px-4 text-xs text-gray-400 font-semibold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Previous</a></div>
            <div class="w-auto p-1.5"><a x-on:click.prevent="inc < max ? inc += show : max" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Next</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #91

Tailwind CSS

Trizzle

<section x-data="{ inc: 10, show: 10, min: 10, max: 20 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="px-5 py-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap items-center justify-between -m-2">
        <div class="w-full sm:w-auto p-2">
          <p class="text-sm font-medium text-gray-400">
            <span>Showing</span>
            <span x-text="inc > show ? inc - show : 1" class="text-gray-200">1</span>
            <span>to</span>
            <span x-text="inc" class="text-gray-200">10</span>
            <span x-text="'of ' + max + ' results'">of 20 results</span>
          </p>
        </div>
        <div class="w-full sm:w-auto p-2">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-full sm:w-auto"><a x-on:click.prevent="inc > min ? inc -= show : min" class="inline-block w-full sm:w-auto py-2 px-4 mb-2 mr-3 text-xs text-center font-semibold leading-normal text-gray-400 bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Previous</a></div>
            <div class="w-full sm:w-auto"><a x-on:click.prevent="inc < max ? inc += show : max" class="inline-block w-full sm:w-auto py-2 px-4 mb-2 text-xs text-center font-semibold leading-normal text-blue-50 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Next</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #92

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <div class="flex flex-wrap -mx-4 mb-6 justify-between items-center">
        <div class="w-auto px-4">
          <h4 class="text-lg text-gray-200 font-bold tracking-wide">Statistics</h4>
        </div>
        <div class="w-auto px-4">
          <a class="inline-flex h-9 px-3 items-center text-xs font-semibold bg-gray-600 hover:bg-gray-700 transition duration-200 rounded-lg" href="#">
            <span class="mr-2 text-gray-300">View All</span>
            <svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.5 9L5.5 5L1.5 1" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="px-8 md:px-14 py-10 bg-gray-600 rounded-xl">
        <div class="flex flex-wrap items-center justify-between -mx-2">
          <div class="w-full md:w-1/2 px-2 mb-12 md:mb-0">
            <div class="max-w-xxs lg:pr-12">
              <div class="flex flex-wrap -mx-2 -mb-3">
                <div class="w-full md:w-1/2 px-2 mb-3">
                  <div class="flex items-center">
                    <div class="w-1.5 h-1.5 mr-3 bg-purple-500 rounded-full"></div>
                    <div>
                      <h5 class="text-sm leading-5 text-gray-300 font-semibold">$725.00</h5>
                      <span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Shopping</span>
                    </div>
                  </div>
                </div>
                <div class="w-full md:w-1/2 px-2 mb-3">
                  <div class="flex items-center">
                    <div class="w-1.5 h-1.5 mr-3 bg-green-500 rounded-full"></div>
                    <div>
                      <h5 class="text-sm leading-5 text-gray-300 font-semibold">$725.00</h5>
                      <span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Food</span>
                    </div>
                  </div>
                </div>
                <div class="w-full md:w-1/2 px-2 mb-3">
                  <div class="flex items-center">
                    <div class="w-1.5 h-1.5 mr-3 bg-blue-500 rounded-full"></div>
                    <div>
                      <h5 class="text-sm leading-5 text-gray-300 font-semibold">$2,350.00</h5>
                      <span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Home</span>
                    </div>
                  </div>
                </div>
                <div class="w-full md:w-1/2 px-2 mb-3">
                  <div class="flex items-center">
                    <div class="w-1.5 h-1.5 mr-3 bg-yellow-500 rounded-full"></div>
                    <div>
                      <h5 class="text-sm leading-5 text-gray-300 font-semibold">$710.00</h5>
                      <span class="text-xs leading-none font-semibold text-gray-300 opacity-60">Others</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-2">
            <div class="chart px-2" data-type="radial-bar-part" data-variant="four" style="min-height: 100px !important; max-height: 100px !important;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #93

Tailwind CSS

Trizzle

<section class="relative pt-24 lg:py-44">
  <img class="hidden lg:block absolute top-0 left-0 h-full w-1/2" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="lg:w-1/2 ml-auto">
      <div class="relative max-w-xs lg:max-w-md mx-auto text-center">
        <a class="inline-block mx-auto mb-10" href="#">
          <img class="block" src="trizzle-assets/logos/trizzle-logo-blue.svg" alt="">
        </a>
        <h2 class="text-2xl text-gray-100 font-semibold mb-2">Log in to your account</h2>
        <p class="text-gray-300 font-medium mb-10">Welcome back! Please enter your details.</p>
        <form action="">
          <div class="relative w-full h-14 py-4 px-3 mb-8 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">Email</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput3-1" type="email">
          </div>
          <div class="relative w-full h-14 py-4 px-3 mb-6 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
            <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-300 px-1 bg-gray-600">Password</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="signInInput3-2" type="password">
          </div>
          <div class="flex flex-wrap items-center justify-between mb-6">
            <div class="flex items-center mb-4 sm:mb-0">
              <input id="signInInput3-3" type="checkbox">
              <label class="ml-2 text-xs text-gray-300 font-semibold" for="">Remember for 30 days</label>
            </div>
            <div class="w-full sm:w-auto"><a class="inline-block text-xs font-semibold text-blue-500 hover:text-blue-600" href="#">Forgot password?</a></div>
          </div>
          <button class="block w-full py-4 mb-4 leading-6 text-white font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Sign In</button>
          <a class="flex items-center justify-center w-full py-4 mb-6 leading-6 text-white font-semibold bg-gray-500 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
            <div class="w-4 bg-white rounded-sm">
              <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.5 0H14L8 4.738L2 0H1.5C0.672 0 0 0.672 0 1.5V10.5C0 11.328 0.672 12 1.5 12H2V2.646L8 7.261L14 2.645V12H14.5C15.328 12 16 11.328 16 10.5V1.5C16 0.672 15.328 0 14.5 0Z" fill="#F44336"></path>
              </svg>
            </div>
            <span class="ml-3">Sign In with Gmail</span>
          </a>
          <p class="font-medium">
            <span class="text-gray-300">Don’t have an account?</span>
            <a class="inline-block text-blue-500 hover:underline" href="#">Sign up</a>
          </p>
        </form>
      </div>
    </div>
  </div>
  <img class="lg:hidden mt-24" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt="">
</section>

Tailwind Component #94

Tailwind CSS

Trizzle

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-blue-300 rounded-lg">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34874 18.9425 4.80691 17.0678 2.93219C15.1931 1.05746 12.6513 0.00294858 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C17.9976 12.121 17.1539 14.1544 15.6542 15.6542C14.1544 17.1539 12.121 17.9976 10 18ZM10 9.5C9.73479 9.5 9.48043 9.60536 9.2929 9.79289C9.10536 9.98043 9 10.2348 9 10.5V13.5C9 13.7652 9.10536 14.0196 9.2929 14.2071C9.48043 14.3946 9.73479 14.5 10 14.5C10.2652 14.5 10.5196 14.3946 10.7071 14.2071C10.8946 14.0196 11 13.7652 11 13.5V10.5C11 10.2348 10.8946 9.98043 10.7071 9.79289C10.5196 9.60536 10.2652 9.5 10 9.5ZM10 5.5C9.75278 5.5 9.5111 5.57331 9.30554 5.71066C9.09998 5.84801 8.93976 6.04324 8.84516 6.27165C8.75055 6.50005 8.72579 6.75139 8.77402 6.99386C8.82225 7.23634 8.94131 7.45907 9.11612 7.63388C9.29094 7.8087 9.51367 7.92775 9.75614 7.97598C9.99862 8.02421 10.25 7.99946 10.4784 7.90485C10.7068 7.81024 10.902 7.65002 11.0393 7.44446C11.1767 7.2389 11.25 6.99723 11.25 6.75C11.25 6.41848 11.1183 6.10054 10.8839 5.86612C10.6495 5.6317 10.3315 5.5 10 5.5Z" fill="#04297A"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-blue-800 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="#212B36"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Tailwind Component #95

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="relative pt-16 pb-10 px-8 bg-blue-500 rounded-2xl overflow-hidden">
      <img class="absolute top-0 left-0 h-full w-full object-cover" src="trizzle-assets/images/background-banner-squares.png" alt="">
      <div class="relative">
        <h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Ideal banner asset for your dashboard project</h3>
        <p class="font-medium text-blue-200 mb-36">Go global with our UI Resources and solutions</p>
        <a class="inline-block w-full px-6 py-3 leading-6 text-center font-semibold text-blue-50 bg-gray-500 hover:bg-gray-600 transition duration-200 rounded-lg" href="#">Get Started</a>
      </div>
    </div>
  </div>
</section>

Tailwind Component #96

Tailwind CSS

Trizzle

<div x-data="{ snackbar: true }" :class="{ 'hidden': !snackbar }" class="z-50 fixed left-0 bottom-0 p-4">
  <div class="max-w-xs p-4 bg-gray-500 rounded-lg shadow">
    <div class="flex w-full h-full items-center justify-between">
      <div class="flex items-center pr-6">
        <div class="flex-shrink-0 self-start inline-flex items-center justify-center w-10 h-10 mr-3 bg-red-500 bg-opacity-20 rounded-xl">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 12C9.75278 12 9.5111 12.0733 9.30554 12.2107C9.09998 12.348 8.93976 12.5432 8.84516 12.7716C8.75055 13.0001 8.72579 13.2514 8.77402 13.4939C8.82225 13.7363 8.94131 13.9591 9.11612 14.1339C9.29094 14.3087 9.51367 14.4277 9.75614 14.476C9.99862 14.5242 10.25 14.4995 10.4784 14.4049C10.7068 14.3102 10.902 14.15 11.0393 13.9445C11.1767 13.7389 11.25 13.4972 11.25 13.25C11.25 12.9185 11.1183 12.6005 10.8839 12.3661C10.6495 12.1317 10.3315 12 10 12ZM10 10.5C10.2652 10.5 10.5196 10.3946 10.7071 10.2071C10.8946 10.0196 11 9.76522 11 9.5V6.5C11 6.23478 10.8946 5.98043 10.7071 5.79289C10.5196 5.60536 10.2652 5.5 10 5.5C9.73479 5.5 9.48043 5.60536 9.2929 5.79289C9.10536 5.98043 9 6.23478 9 6.5V9.5C9 9.76522 9.10536 10.0196 9.2929 10.2071C9.48043 10.3946 9.73479 10.5 10 10.5ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34874 18.9425 4.80691 17.0678 2.93219C15.1931 1.05746 12.6513 0.00294858 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C17.9976 12.121 17.1539 14.1544 15.6542 15.6542C14.1544 17.1539 12.121 17.9976 10 18Z" fill="#FF4842"></path>
          </svg>
        </div>
        <span class="text-sm leading-5 text-gray-200 font-semibold">This is a error message!</span>
      </div>
      <button x-on:click="snackbar = false" class="inline-block text-gray-400 hover:text-gray-300">
        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.93996 5.00001L8.80663 2.14001C8.93216 2.01448 9.00269 1.84421 9.00269 1.66668C9.00269 1.48914 8.93216 1.31888 8.80663 1.19335C8.68109 1.06781 8.51083 0.997284 8.33329 0.997284C8.15576 0.997284 7.9855 1.06781 7.85996 1.19335L4.99996 4.06001L2.13996 1.19335C2.01442 1.06781 1.84416 0.997284 1.66663 0.997284C1.48909 0.997284 1.31883 1.06781 1.19329 1.19335C1.06776 1.31888 0.997231 1.48914 0.997231 1.66668C0.997231 1.84421 1.06776 2.01448 1.19329 2.14001L4.05996 5.00001L1.19329 7.86001C1.13081 7.92199 1.08121 7.99572 1.04737 8.07696C1.01352 8.1582 0.996094 8.24534 0.996094 8.33334C0.996094 8.42135 1.01352 8.50849 1.04737 8.58973C1.08121 8.67097 1.13081 8.7447 1.19329 8.80668C1.25527 8.86916 1.329 8.91876 1.41024 8.95261C1.49148 8.98645 1.57862 9.00388 1.66663 9.00388C1.75463 9.00388 1.84177 8.98645 1.92301 8.95261C2.00425 8.91876 2.07798 8.86916 2.13996 8.80668L4.99996 5.94001L7.85996 8.80668C7.92194 8.86916 7.99567 8.91876 8.07691 8.95261C8.15815 8.98645 8.24529 9.00388 8.33329 9.00388C8.4213 9.00388 8.50844 8.98645 8.58968 8.95261C8.67092 8.91876 8.74465 8.86916 8.80663 8.80668C8.86911 8.7447 8.91871 8.67097 8.95255 8.58973C8.9864 8.50849 9.00383 8.42135 9.00383 8.33334C9.00383 8.24534 8.9864 8.1582 8.95255 8.07696C8.91871 7.99572 8.86911 7.92199 8.80663 7.86001L5.93996 5.00001Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Tailwind Component #97

Tailwind CSS

Trizzle

<section class="py-3">
  <div class="container px-4 mx-auto">
    <a class="block p-4 bg-gray-600 rounded-xl hover:bg-gray-700 transition duration-200" href="#">
      <img class="block w-full h-28 object-cover rounded-md mb-3" src="trizzle-assets/images/working-women-laptop.png" alt="">
      <h4 class="text-white font-semibold leading-6 mb-1">Posts for Social Media</h4>
      <div class="flex items-center mb-4">
        <span class="h-2 w-2 mr-1 bg-blue-500 rounded-full"></span>
        <span class="text-xs font-medium text-blue-500">Design</span>
      </div>
      <div class="pt-4 border-t border-gray-500">
        <div class="flex items-center justify-between -m-2">
          <div class="w-auto p-2">
            <div class="flex flex-wrap -m-1">
              <div class="w-auto p-1">
                <div class="inline-flex w-10 h-8 items-center py-1 px-2 bg-gray-400 rounded-lg">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.66675 9.3333C6.884 9.55503 7.14331 9.73118 7.4295 9.85144C7.71568 9.9717 8.02299 10.0336 8.33341 10.0336C8.64384 10.0336 8.95114 9.9717 9.23733 9.85144C9.52352 9.73118 9.78283 9.55503 10.0001 9.3333L12.6667 6.66663C13.1088 6.22461 13.3571 5.62509 13.3571 4.99997C13.3571 4.37485 13.1088 3.77533 12.6667 3.3333C12.2247 2.89127 11.6252 2.64294 11.0001 2.64294C10.375 2.64294 9.77544 2.89127 9.33341 3.3333L9.00008 3.66663" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M9.33342 6.66665C9.11617 6.44492 8.85686 6.26876 8.57067 6.14851C8.28449 6.02825 7.97718 5.96631 7.66676 5.96631C7.35633 5.96631 7.04903 6.02825 6.76284 6.14851C6.47665 6.26876 6.21734 6.44492 6.00009 6.66665L3.33342 9.33332C2.89139 9.77534 2.64307 10.3749 2.64307 11C2.64307 11.6251 2.89139 12.2246 3.33342 12.6666C3.77545 13.1087 4.37497 13.357 5.00009 13.357C5.62521 13.357 6.22473 13.1087 6.66676 12.6666L7.00009 12.3333" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <span class="ml-1 text-xs text-white">2</span>
                </div>
              </div>
              <div class="w-auto p-1">
                <div class="inline-flex w-10 h-8 items-center py-1 px-2 bg-gray-400 rounded-lg">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 13.3333L2.86667 10.7333C2.11763 9.62549 1.84666 8.31358 2.10415 7.04151C2.36163 5.76943 3.13004 4.62375 4.26651 3.81749C5.40298 3.01122 6.83017 2.59924 8.28273 2.65813C9.73528 2.71703 11.1143 3.24279 12.1635 4.13768C13.2127 5.03256 13.8606 6.23567 13.9867 7.52329C14.1128 8.81092 13.7086 10.0955 12.8492 11.1381C11.9899 12.1807 10.7338 12.9104 9.31453 13.1915C7.89529 13.4727 6.40947 13.2862 5.13333 12.6666L2 13.3333Z" stroke="#64748B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M8 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M5.33325 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M10.6667 8V8.00667" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <span class="ml-1 text-xs text-white">5</span>
                </div>
              </div>
            </div>
          </div>
          <div class="w-auto p-2">
            <div class="flex h-full items-center">
              <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-3-circle-border.png" alt="">
              <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</section>

Tailwind Component #98

Tailwind CSS

Trizzle

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="relative p-6 text-center bg-gray-500 rounded-xl">
          <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
          <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
          <p class="text-gray-300 mb-3">Front-end Developer</p>
          <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
          <div class="flex flex-wrap items-center -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Email</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
                <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
                </svg>
                <span class="ml-3">Call</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #99

Tailwind CSS

Trizzle

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative flex items-center justify-between p-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="hidden xl:inline-flex h-14 p-3 items-center w-full max-w-sm xl:max-w-md bg-gray-700 border border-gray-400 rounded-lg absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <a class="inline-block text-gray-400 hover:text-gray-300" href="#">
          <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.7099 19.29L16.9999 15.61C18.44 13.8144 19.1374 11.5353 18.9487 9.24133C18.76 6.94733 17.6996 4.81281 15.9854 3.27667C14.2713 1.74053 12.0337 0.919537 9.73283 0.982497C7.43194 1.04546 5.24263 1.98759 3.61505 3.61517C1.98747 5.24275 1.04534 7.43207 0.982375 9.73295C0.919414 12.0338 1.74041 14.2714 3.27655 15.9855C4.81269 17.6997 6.94721 18.7601 9.2412 18.9488C11.5352 19.1375 13.8143 18.4401 15.6099 17L19.2899 20.68C19.3829 20.7738 19.4935 20.8482 19.6153 20.8989C19.7372 20.9497 19.8679 20.9758 19.9999 20.9758C20.1319 20.9758 20.2626 20.9497 20.3845 20.8989C20.5063 20.8482 20.6169 20.7738 20.7099 20.68C20.8901 20.4936 20.9909 20.2444 20.9909 19.985C20.9909 19.7257 20.8901 19.4765 20.7099 19.29ZM9.9999 17C8.61544 17 7.26206 16.5895 6.11091 15.8203C4.95977 15.0511 4.06256 13.9579 3.53275 12.6788C3.00293 11.3997 2.86431 9.99226 3.13441 8.63439C3.4045 7.27653 4.07119 6.02925 5.05016 5.05028C6.02912 4.07131 7.27641 3.40463 8.63427 3.13453C9.99214 2.86443 11.3996 3.00306 12.6787 3.53287C13.9578 4.06268 15.051 4.95989 15.8202 6.11103C16.5894 7.26218 16.9999 8.61556 16.9999 10C16.9999 11.8565 16.2624 13.637 14.9497 14.9498C13.6369 16.2625 11.8564 17 9.9999 17Z" fill="currentColor"></path>
          </svg>
        </a>
        <input class="pl-3 bg-transparent text-gray-100 placeholder-gray-400 outline-none" id="horizontalNavInput6-1" type="text" placeholder="Search...">
      </div>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2">
      <div class="flex flex-wrap items-center -mb-2">
        <a class="inline-block mb-2 mr-6 text-gray-400 hover:text-gray-300" href="#">
          <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="inline-block mb-2 mr-8 text-gray-400 hover:text-gray-300" href="#">
          <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="group inline-flex mb-2 items-center" href="#">
          <img class="h-8 w-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men.png" alt="">
          <h4 class="text-white font-extrabold tracking-wide mr-4">John Doe</h4>
          <span class="text-gray-400 group-hover:text-gray-300">
            <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 opacity-50"></div>
    <nav class="relative flex flex-col p-8 h-full w-full bg-gray-700 overflow-y-auto">
      <div class="flex items-center justify-between mb-8">
        <a class="inline-flex items-center" href="#">
          <img class="h-10" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div class="flex w-full h-14 p-3 mb-24 items-center bg-gray-700 border border-gray-400 rounded-lg">
        <a class="inline-block text-gray-400 hover:text-gray-300" href="#">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.4733 12.5267L10.9999 10.0733C11.96 8.87627 12.4249 7.35686 12.2991 5.82753C12.1733 4.2982 11.4664 2.87519 10.3236 1.85109C9.18085 0.827001 7.68914 0.279671 6.15522 0.321644C4.62129 0.363618 3.16175 0.991705 2.0767 2.07676C0.991644 3.16181 0.363557 4.62136 0.321583 6.15528C0.27961 7.6892 0.82694 9.18091 1.85103 10.3237C2.87512 11.4664 4.29814 12.1734 5.82747 12.2992C7.3568 12.425 8.87621 11.9601 10.0733 11L12.5266 13.4533C12.5886 13.5158 12.6623 13.5654 12.7436 13.5993C12.8248 13.6331 12.9119 13.6505 12.9999 13.6505C13.0879 13.6505 13.1751 13.6331 13.2563 13.5993C13.3376 13.5654 13.4113 13.5158 13.4733 13.4533C13.5934 13.329 13.6606 13.1629 13.6606 12.99C13.6606 12.8171 13.5934 12.651 13.4733 12.5267ZM6.33327 11C5.41029 11 4.50804 10.7263 3.74061 10.2135C2.97318 9.70074 2.37504 8.97191 2.02183 8.11919C1.66862 7.26646 1.57621 6.32815 1.75627 5.42291C1.93634 4.51766 2.38079 3.68614 3.03344 3.0335C3.68608 2.38085 4.5176 1.9364 5.42285 1.75633C6.32809 1.57627 7.2664 1.66868 8.11913 2.02189C8.97185 2.3751 9.70068 2.97324 10.2135 3.74067C10.7262 4.5081 10.9999 5.41035 10.9999 6.33333C10.9999 7.57101 10.5083 8.75799 9.6331 9.63316C8.75793 10.5083 7.57095 11 6.33327 11Z" fill="currentColor"></path>
          </svg>
        </a>
        <input class="pl-3 text-sm bg-transparent text-gray-100 placeholder-gray-400 outline-none" id="horizontalNavInput5-1" type="text" placeholder="Search...">
      </div>
      <ul class="mb-10">
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Overview</a></li>
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Analytics</a></li>
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Products</a></li>
        <li class="mb-10">
          <a class="inline-flex w-full items-center justify-between text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <span>Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Customers</a></li>
      </ul>
      <a class="flex mt-auto items-center justify-between" href="#">
        <div class="flex items-center">
          <img class="h-8 w-8 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
          <h5 class="leading-none font-semibold text-gray-100">John Doe</h5>
        </div>
        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L5 5L9 1" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </nav>
  </div>
</section>

Tailwind Component #100

Tailwind CSS

Trizzle

<section x-data="{ inc: 10, show: 10, min: 10, max: 20 }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="pt-6 pb-8 bg-gray-500 rounded-xl">
      <div class="px-6">
        <div class="mb-6">
          <h4 class="text-lg text-gray-100 font-semibold mb-6">Mailing</h4>
          <div class="md:flex items-center">
            <div class="relative inline-flex items-center h-14 w-full max-w-xxs py-4 px-3 mb-5 md:mb-0 mr-6 border border-gray-400 hover:border-white focus-within:border-green-500 rounded-lg">
              <span class="absolute bottom-full left-0 ml-3 -mb-1 transform translate-y-0.5 text-xs font-semibold text-gray-100 px-1 bg-gray-500">Search</span>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.4733 12.5267L10.9999 10.0734C11.96 8.87633 12.4249 7.35692 12.2991 5.82759C12.1733 4.29826 11.4664 2.87525 10.3236 1.85115C9.18085 0.827062 7.68914 0.279732 6.15522 0.321705C4.62129 0.363679 3.16175 0.991766 2.0767 2.07682C0.991644 3.16187 0.363557 4.62142 0.321583 6.15534C0.27961 7.68926 0.82694 9.18097 1.85103 10.3237C2.87512 11.4665 4.29814 12.1735 5.82747 12.2993C7.3568 12.4251 8.87621 11.9601 10.0733 11.0001L12.5266 13.4534C12.5886 13.5159 12.6623 13.5655 12.7436 13.5993C12.8248 13.6332 12.9119 13.6506 12.9999 13.6506C13.0879 13.6506 13.1751 13.6332 13.2563 13.5993C13.3376 13.5655 13.4113 13.5159 13.4733 13.4534C13.5934 13.3291 13.6606 13.163 13.6606 12.9901C13.6606 12.8172 13.5934 12.651 13.4733 12.5267ZM6.33327 11.0001C5.41029 11.0001 4.50804 10.7264 3.74061 10.2136C2.97318 9.7008 2.37504 8.97197 2.02183 8.11925C1.66862 7.26653 1.57621 6.32821 1.75627 5.42297C1.93634 4.51773 2.38079 3.6862 3.03344 3.03356C3.68608 2.38091 4.5176 1.93646 5.42285 1.75639C6.32809 1.57633 7.2664 1.66874 8.11913 2.02195C8.97185 2.37516 9.70068 2.9733 10.2135 3.74073C10.7262 4.50816 10.9999 5.41041 10.9999 6.33339C10.9999 7.57107 10.5083 8.75805 9.6331 9.63322C8.75793 10.5084 7.57095 11.0001 6.33327 11.0001Z" fill="#3D485B"></path>
              </svg>
              <input class="block w-full ml-2 outline-none bg-transparent text-sm text-gray-100 font-medium" id="messagesInput1-1" placeholder="Search user..." type="search">
            </div>
            <a class="inline-block px-5 py-4 leading-6 text-white font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-100" href="#">Create message</a>
          </div>
        </div>
        <div class="w-full pb-6 overflow-x-auto">
          <table class="w-full min-w-max">
            <thead>
              <tr class="text-left">
                <th class="p-0">
                  <div class="h-12 py-3 px-6 rounded-l-xl bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">NAME</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="h-12 py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">SCHEDULE</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="h-12 py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">MODIFIED</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="h-12 py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">SENT</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="h-12 py-3 px-6 bg-gray-600">
                    <span class="text-xs text-gray-300 font-semibold">SENDING</span>
                  </div>
                </th>
                <th class="p-0">
                  <div class="h-12 py-3 px-6 rounded-r-xl bg-gray-600"></div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 10 }">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
              <tr :class="{ 'hidden': inc != 20 }" class="hidden">
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <div class="flex h-full items-center">
                      <div class="flex items-center justify-center w-8 h-8 mr-3 bg-gray-400 rounded-full">
                        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6668 0.666504H2.3335C1.80306 0.666504 1.29436 0.877218 0.919283 1.25229C0.54421 1.62736 0.333496 2.13607 0.333496 2.6665V9.33317C0.333496 9.8636 0.54421 10.3723 0.919283 10.7474C1.29436 11.1225 1.80306 11.3332 2.3335 11.3332H11.6668C12.1973 11.3332 12.706 11.1225 13.081 10.7474C13.4561 10.3723 13.6668 9.8636 13.6668 9.33317V2.6665C13.6668 2.13607 13.4561 1.62736 13.081 1.25229C12.706 0.877218 12.1973 0.666504 11.6668 0.666504ZM2.3335 1.99984H11.6668C11.8436 1.99984 12.0132 2.07008 12.1382 2.1951C12.2633 2.32012 12.3335 2.48969 12.3335 2.6665L7.00016 5.91984L1.66683 2.6665C1.66683 2.48969 1.73707 2.32012 1.86209 2.1951C1.98712 2.07008 2.15668 1.99984 2.3335 1.99984ZM12.3335 9.33317C12.3335 9.50998 12.2633 9.67955 12.1382 9.80458C12.0132 9.9296 11.8436 9.99984 11.6668 9.99984H2.3335C2.15668 9.99984 1.98712 9.9296 1.86209 9.80458C1.73707 9.67955 1.66683 9.50998 1.66683 9.33317V4.1865L6.6535 7.23317C6.75484 7.29168 6.8698 7.32249 6.98683 7.32249C7.10385 7.32249 7.21882 7.29168 7.32016 7.23317L12.3335 4.1865V9.33317Z" fill="#C0C8D2"></path>
                        </svg>
                      </div>
                      <span class="text-sm font-medium text-gray-100">Mailing Naming 1</span>
                    </div>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">Every 3rd day of the month</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">06/08/2022</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 px-6">
                    <span class="text-sm font-medium text-gray-100">6.5K</span>
                  </div>
                </td>
                <td class="p-0">
                  <div x-data="{ toggle: false }" class="flex items-center h-16 px-6">
                    <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-600': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-600 rounded-full">
                      <div :class="{'bg-transparent': toggle, 'bg-white': !toggle}" class="h-5 w-5 rounded-full bg-white"></div>
                      <div :class="{'bg-transparent': !toggle, 'bg-white': toggle}" class="h-5 w-5 rounded-full bg-transparent"></div>
                    </button>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-16 pl-6">
                    <a class="inline-block text-gray-300 hover:text-gray-200" href="#">
                      <svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M9 0C8.60444 0 8.21776 0.117298 7.88886 0.337061C7.55996 0.556824 7.30362 0.869181 7.15224 1.23463C7.00087 1.60009 6.96126 2.00222 7.03843 2.39018C7.1156 2.77814 7.30608 3.13451 7.58579 3.41421C7.86549 3.69392 8.22186 3.8844 8.60982 3.96157C8.99778 4.03874 9.39992 3.99913 9.76537 3.84776C10.1308 3.69638 10.4432 3.44004 10.6629 3.11114C10.8827 2.78224 11 2.39556 11 2C11 1.46957 10.7893 0.96086 10.4142 0.585787C10.0391 0.210714 9.53043 0 9 0ZM2 0C1.60444 0 1.21776 0.117298 0.88886 0.337061C0.559962 0.556824 0.303617 0.869181 0.152242 1.23463C0.000866562 1.60009 -0.0387401 2.00222 0.0384303 2.39018C0.115601 2.77814 0.306082 3.13451 0.585787 3.41421C0.865492 3.69392 1.22186 3.8844 1.60982 3.96157C1.99778 4.03874 2.39992 3.99913 2.76537 3.84776C3.13082 3.69638 3.44318 3.44004 3.66294 3.11114C3.8827 2.78224 4 2.39556 4 2C4 1.46957 3.78929 0.96086 3.41421 0.585787C3.03914 0.210714 2.53043 0 2 0ZM16 0C15.6044 0 15.2178 0.117298 14.8889 0.337061C14.56 0.556824 14.3036 0.869181 14.1522 1.23463C14.0009 1.60009 13.9613 2.00222 14.0384 2.39018C14.1156 2.77814 14.3061 3.13451 14.5858 3.41421C14.8655 3.69392 15.2219 3.8844 15.6098 3.96157C15.9978 4.03874 16.3999 3.99913 16.7654 3.84776C17.1308 3.69638 17.4432 3.44004 17.6629 3.11114C17.8827 2.78224 18 2.39556 18 2C18 1.46957 17.7893 0.96086 17.4142 0.585787C17.0391 0.210714 16.5304 0 16 0Z" fill="currentColor"></path>
                      </svg>
                    </a>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="flex flex-wrap items-center justify-between px-6 pt-8 border-t border-gray-400">
        <div class="w-full sm:w-auto mb-6 sm:mb-0">
          <div class="flex items-center justify-between">
            <p class="text-sm font-medium text-gray-400">
              <span>Showing</span>
              <span x-text="inc > show ? inc - show : 1" class="px-px text-gray-200">1</span>
              <span>to</span>
              <span x-text="inc" class="px-px text-gray-200">10</span>
              <span x-text="'of ' + max + ' results'">of 20 results</span>
            </p>
          </div>
        </div>
        <div class="w-full sm:w-auto mb-6 sm:mb-0">
          <div class="flex flex-wrap items-center -m-1.5">
            <div class="w-auto p-1.5"><a x-on:click.prevent="inc > min ? inc -= show : min" class="inline-flex items-center h-9 py-1 px-4 text-xs text-gray-400 font-semibold bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Previous</a></div>
            <div class="w-auto p-1.5"><a x-on:click.prevent="inc < max ? inc += show : max" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Next</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

UI Components – Trizzle Library

Framework

UI Library

Components

Tailwind Component #81

Tailwind Component #82

Tailwind Component #83

Your next website starts here

Tailwind Component #84

Tailwind Component #85

Tailwind Component #86

Tailwind Component #87

Tailwind Component #88

Tailwind Component #89

Tailwind Component #90

Tailwind Component #91

Tailwind Component #92

Tailwind Component #93

Tailwind Component #94

Tailwind Component #95

Tailwind Component #96

Tailwind Component #97

Tailwind Component #98

Tailwind Component #99

Tailwind Component #100

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company