UI Components – Trizzle Library

<div x-data="{ snackbar: true }" :class="{ 'hidden': !snackbar }" class="z-50 fixed left-0 bottom-0 p-4">
  <div class="max-w-sm bg-gray-500 rounded-lg shadow overflow-hidden">
    <div class="flex flex-wrap w-full h-full items-center justify-between">
      <div class="w-full sm:w-auto px-4 py-4 sm:py-0 border-b border-gray-400 sm:border-transparent">
        <span class="text-sm leading-5 text-gray-200 font-semibold">This is a default message!</span>
      </div>
      <div class="w-full sm:w-20 h-16 border-l border-transparent sm:border-gray-700">
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-400 border-b border-gray-700 font-semibold hover:bg-gray-600">No</button>
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-50 font-semibold hover:bg-gray-600">Yes</button>
      </div>
    </div>
  </div>
</div>

<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-4 justify-between items-center">
        <div class="w-auto px-4 mb-4">
          <h4 class="text-gray-100 font-bold tracking-wide">Latest Sales</h4>
        </div>
        <div class="w-auto px-4 mb-4">
          <div class="flex items-center">
            <div class="mr-4">
              <span class="inline-block w-2 h-2 mr-1 bg-blue-500 rounded-full"></span>
              <span class="text-xs text-gray-300">This year</span>
            </div>
            <div class="mr-6">
              <span class="inline-block w-2 h-2 mr-1 bg-purple-500 rounded-full"></span>
              <span class="text-xs text-gray-300">Last year</span>
            </div>
            <div class="relative inline-block bg-gray-600 rounded-xl">
              <select class="relative py-3 pl-2 pr-6 cursor-pointer bg-transparent text-xs text-gray-400 font-semibold appearance-none outline-none" style="z-index: 1;" name="" id="">
                <option class="bg-gray-600" value="1">Last 7 days</option>
                <option class="bg-gray-600" value="2">Last Month</option>
              </select>
              <span class="absolute top-1/2 right-0 mr-2 transform -translate-y-1/2" style="z-index: 0;">
                <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 1.5L5 5.5L9 1.5" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="chart mt-8 mb-3" data-type="columns-thin" data-variant="two" style="min-height: 200px;"></div>
    </div>
  </div>
</section>

<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">Shuffle Improvements</h4>
      <div class="flex items-center mb-4">
        <span class="h-2 w-2 mr-1 bg-green-500 rounded-full"></span>
        <span class="text-xs font-medium text-green-500">Planning</span>
      </div>
      <img class="block w-full h-28 object-cover rounded-md mb-3" src="trizzle-assets/images/laptop-photo-placeholder.png" alt="">
      <p class="text-xs text-gray-300 mb-4">This is an example task that can be used within a Kanban system.</p>
      <div class="pt-4 border-t border-gray-500">
        <div class="flex flex-wrap items-center justify-between -m-2">
          <div class="w-auto p-2">
            <div class="flex items-center p-2 bg-gray-500 rounded-md">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.0001 2.33337H3.00008C2.2637 2.33337 1.66675 2.93033 1.66675 3.66671V11.6667C1.66675 12.4031 2.2637 13 3.00008 13H11.0001C11.7365 13 12.3334 12.4031 12.3334 11.6667V3.66671C12.3334 2.93033 11.7365 2.33337 11.0001 2.33337Z" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.66675 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M4.3335 1V3.66667" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M1.66675 6.33337H12.3334" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6.3335 9H7.00016" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M7 9V11" stroke="#3D485B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="ml-2 text-xs font-medium text-gray-200">Jul 05</span>
            </div>
          </div>
          <div class="w-auto p-2">
            <div class="flex h-full items-center">
              <img class="w-7 h-7 rounded-full object-cover" src="trizzle-assets/images/avatar-women-circle-border.png" alt="">
              <img class="w-7 h-7 -ml-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men-2-circle-border.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</section>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="relative py-24 md:py-44 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 max-w-lg mx-auto text-center mb-12">
        <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-6">Go global with our UI Resources and solutions</p>
        <a class="inline-block w-full sm:w-auto px-16 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>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-green-500 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="M12.72 6.79L8.43001 11.09L6.78 9.44C6.69036 9.33532 6.58004 9.2503 6.45597 9.19027C6.33191 9.13025 6.19678 9.09652 6.05906 9.0912C5.92134 9.08588 5.78401 9.10909 5.65568 9.15936C5.52736 9.20964 5.41081 9.28589 5.31335 9.38335C5.2159 9.4808 5.13964 9.59735 5.08937 9.72568C5.03909 9.854 5.01589 9.99133 5.02121 10.1291C5.02653 10.2668 5.06026 10.4019 5.12028 10.526C5.1803 10.65 5.26532 10.7604 5.37 10.85L7.72 13.21C7.81344 13.3027 7.92426 13.376 8.0461 13.4258C8.16794 13.4755 8.2984 13.5008 8.43001 13.5C8.69234 13.4989 8.94374 13.3947 9.13 13.21L14.13 8.21C14.2237 8.11704 14.2981 8.00644 14.3489 7.88458C14.3997 7.76272 14.4258 7.63201 14.4258 7.5C14.4258 7.36799 14.3997 7.23728 14.3489 7.11542C14.2981 6.99356 14.2237 6.88296 14.13 6.79C13.9426 6.60375 13.6892 6.49921 13.425 6.49921C13.1608 6.49921 12.9074 6.60375 12.72 6.79ZM10 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 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 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 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18Z" fill="#08660D"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-green-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>

<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">
      <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-700 hover:bg-gray-800 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>

<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>
      </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-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 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>
  <img class="lg:hidden mt-24" src="trizzle-assets/images/placeholder-laptop-dark-light.png" alt="">
</section>

<div x-data="{ activeSlide: 1, slideCount: 6 }" 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="overflow-hidden">
        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
            <div class="inline-block w-full whitespace-normal">
                <img class="block w-full mb-8" src="trizzle-assets/images/placeholder-modal-dashboard.png" alt="">
                <div class="max-w-sm mx-auto mb-6 text-center">
                  <h4 class="text-2xl font-semibold text-gray-100 mb-4">Welcome to your dashboard</h4>
                  <p class="text-gray-300 font-medium leading-6">We’re glad to have you onboard. Here are some quick tips to get you up and running.</p>
                </div>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
                <img class="block w-full mb-8" src="trizzle-assets/images/placeholder-modal-dashboard.png" alt="">
                <div class="max-w-sm mx-auto mb-6 text-center">
                  <h4 class="text-2xl font-semibold text-gray-100 mb-4">Navigating Your Dashboard: Your Essential Guide to Success</h4>
                  <p class="text-gray-300 font-medium leading-6">Unlocking the Power Within - A Quickstart Handbook for New Users</p>
                </div>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
                <img class="block w-full mb-8" src="trizzle-assets/images/placeholder-modal-dashboard.png" alt="">
                <div class="max-w-sm mx-auto mb-6 text-center">
                  <h4 class="text-2xl font-semibold text-gray-100 mb-4">Embark on Your Dashboard Journey: A Beginner's Manual</h4>
                  <p class="text-gray-300 font-medium leading-6">Maximize Your Potential with These Proven Strategies</p>
                </div>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
                <img class="block w-full mb-8" src="trizzle-assets/images/placeholder-modal-dashboard.png" alt="">
                <div class="max-w-sm mx-auto mb-6 text-center">
                  <h4 class="text-2xl font-semibold text-gray-100 mb-4">Your Dashboard Primer: Essential Insights for Newcomers</h4>
                  <p class="text-gray-300 font-medium leading-6">Accelerate Your Progress with These Insider Tips</p>
                </div>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
                <img class="block w-full mb-8" src="trizzle-assets/images/placeholder-modal-dashboard.png" alt="">
                <div class="max-w-sm mx-auto mb-6 text-center">
                  <h4 class="text-2xl font-semibold text-gray-100 mb-4">Mastering Your Dashboard: The Ultimate Starter Kit</h4>
                  <p class="text-gray-300 font-medium leading-6">Hit the Ground Running with These Expert Recommendations</p>
                </div>
            </div>
            <div class="visibility-item inline-block w-full whitespace-normal">
                <img class="block w-full mb-8" src="trizzle-assets/images/placeholder-modal-dashboard.png" alt="">
                <div class="max-w-sm mx-auto mb-6 text-center">
                  <h4 class="text-2xl font-semibold text-gray-100 mb-4">Welcome to Your Control Center: Your Quick Guide to Getting Started</h4>
                  <p class="text-gray-300 font-medium leading-6">Harnessing the Full Potential of Your Dashboard - Tips and Tricks Inside</p>
                </div>
            </div>
        </div>
    </div>
    <div class="text-center mb-8">
      <button x-on:click="activeSlide = 1" :class="{'bg-blue-600': activeSlide == 1, 'bg-gray-600 hover:bg-gray-700': activeSlide !== 1}" class="inline-block w-3 h-3 mr-3 rounded-full bg-blue-600"></button>
      <button x-on:click="activeSlide = 2" :class="{'bg-blue-600': activeSlide == 2, 'bg-gray-600 hover:bg-gray-700': activeSlide !== 2}" class="inline-block w-3 h-3 mr-3 rounded-full bg-gray-600 hover:bg-gray-700"></button>
      <button x-on:click="activeSlide = 3" :class="{'bg-blue-600': activeSlide == 3, 'bg-gray-600 hover:bg-gray-700': activeSlide !== 3}" class="inline-block w-3 h-3 mr-3 rounded-full bg-gray-600 hover:bg-gray-700"></button>
      <button x-on:click="activeSlide = 4" :class="{'bg-blue-600': activeSlide == 4, 'bg-gray-600 hover:bg-gray-700': activeSlide !== 4}" class="inline-block w-3 h-3 mr-3 rounded-full bg-gray-600 hover:bg-gray-700"></button>
      <button x-on:click="activeSlide = 5" :class="{'bg-blue-600': activeSlide == 5, 'bg-gray-600 hover:bg-gray-700': activeSlide !== 5}" class="inline-block w-3 h-3 mr-3 rounded-full bg-gray-600 hover:bg-gray-700"></button>
      <button x-on:click="activeSlide = 6" :class="{'bg-blue-600': activeSlide == 6, 'bg-gray-600 hover:bg-gray-700': activeSlide !== 6}" class="inline-block w-3 h-3 rounded-full bg-gray-600 hover:bg-gray-700"></button>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full sm:w-1/2 px-3 mb-2 sm:mb-0"><a class="inline-block w-full py-3 px-5 text-center font-semibold leading-6 text-gray-200 bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Skip</a></div>
      <div class="w-full sm:w-1/2 px-3"><a x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="inline-block w-full py-3 px-5 text-center font-semibold leading-6 text-blue-50 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Next</a></div>
    </div>
  </div>
</div>

<section x-data="{ activeSlide: 1 }" class="relative pt-24 lg:py-44">
  <div class="hidden lg:block absolute top-0 right-0 h-full w-1/2">
    <img class="absolute top-0 left-0 h-full w-full object-cover" src="trizzle-assets/images/background-blue-gradient.png" alt="">
    <div class="relative p-20">
      <a class="inline-block mb-56" href="#">
        <img src="trizzle-assets/logos/trizzle-white-logo.svg" alt="">
      </a>
      <div class="max-w-xl">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                <div class="inline-block w-full whitespace-normal">
                    <p class="text-3xl font-semibold text-white leading-10 mb-8">Trizzle is easy to use and has a lot of great features that make it a valuable tool for any developer.</p>
                    <div class="flex items-center mb-12">
                      <img class="w-14 h-14 mr-4 rounded-full border border-blue-500" src="trizzle-assets/images/avatar-men-2.png" alt="">
                      <div>
                        <h4 class="text-lg leading-6 font-semibold text-white">John Doe</h4>
                        <span class="text-xs font-semibold text-gray-100">Front-End Developer</span>
                      </div>
                    </div>
                </div>
                <div class="visibility-item inline-block w-full whitespace-normal">
                    <p class="text-3xl font-semibold text-white leading-10 mb-8">A user-friendly toolkit packed with powerful features for developers.</p>
                    <div class="flex items-center mb-12">
                      <img class="w-14 h-14 mr-4 rounded-full border border-blue-500" src="trizzle-assets/images/avatar-men.png" alt="">
                      <div>
                        <h4 class="text-lg leading-6 font-semibold text-white">John Smith</h4>
                        <span class="text-xs font-semibold text-gray-100">UI/UX Engineer</span>
                      </div>
                    </div>
                </div>
                <div class="visibility-item inline-block w-full whitespace-normal">
                    <p class="text-3xl font-semibold text-white leading-10 mb-8">Streamlined interface with robust functionalities, perfect for developers.</p>
                    <div class="flex items-center mb-12">
                      <img class="w-14 h-14 mr-4 rounded-full border border-blue-500" src="trizzle-assets/images/avatar-men-2.png" alt="">
                      <div>
                        <h4 class="text-lg leading-6 font-semibold text-white">Jane Doe</h4>
                        <span class="text-xs font-semibold text-gray-100">Full-Stack Developer</span>
                      </div>
                    </div>
                </div>
                <div class="visibility-item inline-block w-full whitespace-normal">
                    <p class="text-3xl font-semibold text-white leading-10 mb-8">Simplified yet feature-rich platform tailored for developers' needs.</p>
                    <div class="flex items-center mb-12">
                      <img class="w-14 h-14 mr-4 rounded-full border border-blue-500" src="trizzle-assets/images/avatar-men.png" alt="">
                      <div>
                        <h4 class="text-lg leading-6 font-semibold text-white">Alex Johnson</h4>
                        <span class="text-xs font-semibold text-gray-100">Web Developer</span>
                      </div>
                    </div>
                </div>
                <div class="visibility-item inline-block w-full whitespace-normal">
                    <p class="text-3xl font-semibold text-white leading-10 mb-8">Intuitive tools and abundant features, an indispensable asset for developers.</p>
                    <div class="flex items-center mb-12">
                      <img class="w-14 h-14 mr-4 rounded-full border border-blue-500" src="trizzle-assets/images/avatar-men-2.png" alt="">
                      <div>
                        <h4 class="text-lg leading-6 font-semibold text-white">Sarah Lee</h4>
                        <span class="text-xs font-semibold text-gray-100">Software Engineer</span>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <a x-on:click.prevent="activeSlide = 1" :class="{'bg-blue-50': activeSlide == 1, 'bg-blue-400': activeSlide !== 1 }" class="inline-block w-2 h-2 mr-2 rounded-full bg-blue-50" href="#"></a>
            <a x-on:click.prevent="activeSlide = 2" :class="{'bg-blue-50': activeSlide == 2, 'bg-blue-400': activeSlide !== 2 }" class="inline-block w-2 h-2 mr-2 rounded-full bg-blue-400" href="#"></a>
            <a x-on:click.prevent="activeSlide = 3" :class="{'bg-blue-50': activeSlide == 3, 'bg-blue-400': activeSlide !== 3 }" class="inline-block w-2 h-2 mr-2 rounded-full bg-blue-400" href="#"></a>
            <a x-on:click.prevent="activeSlide = 4" :class="{'bg-blue-50': activeSlide == 4, 'bg-blue-400': activeSlide !== 4 }" class="inline-block w-2 h-2 mr-2 rounded-full bg-blue-400" href="#"></a>
            <a x-on:click.prevent="activeSlide = 5" :class="{'bg-blue-50': activeSlide == 5, 'bg-blue-400': activeSlide !== 5 }" class="inline-block w-2 h-2 rounded-full bg-blue-400" href="#"></a>
        </div>
      </div>
    </div>
  </div>
  <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>
        <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="signInInput4-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="signInInput4-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="signInInput4-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>
  <div class="lg:hidden relative mt-16">
    <img class="absolute top-0 left-0 h-full w-full object-cover" src="trizzle-assets/images/background-blue-gradient.png" alt="">
    <div class="container px-4 mx-auto">
      <div class="relative max-w-xs mx-auto py-12">
        <a class="inline-block mb-24" href="#">
          <img src="trizzle-assets/logos/trizzle-white-logo.svg" alt="">
        </a>
        <div class="max-w-xl">
          <p class="text-xl font-semibold text-white leading-10 mb-8">Trizzle is easy to use and has a lot of great features that make it a valuable tool for any developer.</p>
          <div class="flex items-center mb-12">
            <img class="w-14 h-14 mr-4 rounded-full border border-blue-500" src="trizzle-assets/images/avatar-men-2.png" alt="">
            <div>
              <h4 class="text-lg leading-6 font-semibold text-white">John Doe</h4>
              <span class="text-xs font-semibold text-gray-100">Front-End Developer</span>
            </div>
          </div>
          <div><a class="inline-block w-2 h-2 mr-2 rounded-full bg-blue-50" href="#"></a><a class="inline-block w-2 h-2 mr-2 rounded-full bg-blue-400" href="#"></a><a class="inline-block w-2 h-2 mr-2 rounded-full bg-blue-400" href="#"></a><a class="inline-block w-2 h-2 mr-2 rounded-full bg-blue-400" href="#"></a><a class="inline-block w-2 h-2 rounded-full bg-blue-400" href="#"></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ tab: 'notifications' }" class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-12 lg:mb-0">
        <div class="mb-12">
          <h3 class="text-sm font-semibold text-gray-400 mb-4">BUSINESS PROFILE</h3>
          <div class="bg-gray-500 rounded-xl overflow-hidden">
            <a x-on:click.prevent="tab = 'business-information'" :class="{'bg-blue-500 bg-opacity-20 border-blue-500': tab == 'business-information', 'bg-transparent border-transparent': tab !== 'business-information'}" class="flex group py-6 px-4 sm:px-8 items-center hover:bg-blue-500 hover:bg-opacity-20 border-l-2 border-transparent hover:border-blue-500 transition duration-200" href="#">
              <div :class="{'bg-blue-500 text-white': tab == 'business-information', 'bg-gray-600 text-blue-500': tab !== 'business-information'}" class="flex-shrink-0 flex self-start items-center justify-center w-12 h-12 mr-4 bg-gray-600 group-hover:bg-blue-500 text-blue-500 group-hover:text-blue-50 rounded-full transition duration-200">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 12.255C16.1405 13.4112 13.0844 14.0038 10 14C6.817 14 3.78 13.38 1 12.255M10 11H10.01M14 5V3C14 2.46957 13.7893 1.96086 13.4142 1.58579C13.0391 1.21071 12.5304 1 12 1H8C7.46957 1 6.96086 1.21071 6.58579 1.58579C6.21071 1.96086 6 2.46957 6 3V5H14ZM3 19H17C17.5304 19 18.0391 18.7893 18.4142 18.4142C18.7893 18.0391 19 17.5304 19 17V7C19 6.46957 18.7893 5.96086 18.4142 5.58579C18.0391 5.21071 17.5304 5 17 5H3C2.46957 5 1.96086 5.21071 1.58579 5.58579C1.21071 5.96086 1 6.46957 1 7V17C1 17.5304 1.21071 18.0391 1.58579 18.4142C1.96086 18.7893 2.46957 19 3 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h4 class="text-sm font-semibold text-gray-100 mb-1">Business Information</h4>
                <p :class="{'text-gray-200': tab == 'business-information', 'text-gray-400': tab !== 'business-information'}" class="text-xs font-medium text-gray-400 group-hover:text-gray-200 transition duration-200">Lorem ipsum dolor sit amet cosectutar</p>
              </div>
            </a>
            <a x-on:click.prevent="tab = 'finance'" :class="{'bg-blue-500 bg-opacity-20 border-blue-500': tab == 'finance', 'bg-transparent border-transparent': tab !== 'finance'}" class="flex group py-6 px-4 sm:px-8 items-center hover:bg-blue-500 hover:bg-opacity-20 border-l-2 border-transparent hover:border-blue-500 transition duration-200" href="#">
              <div :class="{'bg-blue-500 text-blue-50': tab == 'finance', 'bg-gray-600 text-blue-500': tab !== 'finance'}" class="flex-shrink-0 flex self-start items-center justify-center w-12 h-12 mr-4 bg-gray-600 group-hover:bg-blue-500 text-blue-500 group-hover:text-blue-50 rounded-full transition duration-200">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.67188 14.3298C8.67188 15.6198 9.66188 16.6598 10.8919 16.6598H13.4019C14.4719 16.6598 15.3419 15.7498 15.3419 14.6298C15.3419 13.4098 14.8119 12.9798 14.0219 12.6998L9.99187 11.2998C9.20187 11.0198 8.67188 10.5898 8.67188 9.36984C8.67188 8.24984 9.54187 7.33984 10.6119 7.33984H13.1219C14.3519 7.33984 15.3419 8.37984 15.3419 9.66984" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 6V18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h4 class="text-sm font-semibold text-gray-100 mb-1">Money, Banks, and Card</h4>
                <p :class="{'text-gray-200': tab == 'finance', 'text-gray-400': tab !== 'finance'}" class="text-xs font-medium text-gray-400 group-hover:text-gray-200 transition duration-200">Lorem ipsum dolor sit amet cosectutar</p>
              </div>
            </a>
            <a x-on:click.prevent="tab = 'notifications'" :class="{'bg-blue-500 bg-opacity-20 border-blue-500': tab == 'notifications', 'bg-transparent border-transparent': tab !== 'notifications'}" class="flex group py-6 px-4 sm:px-8 items-center bg-blue-500 bg-opacity-20 hover:bg-blue-500 hover:bg-opacity-20 border-l-2 border-blue-500 hover:border-blue-500 transition duration-200" href="#">
              <div :class="{'bg-blue-500 text-blue-50': tab == 'notifications', 'bg-gray-600 text-blue-500': tab !== 'notifications'}" class="flex-shrink-0 flex self-start items-center justify-center w-12 h-12 mr-4 bg-blue-500 group-hover:bg-blue-500 text-blue-50 group-hover:text-blue-50 rounded-full transition duration-200">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 12.255C16.1405 13.4112 13.0844 14.0038 10 14C6.817 14 3.78 13.38 1 12.255M10 11H10.01M14 5V3C14 2.46957 13.7893 1.96086 13.4142 1.58579C13.0391 1.21071 12.5304 1 12 1H8C7.46957 1 6.96086 1.21071 6.58579 1.58579C6.21071 1.96086 6 2.46957 6 3V5H14ZM3 19H17C17.5304 19 18.0391 18.7893 18.4142 18.4142C18.7893 18.0391 19 17.5304 19 17V7C19 6.46957 18.7893 5.96086 18.4142 5.58579C18.0391 5.21071 17.5304 5 17 5H3C2.46957 5 1.96086 5.21071 1.58579 5.58579C1.21071 5.96086 1 6.46957 1 7V17C1 17.5304 1.21071 18.0391 1.58579 18.4142C1.96086 18.7893 2.46957 19 3 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h4 class="text-sm font-semibold text-gray-100 mb-1">Notifications</h4>
                <p :class="{'text-gray-200': tab == 'notifications', 'text-gray-400': tab !== 'notifications'}" class="text-xs font-medium text-gray-200 group-hover:text-gray-200 transition duration-200">Lorem ipsum dolor sit amet cosectutar</p>
              </div>
            </a>
          </div>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-gray-400 mb-4">ACCOUNT AND SEVICES</h3>
          <div class="bg-gray-500 rounded-xl overflow-hidden">
            <a x-on:click.prevent="tab = 'account-access'" :class="{'bg-blue-500 bg-opacity-20 border-blue-500': tab == 'account-access', 'bg-transparent border-transparent': tab !== 'account-access'}" class="flex group py-6 px-4 sm:px-8 items-center hover:bg-blue-500 hover:bg-opacity-20 border-l-2 border-transparent hover:border-blue-500 transition duration-200" href="#">
              <div :class="{'bg-blue-500 text-blue-50': tab == 'account-access', 'bg-gray-600 text-blue-500': tab !== 'account-access'}" class="flex-shrink-0 flex self-start items-center justify-center w-12 h-12 mr-4 bg-gray-600 group-hover:bg-blue-500 text-blue-500 group-hover:text-blue-50 rounded-full transition duration-200">
                <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 9C9.20914 9 11 7.20914 11 5C11 2.79086 9.20914 1 7 1C4.79086 1 3 2.79086 3 5C3 7.20914 4.79086 9 7 9Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M1 19V17C1 15.9391 1.42143 14.9217 2.17157 14.1716C2.92172 13.4214 3.93913 13 5 13H9C10.0609 13 11.0783 13.4214 11.8284 14.1716C12.5786 14.9217 13 15.9391 13 17V19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h4 class="text-sm font-semibold text-gray-100 mb-1">Account Access</h4>
                <p :class="{'text-gray-200': tab == 'account-access', 'text-gray-400': tab !== 'account-access'}" class="text-xs font-medium text-gray-400 group-hover:text-gray-200 transition duration-200">Lorem ipsum dolor sit amet cosectutar</p>
              </div>
            </a>
            <a x-on:click.prevent="tab = 'payment'" :class="{'bg-blue-500 bg-opacity-20 border-blue-500': tab == 'payment', 'bg-transparent border-transparent': tab !== 'payment'}" class="flex group py-6 px-4 sm:px-8 items-center hover:bg-blue-500 hover:bg-opacity-20 border-l-2 border-transparent hover:border-blue-500 transition duration-200" href="#">
              <div :class="{'bg-blue-500 text-blue-50': tab == 'payment', 'bg-gray-600 text-blue-500': tab !== 'payment'}" class="flex-shrink-0 flex self-start items-center justify-center w-12 h-12 mr-4 bg-gray-600 group-hover:bg-blue-500 text-blue-500 group-hover:text-blue-50 rounded-full transition duration-200">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2 8.505H22" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6 16.505H8" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M10.5 16.505H14.5" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6.44 3.505H17.55C21.11 3.505 22 4.385 22 7.895V16.105C22 19.615 21.11 20.495 17.56 20.495H6.44C2.89 20.505 2 19.625 2 16.115V7.895C2 4.385 2.89 3.505 6.44 3.505Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h4 class="text-sm font-semibold text-gray-100 mb-1">Payment Preferance</h4>
                <p :class="{'text-gray-200': tab == 'payment', 'text-gray-400': tab !== 'payment'}" class="text-xs font-medium text-gray-400 group-hover:text-gray-200 transition duration-200">Lorem ipsum dolor sit amet cosectutar</p>
              </div>
            </a>
            <a x-on:click.prevent="tab = 'conversions'" :class="{'bg-blue-500 bg-opacity-20 border-blue-500': tab == 'conversions', 'bg-transparent border-transparent': tab !== 'conversions'}" class="flex group py-6 px-4 sm:px-8 items-center hover:bg-blue-500 hover:bg-opacity-20 border-l-2 border-transparent hover:border-blue-500 transition duration-200" href="#">
              <div :class="{'bg-blue-500 text-blue-50': tab == 'conversions', 'bg-gray-600 text-blue-500': tab !== 'conversions'}" class="flex-shrink-0 flex self-start items-center justify-center w-12 h-12 mr-4 bg-gray-600 group-hover:bg-blue-500 text-blue-500 group-hover:text-blue-50 rounded-full transition duration-200">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 5.56H22" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M14.22 2H19.78C21.56 2 22 2.44 22 4.2V8.31C22 10.07 21.56 10.51 19.78 10.51H14.22C12.44 10.51 12 10.07 12 8.31V4.2C12 2.44 12.44 2 14.22 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M2 17.06H12" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M4.22 13.5H9.78C11.56 13.5 12 13.94 12 15.7V19.81C12 21.57 11.56 22.01 9.78 22.01H4.22C2.44 22.01 2 21.57 2 19.81V15.7C2 13.94 2.44 13.5 4.22 13.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M22 15C22 18.87 18.87 22 15 22L16.05 20.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M2 9C2 5.13 5.13 2 9 2L7.95001 3.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h4 class="text-sm font-semibold text-gray-100 mb-1">Auto Conversions</h4>
                <p :class="{'text-gray-200': tab == 'conversions', 'text-gray-400': tab !== 'conversions'}" class="text-xs font-medium text-gray-400 group-hover:text-gray-200 transition duration-200">Lorem ipsum dolor sit amet cosectutar</p>
              </div>
            </a>
            <a x-on:click.prevent="tab = 'reports'" :class="{'bg-blue-500 bg-opacity-20 border-blue-500': tab == 'reports', 'bg-transparent border-transparent': tab !== 'reports'}" class="flex group py-6 px-4 sm:px-8 items-center hover:bg-blue-500 hover:bg-opacity-20 border-l-2 border-transparent hover:border-blue-500 transition duration-200" href="#">
              <div :class="{'bg-blue-500 text-blue-50': tab == 'reports', 'bg-gray-600 text-blue-500': tab !== 'reports'}" class="flex-shrink-0 flex self-start items-center justify-center w-12 h-12 mr-4 bg-gray-600 group-hover:bg-blue-500 text-blue-500 group-hover:text-blue-50 rounded-full transition duration-200">
                <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 1V5C10 5.26522 10.1054 5.51957 10.2929 5.70711C10.4804 5.89464 10.7348 6 11 6H15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M13 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H10L15 6V17C15 17.5304 14.7893 18.0391 14.4142 18.4142C14.0391 18.7893 13.5304 19 13 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M5 7H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M5 11H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M5 15H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div>
                <h4 class="text-sm font-semibold text-gray-100 mb-1">Statement and Reports</h4>
                <p :class="{'text-gray-200': tab == 'reports', 'text-gray-400': tab !== 'reports'}" class="text-xs font-medium text-gray-400 group-hover:text-gray-200 transition duration-200">Lorem ipsum dolor sit amet cosectutar</p>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-3">
        <div class="h-full py-8 px-6 sm:px-10 bg-gray-500 rounded-xl">
          <h2 x-show="tab == 'business-information'" class="visibility-item text-3xl text-gray-100 font-semibold mb-6">Business information</h2>
          <h2 x-show="tab == 'finance'" class="visibility-item text-3xl text-gray-100 font-semibold mb-6">Money, Banks, and Card</h2>
          <h2 x-show="tab == 'notifications'" class="text-3xl text-gray-100 font-semibold mb-6">Notifications</h2>
          <h2 x-show="tab == 'account-access'" class="visibility-item text-3xl text-gray-100 font-semibold mb-6">Account Access</h2>
          <h2 x-show="tab == 'payment'" class="visibility-item text-3xl text-gray-100 font-semibold mb-6">Payment Preference</h2>
          <h2 x-show="tab == 'conversions'" class="visibility-item text-3xl text-gray-100 font-semibold mb-6">Auto Conversions</h2>
          <h2 x-show="tab == 'reports'" class="visibility-item text-3xl text-gray-100 font-semibold mb-6">Statement and Reports</h2>
          <div class="flex items-center justify-between mb-8 -mx-4">
            <div class="max-w-md px-4">
              <h4 class="text-gray-50 font-bold">Notifications</h4>
              <p class="text-xs font-medium leading-normal text-gray-300">Manage alerts sent when you change account information, or when you have discounts or special offers.</p>
            </div>
            <div x-data="{ toggle: false }" class="px-4">
              <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>
          </div>
          <div x-show="tab ==" class="flex items-center justify-between mb-8 -mx-4">
            <div class="max-w-md px-4">
              <h4 class="text-gray-50 font-bold">Install Payment Notifications</h4>
              <p class="text-xs font-medium leading-normal text-gray-300">Integrate Overpay payment notifications with your website.</p>
            </div>
            <div x-data="{ toggle: false }" class="px-4">
              <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>
          </div>
          <div class="flex items-center justify-between mb-8 -mx-4">
            <div class="max-w-md px-4">
              <h4 class="text-gray-50 font-bold">Successfull Payments</h4>
              <p class="text-xs font-medium leading-normal text-gray-300">Receive a notifications for every successfull payments.</p>
            </div>
            <div x-data="{ toggle: false }" class="px-4">
              <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>
          </div>
          <div class="flex items-center justify-between mb-8 -mx-4">
            <div class="max-w-md px-4">
              <h4 class="text-gray-50 font-bold">Application Fees</h4>
              <p class="text-xs font-medium leading-normal text-gray-300">Receive a notifications each time you collect a fee form a Account.</p>
            </div>
            <div x-data="{ toggle: false }" class="px-4">
              <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>
          </div>
          <div class="flex items-center justify-between mb-8 -mx-4">
            <div class="max-w-md px-4">
              <h4 class="text-gray-50 font-bold">Payment Reviews</h4>
              <p class="text-xs font-medium leading-normal text-gray-300">Receive a notifications if a payment is marked as elevated risk by Stripe or a custom rule.</p>
            </div>
            <div x-data="{ toggle: false }" class="px-4">
              <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>
          </div>
          <div class="flex items-center justify-between mb-8 -mx-4">
            <div class="max-w-md px-4">
              <h4 class="text-gray-50 font-bold">Invoice Mispayments</h4>
              <p class="text-xs font-medium leading-normal text-gray-300">Receive a notifications if a customer sends an incorrect amount to pay their invoice.</p>
            </div>
            <div x-data="{ toggle: false }" class="px-4">
              <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>
          </div>
          <div class="flex items-center justify-between mb-8 -mx-4">
            <div class="max-w-md px-4">
              <h4 class="text-gray-50 font-bold">Bank Accounts</h4>
              <p class="text-xs font-medium leading-normal text-gray-300">Receive a notifications for important changes to your bank accounts or for micro-deposit verifications related events.</p>
            </div>
            <div x-data="{ toggle: false }" class="px-4">
              <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>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="relative py-12 px-6 bg-blue-500 rounded-2xl overflow-hidden">
      <img class="absolute top-0 left-0 h-full w-full object-cover" src="trizzle-assets/images/banner-triangle-circle-back.png" alt="">
      <div class="relative max-w-sm md:max-w-xl mx-auto text-center mb-12">
        <h3 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4">Ideal banner asset for your dashboard project</h3>
        <p class="font-medium text-blue-200 mb-6">Go global with our UI Resources and solutions</p>
        <a class="inline-block w-full sm:w-auto px-16 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>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-gray-500 rounded-xl">
      <h4 class="text-gray-100 font-bold tracking-wide mb-8">Traffic by Device</h4>
      <div class="chart mb-10" data-type="donut" style="min-height: 180px;"></div>
      <div class="flex flex-wrap px-4 items-center justify-between">
        <div class="text-center">
          <span class="inline-block w-2 h-2 mb-2 bg-blue-500 rounded-full"></span>
          <h6 class="text-xs text-gray-300 font-semibold">Desktop</h6>
          <h5 class="text-lg sm:text-2xl text-gray-100 font-semibold">65%</h5>
        </div>
        <div class="text-center">
          <span class="inline-block w-2 h-2 mb-2 bg-purple-500 rounded-full"></span>
          <h6 class="text-xs text-gray-300 font-semibold">Mobile</h6>
          <h5 class="text-lg sm:text-2xl text-gray-100 font-semibold">20%</h5>
        </div>
        <div class="text-center">
          <span class="inline-block w-2 h-2 mb-2 bg-yellow-500 rounded-full"></span>
          <h6 class="text-xs text-gray-300 font-semibold">Tablet</h6>
          <h5 class="text-lg sm:text-2xl text-gray-100 font-semibold">15%</h5>
        </div>
      </div>
    </div>
  </div>
</section>

<div x-data="{ snackbar: true }" :class="{ 'hidden': !snackbar }" class="z-50 fixed left-0 bottom-0 p-4">
  <div class="max-w-sm bg-gray-500 rounded-lg shadow overflow-hidden">
    <div class="flex flex-wrap w-full h-full items-center justify-between">
      <div class="w-full sm:w-auto px-4 py-4 sm:py-0 border-b border-gray-700 sm:border-transparent">
        <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-blue-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 fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0ZM11 14C11 14.5523 10.5523 15 10 15C9.44771 15 9 14.5523 9 14V9C9 8.44771 9.44771 8 10 8C10.5523 8 11 8.44771 11 9V14ZM9 6C9 6.55228 9.44771 7 10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6Z" fill="#1890FF"></path>
            </svg>
          </div>
          <span class="text-sm leading-5 text-gray-200 font-semibold">This is an info message!</span>
        </div>
      </div>
      <div class="w-full sm:w-20 h-16 border-l border-transparent sm:border-gray-700">
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-400 border-b border-gray-700 font-semibold hover:bg-gray-600">No</button>
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-50 font-semibold hover:bg-gray-600">Yes</button>
      </div>
    </div>
  </div>
</div>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-yellow-500 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="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0005 15C11.8027 15 11.6093 15.0587 11.4449 15.1686C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8001 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4805 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47003C14.3603 2.00354 13.9802 1.61498 13.5196 1.3445C13.0591 1.07401 12.5346 0.931396 12.0005 0.931396C11.4663 0.931396 10.9419 1.07401 10.4813 1.3445C10.0207 1.61498 9.64065 2.00354 9.38046 2.47003L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0166 1.34914 19.4761C1.60883 19.9356 1.98516 20.3185 2.44014 20.5861C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0053 21.1164 20.8689 21.5784 20.6049C22.0403 20.341 22.4238 19.9589 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9814C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.626 20.7249 18.7556 20.5701 18.8453C20.4154 18.935 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.935 3.43077 18.8453C3.27599 18.7556 3.14811 18.626 3.06046 18.47C2.97269 18.318 2.92648 18.1456 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47003C11.1444 3.30623 11.2719 3.16876 11.4289 3.07277C11.5859 2.97678 11.7664 2.92599 11.9505 2.92599C12.1345 2.92599 12.315 2.97678 12.472 3.07277C12.629 3.16876 12.7565 3.30623 12.8405 3.47003L20.8905 17.47C20.9897 17.6199 21.0467 17.7937 21.0555 17.9732C21.0643 18.1527 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7.00003C11.7352 7.00003 11.4809 7.10538 11.2933 7.29292C11.1058 7.48046 11.0005 7.73481 11.0005 8.00003V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8947 11.7352 13 12.0005 13C12.2657 13 12.52 12.8947 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8.00003C13.0005 7.73481 12.8951 7.48046 12.7076 7.29292C12.52 7.10538 12.2657 7.00003 12.0005 7.00003Z" fill="#7A4F01"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-yellow-900 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>

<div 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 pt-6 px-6 pb-8 bg-gray-500 rounded-xl">
    <div class="relative h-28 mb-20 rounded-xl bg-gray-600">
      <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 w-24 h-24" src="trizzle-assets/images/avatar-shoe.png" alt="">
    </div>
    <div class="max-w-sm mx-auto mb-10 text-center">
      <h4 class="text-2xl font-semibold text-gray-100 mb-4">AIR 1 MID - High sneakers</h4>
      <p class="text-gray-300 font-medium leading-6">The Air Jordan 1 Mid brings full-court style and premium comfort to an iconic look</p>
    </div>
    <form action="">
      <div class="relative w-full h-14 py-4 px-3 mb-10 border border-gray-400 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-500">Email</span>
        <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput7-1" type="email">
      </div>
      <div class="flex flex-wrap -mx-3 mb-10">
        <div class="w-full sm:w-2/4 px-3 mb-10 sm:mb-0">
          <div class="relative w-full h-14 py-4 px-3 border border-gray-400 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-500">Card number</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput7-2" type="text">
          </div>
        </div>
        <div class="w-1/2 sm:w-1/4 px-3">
          <div class="relative w-full h-14 py-4 px-3 border border-gray-400 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-500">Expiry</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput7-3" type="text">
          </div>
        </div>
        <div class="w-1/2 sm:w-1/4 px-3">
          <div class="relative w-full h-14 py-4 px-3 border border-gray-400 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-500">CVC</span>
            <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput7-4" type="text">
          </div>
        </div>
      </div>
      <div class="relative w-full h-14 py-4 px-3 mb-10 border border-gray-400 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-500">Cardholder name</span>
        <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput7-5" type="text">
      </div>
      <div class="relative w-full h-14 py-4 px-3 mb-6 border border-gray-400 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-500">Address</span>
        <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="modalInput7-5" type="text">
      </div>
      <button class="block w-full h-12 py-2 px-6 text-center text-blue-50 font-semibold leading-6 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Pay $95.65</button>
    </form>
  </div>
</div>

<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">
        <div class="w-full sm:w-1/2 md:w-auto mb-6 md:mb-0">
          <div x-data="{ toggle: false }" class="flex items-center gap-2">
            <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>
            <span class="text-sm text-gray-200 font-medium">Dense</span>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-auto ml-auto mb-6 md:mb-0 md:mr-6">
          <div class="flex items-center justify-end ml-auto">
            <div class="sm:mr-8">
              <span class="text-sm text-gray-400 font-medium">Rows per page</span>
              <select class="text-sm text-gray-200 font-medium bg-transparent outline-none" name="" id="">
                <option value="">1</option>
              </select>
            </div>
            <span x-text="(inc > show ? inc - show : 1) + '-' + inc + ' of ' + max" class="hidden sm:inline text-sm text-gray-400 font-medium">1-10 of 50</span>
          </div>
        </div>
        <div class="w-full md:w-auto">
          <div class="flex items-center justify-end">
            <a x-on:click.prevent="inc > min ? inc -= show : min" class="inline-flex items-center justify-center w-12 h-8 mr-2 text-gray-300 bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
              <svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.52655 4.00001L4.88655 1.64001C5.01072 1.5151 5.08041 1.34613 5.08041 1.17001C5.08041 0.993883 5.01072 0.824915 4.88655 0.700006C4.82457 0.637521 4.75084 0.587925 4.6696 0.554079C4.58836 0.520233 4.50122 0.502808 4.41321 0.502808C4.32521 0.502808 4.23807 0.520233 4.15683 0.554079C4.07559 0.587925 4.00186 0.637521 3.93988 0.700006L1.11321 3.52667C1.05073 3.58865 1.00113 3.66238 0.967287 3.74362C0.933441 3.82486 0.916016 3.912 0.916016 4.00001C0.916016 4.08801 0.933441 4.17515 0.967287 4.25639C1.00113 4.33763 1.05073 4.41136 1.11321 4.47334L3.93988 7.33334C4.00217 7.39513 4.07605 7.44401 4.15728 7.47719C4.2385 7.51036 4.32548 7.52718 4.41321 7.52667C4.50095 7.52718 4.58793 7.51036 4.66915 7.47719C4.75038 7.44401 4.82425 7.39513 4.88655 7.33334C5.01072 7.20843 5.08041 7.03946 5.08041 6.86334C5.08041 6.68722 5.01072 6.51825 4.88655 6.39334L2.52655 4.00001Z" fill="#919EB0"></path>
              </svg>
            </a>
            <a x-on:click.prevent="inc < max ? inc += show : max" class="inline-flex items-center justify-center w-12 h-8 text-gray-300 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
              <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.36015 4.52667L1.58682 0.760004C1.52484 0.697518 1.45111 0.647922 1.36987 0.614077C1.28863 0.580231 1.20149 0.562805 1.11348 0.562805C1.02548 0.562805 0.938339 0.580231 0.8571 0.614077C0.77586 0.647922 0.702126 0.697518 0.640151 0.760004C0.515983 0.884912 0.446289 1.05388 0.446289 1.23C0.446289 1.40613 0.515983 1.5751 0.640151 1.7L3.94015 5.03334L0.640151 8.33334C0.515983 8.45824 0.446289 8.62721 0.446289 8.80334C0.446289 8.97946 0.515983 9.14843 0.640151 9.27334C0.701894 9.33633 0.775524 9.38644 0.856774 9.42077C0.938024 9.4551 1.02528 9.47297 1.11348 9.47334C1.20169 9.47297 1.28894 9.4551 1.37019 9.42077C1.45144 9.38644 1.52507 9.33633 1.58682 9.27334L5.36015 5.50667C5.42782 5.44424 5.48183 5.36847 5.51876 5.28414C5.5557 5.19981 5.57477 5.10874 5.57477 5.01667C5.57477 4.9246 5.5557 4.83353 5.51876 4.7492C5.48183 4.66487 5.42782 4.5891 5.36015 4.52667Z" fill="#F4F6FF"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <div class="mb-8 border-b border-gray-400">
        <div class="flex flex-wrap justify-between items-center -mx-4 pb-6">
          <div class="w-full md:w-auto px-4 mb-5 md:mb-0">
            <div class="flex items-center">
              <img class="block w-16 h-16 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
              <div class="ml-4">
                <h4 class="text-sm text-gray-100 font-semibold mb-1">Your Avatar</h4>
                <p class="text-xs font-medium leading-normal text-gray-400">Profile picture size: 400x400px</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-auto px-4">
            <button class="inline-block h-14 py-4 px-6 text-center text-blue-50 font-semibold leading-6 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Upload new Avatar</button>
          </div>
        </div>
      </div>
      <form class="mb-8" action="">
        <div class="flex flex-wrap -mx-4 -mb-6">
          <div class="w-full md:w-1/2 px-4 mb-6">
            <div class="relative w-full h-14 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-300 px-1 bg-gray-600">First Name</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="accountInput1-1" type="text" placeholder="John">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-6">
            <div class="relative w-full h-14 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-300 px-1 bg-gray-600">Last Name</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="accountInput1-2" type="text" placeholder="Doe">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-6">
            <div class="relative w-full h-14 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-300 px-1 bg-gray-600">Email Address</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="accountInput1-3" type="email" placeholder="johndoe@trizzle.ui">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-6">
            <div class="relative w-full h-14 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-300 px-1 bg-gray-600">Phone</span>
              <input class="block w-full outline-none bg-transparent text-sm text-gray-100 font-medium" id="accountInput1-4" type="text" placeholder="+48 664 341 345">
            </div>
          </div>
          <div class="w-full px-4 mb-6">
            <button class="inline-block h-14 py-4 px-12 text-center text-white font-bold leading-6 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200">Save changes</button>
          </div>
        </div>
      </form>
      <div class="py-12 px-4 md:px-10 mb-10 bg-gray-500 rounded-xl">
        <div class="flex items-center justify-between mb-12 -mx-4">
          <div class="max-w-md px-4">
            <h4 class="text-gray-50 font-bold">Announcements</h4>
            <p class="text-xs font-medium leading-normal text-gray-300">Occasional announcments of new features</p>
          </div>
          <div x-data="{ toggle: false }" class="px-4">
            <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>
        </div>
        <div class="flex items-center justify-between mb-12 -mx-4">
          <div class="max-w-md px-4">
            <h4 class="text-gray-50 font-bold">Feedback requests</h4>
            <p class="text-xs font-medium leading-normal text-gray-300">Occasional requests for feedback</p>
          </div>
          <div x-data="{ toggle: false }" class="px-4">
            <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>
        </div>
        <div class="flex items-center justify-between -mx-4">
          <div class="max-w-md px-4">
            <h4 class="text-gray-50 font-bold">Billing and account</h4>
            <p class="text-xs font-medium leading-normal text-gray-300">Transactional emails and account notifications</p>
          </div>
          <div x-data="{ toggle: false }" class="px-4">
            <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>
        </div>
      </div>
      <div class="pb-10 mb-10 border-b border-gray-400">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
            <div class="max-w-xs">
              <h4 class="text-gray-50 font-bold mb-1">Public profile</h4>
              <p class="text-xs text-gray-300 leading-normal font-medium mb-4">When this is on, peoiple on the platform can find an view your profile gobally</p>
              <div class="flex items-center">
                <button x-data="{ toggle: false }" x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-400': !toggle}" class="flex items-center justify-center h-6 w-11 mr-3 bg-gray-400 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>
                <span class="text-xs text-gray-300 font-medium">Currently you are visible</span>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4">
            <div class="max-w-xs">
              <h4 class="text-gray-50 font-bold mb-1">Read receipt</h4>
              <p class="text-xs text-gray-300 leading-normal font-medium mb-4">When this is on, peoiple on the platform can find an view your profile gobally</p>
              <div class="flex items-center">
                <button x-data="{ toggle: false }" x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-400': !toggle}" class="flex items-center justify-center h-6 w-11 mr-3 bg-gray-400 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>
                <span class="text-xs text-gray-300 font-medium">Read receipts are off</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap justify-between items-center -mx-4">
        <div class="w-full md:w-auto px-4 mb-6 md:mb-0">
          <div class="max-w-xs">
            <h4 class="text-gray-50 font-bold mb-1">Delete your account</h4>
            <p class="text-xs text-gray-300 leading-normal font-medium">Before deleting your account, please note that if you detete your account, Trizzle cannot recover it</p>
          </div>
        </div>
        <div class="w-full md:w-auto px-4">
          <button class="inline-block py-2 px-5 text-center text-white font-semibold leading-6 bg-red-500 hover:bg-red-600 rounded-lg transition duration-200">Delete</button>
        </div>
      </div>
    </div>
  </div>
</section>

<div 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" x-data="{ payment: 'visa' }">
  <div class="max-w-xl w-full mx-auto pt-6 px-6 pb-8 bg-gray-500 rounded-xl">
    <div class="flex flex-wrap items-center mb-6">
      <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="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5 10H8C8.26522 10 8.51957 9.89464 8.70711 9.70711C8.89464 9.51957 9 9.26522 9 9C9 8.73478 8.89464 8.48043 8.70711 8.29289C8.51957 8.10536 8.26522 8 8 8H5C4.73478 8 4.48043 8.10536 4.29289 8.29289C4.10536 8.48043 4 8.73478 4 9C4 9.26522 4.10536 9.51957 4.29289 9.70711C4.48043 9.89464 4.73478 10 5 10ZM17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V12C0 12.7956 0.316071 13.5587 0.87868 14.1213C1.44129 14.6839 2.20435 15 3 15H17C17.7956 15 18.5587 14.6839 19.1213 14.1213C19.6839 13.5587 20 12.7956 20 12V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM18 12C18 12.2652 17.8946 12.5196 17.7071 12.7071C17.5196 12.8946 17.2652 13 17 13H3C2.73478 13 2.48043 12.8946 2.29289 12.7071C2.10536 12.5196 2 12.2652 2 12V6H18V12ZM18 4H2V3C2 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 3V4Z" fill="#194BFB"></path>
        </svg>
      </div>
      <div class="w-full sm:w-auto">
        <h4 class="text-xl text-gray-100 leading-6 font-semibold">Change your payment account</h4>
        <span class="text-xs text-gray-300 font-semibold">Update your plan payment details</span>
      </div>
    </div>
    <div class="relative mb-4 bg-gray-600 border-2 border-blue-500 rounded-xl border-transparent cursor-pointer" :class="{'border-blue-500': payment == 'visa'}" x-on:click="payment = 'visa'">
      <div class="absolute top-0 right-0 m-6 w-6 h-6">
        <input type="checkbox">
        <div class="absolute top-0 left-0 -ml-1 flex items-center justify-center w-6 h-6 rounded-full" :class="payment == 'visa' ? 'bg-blue-500' : 'bg-gray-600 border border-gray-400'">
          <svg x-show="payment == 'visa'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.473 4.80657C12.411 4.74409 12.3373 4.69449 12.256 4.66065C12.1748 4.6268 12.0876 4.60938 11.9996 4.60938C11.9116 4.60938 11.8245 4.6268 11.7433 4.66065C11.662 4.69449 11.5883 4.74409 11.5263 4.80657L6.55964 9.77991L4.47297 7.68657C4.40863 7.62441 4.33267 7.57554 4.24943 7.54274C4.16619 7.50993 4.07731 7.49385 3.98786 7.49539C3.8984 7.49694 3.81013 7.51609 3.72808 7.55176C3.64602 7.58742 3.5718 7.63889 3.50964 7.70324C3.44748 7.76759 3.39861 7.84355 3.3658 7.92679C3.333 8.01002 3.31691 8.09891 3.31846 8.18836C3.32001 8.27781 3.33916 8.36609 3.37482 8.44814C3.41049 8.53019 3.46196 8.60441 3.52631 8.66657L6.08631 11.2266C6.14828 11.2891 6.22202 11.3387 6.30326 11.3725C6.3845 11.4063 6.47163 11.4238 6.55964 11.4238C6.64765 11.4238 6.73479 11.4063 6.81603 11.3725C6.89727 11.3387 6.971 11.2891 7.03297 11.2266L12.473 5.78657C12.5406 5.72415 12.5946 5.64838 12.6316 5.56404C12.6685 5.47971 12.6876 5.38864 12.6876 5.29657C12.6876 5.20451 12.6685 5.11344 12.6316 5.0291C12.5946 4.94477 12.5406 4.869 12.473 4.80657Z" fill="white"></path>
          </svg>
        </div>
      </div>
      <div class="pt-6 px-6 pb-5">
        <div class="flex flex-wrap items-start">
          <img class="mr-4" src="trizzle-assets/logos/visa-card-white-logo.png" alt="">
          <div class="w-full sm:w-auto">
            <h5 class="text-sm font-semibold leading-5 text-gray-300">Visa ending in 1234</h5>
            <span class="block text-xs font-medium text-gray-300 mb-3">Expiry 10/2025</span>
            <div><a class="inline-block py-1 px-2 mr-3 text-xs font-semibold text-gray-300 bg-gray-500 hover:bg-gray-700 rounded-lg" href="#">Set as default</a><a class="inline-block py-1 px-2 mr-3 text-xs font-semibold text-gray-300 bg-gray-500 hover:bg-gray-700 rounded-lg" href="#">Edit</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="relative mb-4 bg-gray-600 border-2 border-transparent rounded-xl cursor-pointer" :class="{'border-blue-500': payment == 'mastercard'}" x-on:click="payment = 'mastercard'">
        <div class="absolute top-0 right-0 m-6 w-6 h-6">
            <input type="checkbox">
            <div class="absolute top-0 left-0 -ml-1 flex items-center justify-center w-6 h-6 rounded-full" :class="payment == 'mastercard' ? 'bg-blue-500' : 'bg-gray-600 border border-gray-400'">
              <svg x-show="payment == 'mastercard'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.473 4.80657C12.411 4.74409 12.3373 4.69449 12.256 4.66065C12.1748 4.6268 12.0876 4.60938 11.9996 4.60938C11.9116 4.60938 11.8245 4.6268 11.7433 4.66065C11.662 4.69449 11.5883 4.74409 11.5263 4.80657L6.55964 9.77991L4.47297 7.68657C4.40863 7.62441 4.33267 7.57554 4.24943 7.54274C4.16619 7.50993 4.07731 7.49385 3.98786 7.49539C3.8984 7.49694 3.81013 7.51609 3.72808 7.55176C3.64602 7.58742 3.5718 7.63889 3.50964 7.70324C3.44748 7.76759 3.39861 7.84355 3.3658 7.92679C3.333 8.01002 3.31691 8.09891 3.31846 8.18836C3.32001 8.27781 3.33916 8.36609 3.37482 8.44814C3.41049 8.53019 3.46196 8.60441 3.52631 8.66657L6.08631 11.2266C6.14828 11.2891 6.22202 11.3387 6.30326 11.3725C6.3845 11.4063 6.47163 11.4238 6.55964 11.4238C6.64765 11.4238 6.73479 11.4063 6.81603 11.3725C6.89727 11.3387 6.971 11.2891 7.03297 11.2266L12.473 5.78657C12.5406 5.72415 12.5946 5.64838 12.6316 5.56404C12.6685 5.47971 12.6876 5.38864 12.6876 5.29657C12.6876 5.20451 12.6685 5.11344 12.6316 5.0291C12.5946 4.94477 12.5406 4.869 12.473 4.80657Z" fill="white"></path>
              </svg>
            </div>
          </div>
      <div class="pt-6 px-6 pb-5">
        <div class="flex flex-wrap items-start">
          <img class="mr-4 mb-1" src="trizzle-assets/logos/paypal-logo-white.png" alt="">
          <div class="w-full sm:w-auto">
            <h5 class="text-sm font-semibold leading-5 text-gray-300">Mastercard ending in 1234</h5>
            <span class="block text-xs font-medium text-gray-300 mb-3">Expiry 10/2025</span>
            <div><a class="inline-block py-1 px-2 mr-3 text-xs font-semibold text-gray-300 bg-gray-500 hover:bg-gray-700 rounded-lg" href="#">Set as default</a><a class="inline-block py-1 px-2 mr-3 text-xs font-semibold text-gray-300 bg-gray-500 hover:bg-gray-700 rounded-lg" href="#">Edit</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="relative mb-6 bg-gray-600 rounded-xl border-2 border-transparent cursor-pointer" :class="{'border-blue-500': payment == 'paypal'}" x-on:click="payment = 'paypal'">
      <div class="absolute top-0 right-0 m-6 w-6 h-6">
        <input type="checkbox">
        <div class="absolute top-0 left-0 -ml-1 flex items-center justify-center w-6 h-6 rounded-full" :class="payment == 'paypal' ? 'bg-blue-500' : 'bg-gray-600 border border-gray-400'">
            <svg x-show="payment == 'paypal'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.473 4.80657C12.411 4.74409 12.3373 4.69449 12.256 4.66065C12.1748 4.6268 12.0876 4.60938 11.9996 4.60938C11.9116 4.60938 11.8245 4.6268 11.7433 4.66065C11.662 4.69449 11.5883 4.74409 11.5263 4.80657L6.55964 9.77991L4.47297 7.68657C4.40863 7.62441 4.33267 7.57554 4.24943 7.54274C4.16619 7.50993 4.07731 7.49385 3.98786 7.49539C3.8984 7.49694 3.81013 7.51609 3.72808 7.55176C3.64602 7.58742 3.5718 7.63889 3.50964 7.70324C3.44748 7.76759 3.39861 7.84355 3.3658 7.92679C3.333 8.01002 3.31691 8.09891 3.31846 8.18836C3.32001 8.27781 3.33916 8.36609 3.37482 8.44814C3.41049 8.53019 3.46196 8.60441 3.52631 8.66657L6.08631 11.2266C6.14828 11.2891 6.22202 11.3387 6.30326 11.3725C6.3845 11.4063 6.47163 11.4238 6.55964 11.4238C6.64765 11.4238 6.73479 11.4063 6.81603 11.3725C6.89727 11.3387 6.971 11.2891 7.03297 11.2266L12.473 5.78657C12.5406 5.72415 12.5946 5.64838 12.6316 5.56404C12.6685 5.47971 12.6876 5.38864 12.6876 5.29657C12.6876 5.20451 12.6685 5.11344 12.6316 5.0291C12.5946 4.94477 12.5406 4.869 12.473 4.80657Z" fill="white"></path>
            </svg>
        </div>
      </div>
      <div class="pt-6 px-6 pb-5">
        <div class="flex flex-wrap items-start">
          <img class="mr-4 mb-1" src="trizzle-assets/logos/mastercard-logo-white.png" alt="">
          <div class="w-full sm:w-auto">
            <h5 class="text-sm font-semibold leading-5 text-gray-300">Visa ending in 1234</h5>
            <span class="block text-xs font-medium text-gray-300 mb-3">Expiry 10/2025</span>
            <div><a class="inline-block py-1 px-2 mr-3 text-xs font-semibold text-gray-300 bg-gray-500 hover:bg-gray-700 rounded-lg" href="#">Set as default</a><a class="inline-block py-1 px-2 mr-3 text-xs font-semibold text-gray-300 bg-gray-500 hover:bg-gray-700 rounded-lg" href="#">Edit</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full sm:w-1/2 px-3 mb-2 sm:mb-0"><a class="inline-block w-full py-3 px-5 text-center font-semibold leading-6 text-gray-200 bg-gray-600 hover:bg-gray-700 rounded-lg transition duration-200" href="#">Cancel</a></div>
      <div class="w-full sm:w-1/2 px-3"><a class="inline-block w-full py-3 px-5 text-center font-semibold leading-6 text-blue-50 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">Confirm</a></div>
    </div>
  </div>
</div>

<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">
      <div class="flex flex-wrap items-center">
        <div class="w-full sm:w-1/2 md:w-auto mb-6 md:mb-0">
          <div x-data="{ toggle: false }" class="flex items-center gap-2">
            <button x-on:click="toggle = !toggle" :class="{'bg-blue-500': toggle, 'bg-gray-400': !toggle}" class="flex items-center justify-center h-6 w-11 bg-gray-400 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>
            <span class="text-sm text-gray-200 font-medium">Dense</span>
          </div>
        </div>
        <div class="w-full sm:w-1/2 md:w-auto ml-auto mb-6 md:mb-0 md:mr-6">
          <div class="flex items-center justify-end ml-auto">
            <div class="sm:mr-8">
              <span class="text-sm text-gray-400 font-medium">Rows per page</span>
              <select class="text-sm text-gray-200 font-medium bg-transparent outline-none" name="" id="">
                <option value="">1</option>
              </select>
            </div>
            <span x-text="(inc > show ? inc - show : 1) + '-' + inc + ' of ' + max" class="hidden sm:inline text-sm text-gray-400 font-medium">1-10 of 50</span>
          </div>
        </div>
        <div class="w-full md:w-auto">
          <div class="flex items-center justify-end">
            <a x-on:click.prevent="inc > min ? inc -= show : min" class="inline-flex items-center justify-center w-12 h-8 mr-2 text-gray-300 bg-gray-500 hover:bg-gray-700 rounded-lg transition duration-200" href="#">
              <svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.52655 4.00001L4.88655 1.64001C5.01072 1.5151 5.08041 1.34613 5.08041 1.17001C5.08041 0.993883 5.01072 0.824915 4.88655 0.700006C4.82457 0.637521 4.75084 0.587925 4.6696 0.554079C4.58836 0.520233 4.50122 0.502808 4.41321 0.502808C4.32521 0.502808 4.23807 0.520233 4.15683 0.554079C4.07559 0.587925 4.00186 0.637521 3.93988 0.700006L1.11321 3.52667C1.05073 3.58865 1.00113 3.66238 0.967287 3.74362C0.933441 3.82486 0.916016 3.912 0.916016 4.00001C0.916016 4.08801 0.933441 4.17515 0.967287 4.25639C1.00113 4.33763 1.05073 4.41136 1.11321 4.47334L3.93988 7.33334C4.00217 7.39513 4.07605 7.44401 4.15728 7.47719C4.2385 7.51036 4.32548 7.52718 4.41321 7.52667C4.50095 7.52718 4.58793 7.51036 4.66915 7.47719C4.75038 7.44401 4.82425 7.39513 4.88655 7.33334C5.01072 7.20843 5.08041 7.03946 5.08041 6.86334C5.08041 6.68722 5.01072 6.51825 4.88655 6.39334L2.52655 4.00001Z" fill="#919EB0"></path>
              </svg>
            </a>
            <a x-on:click.prevent="inc < max ? inc += show : max" class="inline-flex items-center justify-center w-12 h-8 text-gray-300 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
              <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.36015 4.52667L1.58682 0.760004C1.52484 0.697518 1.45111 0.647922 1.36987 0.614077C1.28863 0.580231 1.20149 0.562805 1.11348 0.562805C1.02548 0.562805 0.938339 0.580231 0.8571 0.614077C0.77586 0.647922 0.702126 0.697518 0.640151 0.760004C0.515983 0.884912 0.446289 1.05388 0.446289 1.23C0.446289 1.40613 0.515983 1.5751 0.640151 1.7L3.94015 5.03334L0.640151 8.33334C0.515983 8.45824 0.446289 8.62721 0.446289 8.80334C0.446289 8.97946 0.515983 9.14843 0.640151 9.27334C0.701894 9.33633 0.775524 9.38644 0.856774 9.42077C0.938024 9.4551 1.02528 9.47297 1.11348 9.47334C1.20169 9.47297 1.28894 9.4551 1.37019 9.42077C1.45144 9.38644 1.52507 9.33633 1.58682 9.27334L5.36015 5.50667C5.42782 5.44424 5.48183 5.36847 5.51876 5.28414C5.5557 5.19981 5.57477 5.10874 5.57477 5.01667C5.57477 4.9246 5.5557 4.83353 5.51876 4.7492C5.48183 4.66487 5.42782 4.5891 5.36015 4.52667Z" fill="#F4F6FF"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div x-data="{ snackbar: true }" :class="{ 'hidden': !snackbar }" class="z-50 fixed left-0 bottom-0 p-4">
  <div class="max-w-sm bg-gray-500 rounded-lg shadow overflow-hidden">
    <div class="flex flex-wrap w-full h-full items-center justify-between">
      <div class="w-full sm:w-auto px-4 py-4 sm:py-0 border-b border-gray-700 sm:border-transparent">
        <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-green-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 fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.47715 4.47715 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM9.73 13.61L14.3 7.61V7.58C14.5179 7.29419 14.5668 6.91382 14.4283 6.58218C14.2897 6.25054 13.9848 6.01801 13.6283 5.97218C13.2718 5.92635 12.9179 6.07419 12.7 6.36L8.92 11.36L7.29 9.28C7.07028 8.99776 6.71668 8.85418 6.36239 8.90334C6.00811 8.9525 5.70696 9.18694 5.57239 9.51834C5.43783 9.84974 5.49028 10.2278 5.71 10.51L8.15 13.62C8.34082 13.8615 8.63222 14.0017 8.94 14C9.2495 13.9993 9.54121 13.8552 9.73 13.61Z" fill="#54D62C"></path>
            </svg>
          </div>
          <span class="text-sm leading-5 text-gray-200 font-semibold">This is a success message!</span>
        </div>
      </div>
      <div class="w-full sm:w-20 h-16 border-l border-transparent sm:border-gray-700">
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-400 border-b border-gray-700 font-semibold hover:bg-gray-600">No</button>
        <button x-on:click="snackbar = false" class="flex w-full h-8 items-center justify-center text-sm text-center px-2 text-gray-50 font-semibold hover:bg-gray-600">Yes</button>
      </div>
    </div>
  </div>
</div>