Tailwind CSS Components

<section class="pt-12 pb-24 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4, color: 1, memoryStorage: '', tab: '' }" x-init="memoryStorage = $refs.memoryStorage1.textContent, tab = $refs.tab1.textContent">
  <ul class="flex flex-wrap px-4 md:mx-16 mb-12 md:mb-16 items-center">
    <li class="mr-6">
      <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
        <span>Home</span>
        <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
        </svg>
      </a>
    </li>
    <li class="mr-6">
      <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
        <span>Store</span>
        <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
        </svg>
      </a>
    </li>
    <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">Apple iPhone 12 PRO</a></li>
  </ul>
  <div class="relative container px-4 mx-auto">
    <div class="hidden md:flex md:absolute left-0 top-0 mt-20 min-w-max px-4 text-center md:flex-col items-center justify-center">
      <a class="inline-block sm:mb-12 mr-4 sm:mr-0 transform -rotate-90 sm:transform-none hover:text-darkBlueGray-400" href="#">
        <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">

<section>
  <div class="py-20 bg-yellow-500">
    <div class="container px-4 mx-auto">
      <a class="relative block mb-12 mx-auto max-w-max" href="#">
        <img class="mx-auto h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.svg" alt="">
        <img class="absolute left-1/2 top-48 hidden lg:block" src="uinel-assets/elements/ecommerce-footers/blue-line.svg" alt="">
      </a>
      <div class="relative flex justify-between flex-wrap max-w-7xl mx-auto">
        <img class="hidden md:block lg:hidden absolute right-0 top-0 h-1/2 transform translate-y-1/2" src="uinel-assets/elements/ecommerce-footers/blue-line.svg" alt="">
        <div class="md:pr-4 mb-20 lg:mb-0 w-full lg:w-1/2 md:max-w-lg">
          <span class="block mb-7 text-xs leading-4 uppercase font-medium tracking-widest">Newsletter</span>
          <h2 class="mb-10 text-8xl leading-tighter font-heading font-medium">Get free 20% discount for your first order.</h2>
          <div class="lg:flex mb-4">
            <input class="py-3 px-6 xl:px-9 mb-2 lg:mb-0 xl:mb-0 xl:mr-2 w-full lg:w-auto bg-blueGray-50 placeholder-darkBlueGray-400 border-2 border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="email" placeholder="Enter you Email">
            <a class="inline-block py-3 px-10 lg:ml-2 w-full lg:w-auto text-xl leading-7 text-white font-heading font-medium tracking-tighter text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Let's go</a>
          </div>
          <p class="xl:mb-24 text-xs text-darkBlueGray-400 leading-10">Fusce sodales vitae lorem vitae now tempus.</p>
        </div>
        <div class="md:pl-4 w-full lg:w-1/2 md:max-w-md">
          <span class="block mb-7 text-xs leading-4 uppercase font-medium tracking-widest">Contact</span>
          <h2 class="mb-6 xl:mb-14 text-8xl leading-tighter font-heading font-medium">Have any question?</h2>
          <div class="lg:flex lg:items-center lg:flex-wrap">
            <img class="mb-6 mx-auto xl:mx-0 xl:mr-10" src="uinel-assets/elements/ecommerce-footers/avatar.png" alt="">
            <div class="py-5 px-12 mb-6 xl:mb-3 bg-white rounded-2xl shadow-4xl">

<section class="bg-white py-24 2xl:py-44" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <span class="text-sm text-gray-300 uppercase">THE BEST PEOPLE IN THE WORLD</span>
    <h2 class="mt-8 mb-24 text-9xl md:text-10xl xl:text-11xl font-heading font-medium">Team</h2>
    <div class="flex flex-wrap items-center justify-center -mx-4 mb-16">
      <div class="w-auto px-4 mb-4 xl:mb-0 text-center order-last sm:order-first">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.21015 10.4594C7.59662 10.8128 7.59662 11.3841 7.21015 11.7349C6.82369 12.0871 6.19929 12.0897 5.81282 11.7349L0.289847 6.63794C-0.096617 6.28579 -0.096617 5.71584 0.289847 5.36108L5.81282 0.264109C6.19785 -0.0880364 6.82369 -0.0880363 7.21015 0.264109C7.59662 0.617558 7.59662 1.18882 7.21015 1.53966L2.68073 6.00147L7.21015 10.4594Z" fill="black"></path>
          </svg>
        </button>
      </div>
      <div class="w-full sm:w-4/5 px-4 mb-10 md:mb-0">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap items-start -mx-4 pt-9">
                      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-14 lg:mb-0">
                        <div class="relative h-full px-6 pt-16 pb-8 text-center bg-gray-100 rounded-7xl">
                          <img class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                          <h4 class="mb-4 text-xl font-heading font-medium">Ainsley Stones</h4>
                          <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Founder</span>
                        </div>
                      </div>

<section class="pb-24 2xl:pb-28 bg-darkBlueGray-500">
  <div class="mb-16 py-5 border-b border-white border-opacity-10">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center justify-between -mx-4">
        <div class="w-full md:w-auto px-4 pt-6 md:pt-0 mb-4 md:mb-0">
          <a class="mr-6 lg:mr-16 text-white hover:text-gray-100 font-heading" href="#">New tools</a>
          <a class="mr-6 lg:mr-16 inline-flex items-center font-heading text-white hover:text-gray-100" href="#">
            <span class="mr-4">Security</span>
            <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="font-heading text-white hover:text-gray-100" href="#">Join for free</a>
        </div>
        <div class="w-full md:w-auto px-4">
          <a class="font-bold text-xl" href="#">
            <img class="h-10" src="uinel-assets/logos/uinel-gray-white.svg" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-20 lg:mb-40">

<section class="py-24 2xl:py-44 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="relative container px-4 mx-auto">
    <h2 class="mb-14 xl:mb-24 text-9xl xl:text-10xl font-heading font-medium">Products</h2>
    <div class="relative px-4 md:px-0">
      <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex -mx-3 mb-5 sm:mb-0 transition-transform duration-500 ease-in-out">
        <div x-ref="slide1" class="flex-shrink-0 p-3 w-full sm:w-1/2 lg:w-1/3 xl:w-1/4">
          <div class="p-10 xl:px-9 xl:pt-24 xl:pb-12 h-full bg-blueGray-100 rounded-3xl">
            <a class="block mx-auto mb-8 xl:mb-20 max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/phone-background-none.png" alt="">
            </a>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Apple iPhone 12 Pro (128GB) Silver</p>
            </a>
            <p class="flex items-center text-xl text-blue-500 font-heading font-medium tracking-tighter">
              <span class="mr-2 text-xs">$</span>
              <span>544.90</span>
            </p>
          </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 p-3 w-full sm:w-1/2 lg:w-1/3 xl:w-1/4">
          <div class="p-10 xl:px-9 xl:pt-24 xl:pb-12 h-full bg-blueGray-100 rounded-3xl">
            <a class="block mx-auto mb-8 xl:mb-20 max-w-max" href="#">
              <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/headphones-background-none.png" alt="">
            </a>

<section class="font-normal bg-darkBlueGray-500 text-white py-24 2xl:pt-40 2xl:pb-52">
  <div class="container px-4 mx-auto">
    <div class="mb-28">
      <span class="font-medium uppercase tracking-widest text-xs text-gray-300 leading-4 mb-9 block">More data</span>
      <h2 class="font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Workable</h2>
    </div>
    <div class="overflow-x-auto">
      <div class="inline-block min-w-full rounded-5xl overflow-hidden border border-gray-100">
        <table class="table-auto w-full">
          <thead>
            <tr class="border-b border-gray-100 text-body">
              <th class="min-w-max pr-24 h-20 flex items-center text-left pl-16 lg:pl-32 bg-gray-50 text-lg font-semibold uppercase">
                <div class="flex">
                  <input class="mr-9 border-none form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                </div>
                <span>Our plans and pricing</span>
              </th>
              <th class="h-20 bg-gray-50 text-lg font-semibold uppercase">Feature 1</th><th class="h-20 bg-gray-50 text-lg font-semibold uppercase">Feature 2</th><th class="h-20 bg-gray-50 text-lg font-semibold uppercase">Feature 3</th><th class="h-20 bg-gray-50 text-lg font-semibold uppercase">Feature 4</th><th class="pr-16 lg:pr-32 h-20 bg-gray-50 text-lg font-semibold uppercase">Feature 5</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b border-gray-100 border-opacity-10">
              <td class="relative pl-16 lg:pl-32 font-medium text-lg h-24">
                <div class="flex items-center pt-5">

<section class="py-8 bg-white" x-data="{ pagination: 4 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 md:-mx-6 2xl:-mx-8 mb-16 xl:mb-32">
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 md:px-6 2xl:px-8 mb-12">
        <div class="relative py-12 px-8 bg-white rounded-2xl shadow-6xl">
          <span class="absolute right-4 top-4 py-1 px-3 text-xxs leading-5 text-red-500 font-bold uppercase bg-orange-200 rounded-2xl">New</span>
          <div class="flex items-center justify-center w-16 h-16 mb-8 bg-gray-50 rounded-5xl">
            <img class="h-9" src="uinel-assets/brands/spotify.png" alt="">
          </div>
          <h2 class="text-xl font-heading font-medium leading-7">Spotify</h2>
          <p class="mb-8 text-sm text-darkBlueGray-400 font-heading leading-7">A finibus hart bibendum molestie!</p>
          <div class="flex flex-wrap mb-6">
            <div class="w-full md:w-auto mb-3 md:mb-0 md:mr-3">
              <p class="text-sm mb-2 font-heading font-medium trackingr-tighter">Final Date</p>
              <div class="inline-block px-6 py-1 leading-7 font-bold tracking-tight text-blue-500 bg-blue-50 rounded-9xl">8 Dec 2021</div>
            </div>
            <div>
              <p class="text-sm mb-2 font-heading font-medium tracking-tighter">Budget</p>
              <div class="inline-block px-6 py-1 leading-7 font-bold tracking-tight text-blue-500 bg-indigo-100 rounded-9xl">$7.000</div>
            </div>
          </div>
          <div class="flex flex-wrap items-center mb-7">
            <img src="uinel-assets/images/dashboard-content/av1.png" alt="">
            <img class="-ml-4" src="uinel-assets/images/dashboard-content/av2.png" alt="">

<section x-data="{ mobileNavOpen: false }">
  <div class="py-1 text-center text-sm bg-white border-b border-gray-100">
    <p class="font-medium text-darkBlueGray-300 leading-10">
      <span>Hello, you are new here.</span>
      <span class="text-darkBlueGray-900">Get 20% off card!</span>
    </p>
  </div>
  <div class="bg-blue-500">
    <div class="px-6 md:px-12 py-6">
      <nav class="flex justify-between">
        <div class="flex w-full items-center">
          <a href="#">
            <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-white-white.svg" alt="">
          </a>
          <ul class="hidden xl:flex px-4 ml-20 2xl:ml-40 mr-auto">
            <li class="mr-16"><a class="font-medium text-white hover:text-darkBlueGray-100" href="#">Stories</a></li>
            <li class="relative mr-16">
              <a class="flex items-center font-medium text-white hover:text-darkBlueGray-100" href="#">
                <span class="mr-4">Products</span>
                <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
                </svg>
              </a>
              <div class="product-menu hidden absolute top-0 left-0 mt-24 -ml-64 pl-24 pr-16 pt-16 pb-24 bg-white rounded-lg z-50">

<section x-data="{ showContent: false }">
  <div class="pt-12 pb-24 2xl:pb-44 bg-blueGray-100">
    <div class="container px-4 mx-auto">
      <ul class="flex flex-wrap items-center mb-10 xl:mb-0">
        <li class="mr-6">
          <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
            <span>Home</span>
            <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li class="mr-6">
          <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
            <span>Store</span>
            <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">New in</a></li>
      </ul>
      <div class="pb-9 text-center border-b border-black border-opacity-5">
        <div class="relative">

<section class="relative bg-blueGray-100" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="flex flex-wrap md:flex-nowrap">
    <div class="w-full md:max-w-xs pt-24 pb-12 md:pb-24 px-8 bg-white">
      <div class="mb-10 text-center">
        <img class="block mb-16 mx-auto" src="uinel-assets/images/ecommerce-reviews/product-phone1.png" alt="">
        <h3 class="mb-5 text-3xl font-heading font-medium">Apple iPhone 12 Pro 64GB</h3>
        <p class="text-xl text-blue-500 font-heading font-medium">$&nbsp;720,70</p>
      </div>
      <div class="mb-14 md:mb-24">
        <div class="py-3 px-6">
          <h4 class="text-sm font-heading font-medium">
            <span>Color:</span>
            <span class="text-gray-300">Silver</span>
          </h4>
        </div>
        <div class="py-3 px-6 bg-gray-50 rounded-xl">
          <h4 class="text-sm font-heading font-medium">
            <span>Memory storage:</span>
            <span class="text-gray-300">64GB</span>
          </h4>
        </div>
        <div class="py-3 px-6">
          <h4 class="text-sm font-heading font-medium">
            <span>Series:</span>

<section class="py-8 bg-white" x-data="{ pagination: 4 }">
  <div class="container px-4 mx-auto overflow-hidden">
    <img class="ml-11 w-1/2 sm:w-auto h-1 sm:h-auto" src="uinel-assets/elements/dashboard-tables/line.svg" alt="">
    <div class="mb-16 bg-white border border-gray-100 overflow-hidden rounded-5xl">
      <div class="overflow-x-auto">
        <div class="inline-block min-w-full overflow-hidden">
          <table class="table-auto w-full">
            <thead>
              <tr class="bg-gray-50">
                <td class="relative p-0">
                  <div class="flex items-center pl-11 h-20 min-w-max border-b border-gray-100">
                    <input class="appearance-none w-6 h-6 mr-9 bg-white border-2 border-darkbluegray-50 rounded-md" type="checkbox">
                    <span class="text-sm font-heading font-semibold uppercase">Customer id</span>
                  </div>
                </td>
                <td class="p-0">
                  <div class="flex items-center h-20 border-b border-gray-100"></div>
                </td>
                <td class="p-0">
                  <div class="flex items-center justify-center p-5 h-20 min-w-max border-b border-gray-100">
                    <span class="text-sm font-heading font-semibold uppercase">Joined</span>
                  </div>
                </td>
                <td class="p-0">

<section x-data="{ nav: '', mobileNavOpen: false }" x-init="nav = $refs.nav1.textContent">
  <div class="px-6 lg:px-12 py-6 bg-darkBlueGray-500">
    <nav class="flex justify-between">
      <div class="flex w-full items-center">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/dashboard/uifive-white-white.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-14 2xl:ml-40 mr-auto">
          <li class="mr-8 2xl:mr-14">
            <a class="flex items-center font-heading font-medium text-white hover:text-blueGray-100" href="#">
              <img class="mr-2" src="uinel-assets/elements/dashboard-navigations/dashboards.svg" alt="">
              <span>Dashboard</span>
            </a>
          </li>
          <li class="mr-8 2xl:mr-14">
            <a class="flex items-center font-heading font-medium text-white hover:text-blueGray-100" href="#">
              <img class="mr-2" src="uinel-assets/elements/dashboard-navigations/users.svg" alt="">
              <span>Users</span>
            </a>
          </li>
          <li class="mr-8 2xl:mr-14">
            <a class="flex items-center font-heading font-medium text-white hover:text-blueGray-100" href="#">
              <img class="mr-2" src="uinel-assets/elements/dashboard-navigations/chat.svg" alt="">
              <span>Chat</span>

<section class="font-medium bg-blueGray-100 py-24 2xl:py-44" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-14 xl:mb-32">Select software</h2>
    <div class="border-b border-gray-200 mb-20 xl:mb-24">
      <div class="relative grid md:grid-cols-3 max-w-3xl">
        <div :class="{'w-1/3': tab == $refs.tab1.textContent, 'w-2/3': tab == $refs.tab2.textContent, 'w-full': tab == $refs.tab3.textContent }" class="absolute w-1/3 h-1 bg-purple-500 -bottom-px left-0" style="height:2px;"></div>
        <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="font-heading text-xl pb-7 xl:pb-12 hover:text-gray-600" href="#">Uinel one</a>
        <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="font-heading text-xl pb-7 xl:pb-12 hover:text-gray-600" href="#">Uinel 10</a>
        <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="font-heading text-xl pb-7 xl:pb-12 hover:text-gray-600" href="#">Uinel room</a>
      </div>
    </div>
    <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-5 text-white">
      <div class="rounded-8xl overflow-hidden">
        <div class="pt-20 pb-9 px-14 bg-indigo-600">
          <img class="mb-10 w-10 h-10" src="uinel-assets/elements/pricing/circle4-small.svg" alt="">
          <h3 class="font-heading text-7xl leading-10 tracking-tight mb-4">Beginner</h3>
          <div class="font-heading text-3xl flex items-center mb-14">
            <span class="text-base mr-2 -mb-1">$</span>
            <span>8.80</span>
          </div>
        </div>
        <div class="bg-gray-50 px-3">
          <div class="relative -top-12 bg-white pt-12 px-5 pb-5 rounded-5xl shadow-2xl">
            <div class="px-6">

<section class="pt-12 pb-24 overflow-hidden bg-blueGray-100">
  <div class="container px-4 mx-auto">
    <ul class="flex flex-wrap items-center mb-10 xl:mb-0">
      <li class="mr-6">
        <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
          <span>Home</span>
          <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
          </svg>
        </a>
      </li>
      <li class="mr-6">
        <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
          <span>Store</span>
          <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
          </svg>
        </a>
      </li>
      <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">Your cart</a></li>
    </ul>
    <div class="mb-12 pb-8 border-b border-gray-200 border-opacity-40">
      <h1 class="text-center text-9xl xl:text-10xl font-heading font-medium">Billing address</h1>
    </div>

<section class="pt-20 pb-24 xl:pb-32 bg-darkBlueGray-500">
  <div class="container px-4 mx-auto">
    <span class="mb-9 block font-medium uppercase tracking-widest text-center text-xs leading-4 text-gray-300">Clouds</span>
    <h2 class="mb-16 font-heading font-medium text-center text-6xl text-white leading-relaxed">Trusted by brands all over the world</h2>
    <div class="flex flex-wrap -mx-2">
      <div class="w-full md:w-1/2 lg:w-1/4 xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 bg-darkBlueGray-300 bg-opacity-20 rounded-9xl">
          <div class="flex items-center justify-center bg-white w-16 h-16 rounded-5xl shadow-sm">
            <img class="h-8" src="uinel-assets/brands/spotify.png" alt="">
          </div>
          <p class="ml-6 text-xl font-heading font-medium text-white">Spotify</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 lg:mt-16 bg-darkBlueGray-300 bg-opacity-20 rounded-9xl">
          <div class="flex items-center justify-center w-16 h-16 bg-white rounded-5xl shadow-sm">
            <img class="h-8" src="uinel-assets/brands/slack.png" alt="">
          </div>
          <p class="ml-6 text-xl font-heading font-medium text-white">Slack</p>
        </div>
      </div>
      <div class="hidden xl:block xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 lg:mt-16 bg-darkBlueGray-300 bg-opacity-20 rounded-9xl">
          <div class="flex items-center justify-center w-16 h-16 bg-white rounded-5xl shadow-sm">

<section class="py-24 2xl:pt-44 2xl:pb-52 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="mb-20 xl:mb-24 text-center">
      <span class="mb-9 block font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">Discover special tools</span>
      <h2 class="mb-14 xl:mb-16 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight max-w-4xl mx-auto">Your best website starts here</h2>
      <div class="flex items-center justify-center">
        <div class="flex items-center justify-center mr-9 w-20 h-20 bg-white rounded-5xl shadow-sm">
          <img src="uinel-assets/elements/content/avatar-content2.png" alt="">
        </div>
        <div class="text-left">
          <h3 class="font-heading font-medium text-xl leading-loose">Timothy Bowen</h3>
          <span class="font-bold uppercase tracking-wider text-xs leading-4 text-gray-300">February 21, 9 am</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-wrap mb-10 md:mb-32 w-full">
    <div class="w-full md:w-1/2 xl:w-8/12 flex items-center px-10 py-20 md:p-0 bg-darkBlueGray-500 md:rounded-bl-50">
      <img class="relative md:-right-10 lg:-right-20 w-full" src="uinel-assets/images/content/table2.png" alt="">
    </div>
    <div class="w-full md:w-1/2 xl:w-4/12 h-128">
      <img class="w-full h-2/3 md:h-full rounded-b-50 md:rounded-bl-none object-cover object-top" src="uinel-assets/images/content/man2.png" alt="">
    </div>
  </div>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="h-full px-8 py-10 bg-white rounded-3xl">
          <div class="flex items-center mb-4">
            <img class="mr-4 xl:mr-3" src="uinel-assets/elements/dashboard-stats-tiles/icon-small4.svg">
            <h3 class="mr-auto pr-1 text-sm text-darkBlueGray-300 font-heading font-medium">Responces</h3>
            <div class="px-3 py-1 text-center bg-blue-200 bg-opacity-70 rounded-full">
              <span class="text-sm font-bold text-blue-500 leading-6">30 days</span>
            </div>
          </div>
          <div class="flex items-center mb-5">
            <span class="inline-block mr-2 text-6xl font-heading font-medium">248.53</span>
            <div class="inline-flex items-center px-2 py-1 text-center bg-green-200 bg-opacity-70 rounded-full">
              <span class="text-xxs font-bold text-green-500 leading-4">+9%</span>
            </div>
          </div>
          <div class="flex items-center">
            <img class="mr-3" src="uinel-assets/elements/dashboard-stats-tiles/arrow2.svg" alt="">
            <span class="text-sm text-darkBlueGray-300 font-medium leading-10">7.8% more</span>
          </div>
        </div>
      </div>

<section class="py-24 2xl:py-40 bg-darkBlueGray-500 rounded-b-10xl">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="relative w-full lg:w-1/2 px-4 lg:pr-10 xl:pr-20 mb-20 lg:mb-0">
        <img src="uinel-assets/images/contacts/widget3.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <h2 class="text-9xl md:text-10xl xl:text-11xl text-white font-medium font-heading mb-6">Contact</h2>
        <p class="text-lg text-gray-300 mb-14">Lorem ipsum commodo, tristique lectus.</p>
        <div class="flex flex-wrap mb-14 xl:mb-20">
          <div class="w-full xl:w-1/2 flex items-center mb-6">
            <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon1.svg" alt="">
            <a class="text-3xl text-white font-medium" href="#">+ 44 1447881709</a>
          </div>
          <div class="w-full xl:w-1/2 flex items-center mb-6">
            <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon2.svg" alt="">
            <a class="text-3xl text-white font-medium" href="#">uinelchat</a>
          </div>
          <div class="w-full xl:w-1/2 flex items-center">
            <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon3.svg" alt="">
            <a class="text-3xl text-white font-medium" href="#">help@uinel</a>
          </div>
        </div>
        <div class="flex flex-wrap"><a class="inline-block py-5 px-10 mr-6 text-xl leading-6 text-white font-medium tracking-tighter font-heading bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Call</a><a class="inline-block py-5 px-10 text-xl leading-6 font-medium tracking-tighter font-heading bg-white hover:bg-gray-50 focus:ring-2 focus:ring-gray-50 focus:ring-opacity-50 rounded-xl" href="#">More</a></div>

<section class="px-4 lg:px-16">
  <div class="relative py-24 xl:py-52">
    <img class="absolute top-0 left-0 w-full h-full rounded-9xl object-cover" src="uinel-assets/images/ecommerce-banners/background-placeholder.png" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="px-4 md:pl-20 lg:pl-40">
        <p class="mb-1 text-xl font-heading font-medium text-white">Brighter - stronger.</p>
        <h1 class="mb-8 text-9xl md:text-10xl xl:text-12xl font-heading font-medium text-white">Series 9</h1>
        <p class="mb-14 md:mb-32 max-w-sm text-darkBlueGray-100 md:w-56">From $29.12/mo. for 24 mo. or $699 before trade‑in1.</p>
        <a class="inline-block py-4 px-10 text-xl leading-8 text-white font-heading font-medium tracking-tighter text-center bg-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 hover:bg-blue-600 rounded-xl" href="#">Shop now</a>
      </div>
    </div>
  </div>
</section>

<div class="fixed bottom-0 right-0 z-50 p-6" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="relative max-w-2xl px-8 md:px-14 pt-6 pb-9 bg-white rounded-7xl shadow-3xl z-50">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
        <div class="flex items-center mb-4">
          <img class="mr-8" src="uinel-assets/images/cookies/cookies-image.svg" alt="">
          <h3 class="font-heading font-medium text-3xl leading-loose">Cookies</h3>
        </div>
        <p class="text-base leading-6">By clicking “Accept”, you agree to the storing of cookies on your device to enhance (...)</p>
      </div>
      <div class="w-full md:w-1/2 flex flex-col lg:flex-row lg:justify-end items-center px-4">
        <a class="inline-block py-1 mb-4 lg:mb-0 lg:mr-9 lg:mt-10 font-bold text-xl leading-7 border-b border-black" href="#">
          <span class="tracking-tight">More</span>
        </a>
        <a x-on:click.prevent="open = false" class="lg:max-w-max py-3 px-10 lg:mt-10 w-full text-xl leading-7 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Accept</a>
      </div>
    </div>
  </div>
</div>