Tailwind CSS Components

<section class="font-medium bg-darkBlueGray-500 rounded-b-10xl text-white py-24 2xl:pt-52 2xl:pb-40">
  <div class="container px-4 mx-auto">
    <span class="uppercase tracking-widest text-xs leading-4 mb-9 block text-center text-gray-300">New-in</span>
    <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-28 2xl:mb-24 text-center">Features</h2>
    <div class="mb-24 grid md:grid-cols-2 xl:grid-cols-5 border border-white border-opacity-20 rounded-3xl">
      <div class="py-20 px-12 text-center md:text-left border-b xl:border-b-0 md:border-r border-white border-opacity-20">
        <img class="mb-6 mx-auto md:ml-0" src="uinel-assets/elements/features/helpdesk-small.svg" alt="">
        <h3 class="mb-2 font-heading text-3xl leading-loose">Helpdesk</h3>
        <p class="font-normal leading-loose text-darkBlueGray-300">Donec laoreet sem sollicitudin</p>
      </div>
      <div class="py-20 px-12 text-center md:text-left border-b xl:border-b-0 xl:border-r border-white border-opacity-20">
        <img class="mb-6 mx-auto md:ml-0" src="uinel-assets/elements/features/devices-small.svg" alt="">
        <h3 class="mb-2 font-heading text-3xl leading-loose">3+ devices</h3>
        <p class="font-normal leading-loose text-darkBlueGray-300">The nulla come commodo</p>
      </div>
      <div class="py-20 px-12 text-center md:text-left border-b xl:border-b-0 md:border-r border-white border-opacity-20">
        <img class="mb-6 mx-auto md:ml-0" src="uinel-assets/elements/features/plugin-small.svg" alt="">
        <h3 class="mb-2 font-heading text-3xl leading-loose">Voice plugin</h3>
        <p class="font-normal leading-loose text-darkBlueGray-300">Nam ipsum augue eleifend</p>
      </div>
      <div class="py-20 px-12 text-center md:text-left border-b xl:border-b-0 xl:border-r border-white border-opacity-20">
        <img class="mb-6 mx-auto md:ml-0" src="uinel-assets/elements/features/messages-small.svg" alt="">
        <h3 class="mb-2 font-heading text-3xl leading-loose">D.Messages</h3>
        <p class="font-normal leading-loose text-darkBlueGray-300">Vestibulum non odio non dui</p>

<section class="py-24 2xl:py-44 bg-darkBlueGray-500">
  <div class="container px-4 mx-auto">
    <ul class="mb-14 xl:mb-20 mx-auto flex flex-wrap max-w-7xl">
      <li class="mb-3 mr-8 xl:mr-32"><a class="text-xl text-white hover:text-gray-100 font-heading font-medium" href="#">Smartphone</a></li>
      <li class="mb-3 mr-8 xl:mr-32"><a class="text-xl text-white hover:text-gray-100 font-heading font-medium" href="#">System</a></li>
      <li class="mb-3 mr-8 xl:mr-32"><a class="text-xl text-white hover:text-gray-100 font-heading font-medium" href="#">Tablet</a></li>
      <li class="mb-3 mr-8 xl:mr-32"><a class="text-xl text-white hover:text-gray-100 font-heading font-medium" href="#">Collections</a></li>
      <li><a class="text-xl text-white hover:text-gray-100 font-heading font-medium" href="#">Story</a></li>
    </ul>
    <div class="md:flex md:items-center xl:items-stretch md:flex-wrap mb-14 border border-white border-opacity-20 rounded-3xl">
      <div class="xl:flex xl:items-center w-full xl:w-6/12">
        <div class="p-10 xl:py-14 xl:px-6 xl:mx-auto md:max-w-xl">
          <span class="block mb-7 text-xs leading-4 text-gray-300 uppercase font-medium tracking-widest">Newsletter</span>
          <h2 class="mb-10 text-6xl leading-tighter text-white font-heading font-medium xl:pr-24">Get free 20% discount for your first order.</h2>
          <div class="md:flex">
            <input class="py-3 px-6 xl:px-9 mb-2 md:mb-0 xl:mb-0 xl:mr-2 w-full md:w-auto xl:w-full 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 md:ml-2 w-full md:max-w-max 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>
        </div>
      </div>
      <div class="relative xl:flex xl:items-center w-full md:w-1/2 xl:w-3/12">
        <div class="absolute left-0 top-0 xl:top-1/2 xl:transform xl:-translate-y-1/2 w-full xl:w-px h-px xl:h-56 bg-gray-100 bg-opacity-20"></div>
        <div class="p-10 xl:px-20">
          <img class="mb-6" src="uinel-assets/elements/ecommerce-footers/email-orange.svg" alt="">

<section class="pb-24 sm:pt-24 md:py-0 bg-blueGray-100 overflow-hidden">
  <div class="flex items-center flex-wrap">
    <div class="w-full sm:pr-4 xl:pr-20 sm:w-1/2 xl:w-5/12">
      <div class="relative mb-14 sm:mb-0">
        <img class="absolute -left-10 bottom-0" src="uinel-assets/elements/ecommerce-newest-products/gradient.svg" alt="">
        <img class="relative pl-8" src="uinel-assets/images/ecommerce-newest-products/woman-listening3.jpg" alt="">
      </div>
    </div>
    <div class="w-full sm:w-1/2 py-24 2xl:py-0">
      <div class="relative container px-4 mx-auto z-10">
        <h2 class="mb-5 xl:mb-24 text-9xl xl:text-10xl font-heading font-medium">New in</h2>
        <div class="relative flex -mx-3 mb-5 sm:mb-0">
          <div class="flex-shrink-0 w-full lg:w-1/2 p-3 pr-10 sm:pr-4 xl:pr-3">
            <div class="p-10 xl:py-20 mb-5 xl:mb-8 bg-white rounded-3xl">
              <a class="flex items-center" href="#">
                <img class="mx-auto h-56 object-cover" src="uinel-assets/images/ecommerce-product-list/headphones-sony.png" alt="">
              </a>
            </div>
            <a href="#">
              <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Headphones SONY 1l X-O</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>44.90</span>

<section class="overflow-hidden">
  <div class="px-6 lg:px-12 py-6 bg-blueGray-50">
    <nav class="flex justify-between items-center">
      <div class="hidden relative xl:flex items-center py-2 px-6 bg-white rounded-3xl text-sm font-heading font-medium">
        <img class="h-10 w-10 mr-4" src="uinel-assets/images/dashboard-navigations/frame1.svg" alt="">
        <select class="relative z-10 pr-24 pl-2 bg-transparent outline-none appearance-none cursor-pointer leading-8" name="" id="">
          <option value="1">Open tasks</option>
          <option value="1">New task</option>
          <option value="1">Tables</option>
          <option value="1">Sales</option>
        </select>
        <svg class="absolute top-1/2 right-0 h-4 -mt-2 mr-8" width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.47291 8.69323C7.70854 8.43559 8.08938 8.43559 8.32328 8.69323C8.55804 8.95087 8.55978 9.36714 8.32328 9.62478L4.92529 13.3068C4.69053 13.5644 4.31056 13.5644 4.07406 13.3068L0.676073 9.62478C0.441309 9.3681 0.441309 8.95087 0.676073 8.69323C0.911706 8.43559 1.29254 8.43559 1.52644 8.69323L4.50098 11.7128L7.47291 8.69323Z" fill="#8C949F"></path>
          <path d="M1.52709 5.30677C1.29146 5.56441 0.910619 5.56441 0.676725 5.30677C0.441961 5.04913 0.440223 4.63286 0.676725 4.37522L4.07471 0.693232C4.30947 0.435589 4.68944 0.435589 4.92594 0.693232L8.32393 4.37522C8.55869 4.6319 8.55869 5.04913 8.32393 5.30677C8.08829 5.56441 7.70746 5.56441 7.47356 5.30677L4.49902 2.28716L1.52709 5.30677Z" fill="#8C949F"></path>
        </svg>
      </div>
      <div class="hidden xl:flex items-center justify-between">
        <a class="inline-block mr-8 text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">
          <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.22603 16.1331L5.22266 11.6871" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.82614 12.5306C13.0093 12.5306 15.5898 9.94935 15.5898 6.76528C15.5898 3.5812 13.0093 1 9.82614 1C6.64297 1 4.0625 3.5812 4.0625 6.76528C4.0625 9.94935 6.64297 12.5306 9.82614 12.5306Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="relative inline-block text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">

<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 lg:w-2/3 px-3 mb-6 lg:mb-0">
        <div class="px-8 md:px-12 xl:px-20 pt-14 pb-12 sm:pb-16 bg-white rounded-3xl">
          <div class="flex mb-6 sm:mb-12 flex-wrap items-center justify-between">
            <h3 class="mb-8 sm:mb-0 text-xl font-heading font-medium leading-8">Traffic Analysis</h3>
            <div class="w-full sm:w-auto">
              <div class="relative inline-block mr-1 text-xxs border-2 border-gray-200 border-opacity-50 rounded-full tracking-wide hover:border-gray-300">
                <svg class="absolute top-1/2 right-0 mr-3 -mt-px" width="5" height="3" viewBox="0 0 5 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.35807 0.115939C4.50534 -0.0386464 4.74336 -0.0386464 4.88955 0.115939C5.03627 0.270525 5.03736 0.520284 4.88955 0.67487L2.76581 2.88406C2.61908 3.03865 2.3816 3.03865 2.23378 2.88406L0.110045 0.67487C-0.0366818 0.520861 -0.0366818 0.270525 0.110045 0.115939C0.257316 -0.0386464 0.49534 -0.0386464 0.641524 0.115939L2.50061 1.92771L4.35807 0.115939Z" fill="#1D1C1D"></path>
                </svg>
                <select class="py-1 pl-3 pr-6 font-bold tracking-wide bg-transparent outline-none appearance-none cursor-pointer" name="" id="">
                  <option value="1">NOVEMBER</option>
                  <option value="2">DECEMBER</option>
                  <option value="3">JANUARY</option>
                </select>
              </div>
              <div class="relative inline-block text-xxs border-2 border-gray-200 border-opacity-50 rounded-full tracking-wide hover:border-gray-300">
                <svg class="absolute top-1/2 right-0 mr-3 -mt-px" width="5" height="3" viewBox="0 0 5 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.35807 0.115939C4.50534 -0.0386464 4.74336 -0.0386464 4.88955 0.115939C5.03627 0.270525 5.03736 0.520284 4.88955 0.67487L2.76581 2.88406C2.61908 3.03865 2.3816 3.03865 2.23378 2.88406L0.110045 0.67487C-0.0366818 0.520861 -0.0366818 0.270525 0.110045 0.115939C0.257316 -0.0386464 0.49534 -0.0386464 0.641524 0.115939L2.50061 1.92771L4.35807 0.115939Z" fill="#1D1C1D"></path>
                </svg>
                <select class="py-1 pl-3 pr-6 font-bold tracking-wide bg-transparent outline-none appearance-none cursor-pointer" name="" id="">
                  <option value="1">2021</option>

<section class="py-24 2xl:py-48 font-medium bg-blueGray-100 rounded-b-10xl">
  <div class="container px-4 mx-auto">
    <div class="mb-20 xl:mb-28 text-center">
      <span class="block mb-9 font-medium uppercase tracking-widest text-xs text-gray-300 leading-4">How it works</span>
      <h2 class="font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Statistics show</h2>
    </div>
    <div class="grid lg:grid-cols-3 gap-10 xl:gap-20 items-start">
      <div class="relative flex items-center py-2 xl:py-10 px-5 bg-white rounded-3xl">
        <img class="absolute top-0 -right-1/2 transform translate-y-1/2 translate-x-1/2 hidden lg:block mt-12 xl:mt-0 w-2/3 xl:w-auto" src="uinel-assets/elements/stats/line-bottom-right-blue.svg" alt="">
        <img class="absolute bottom-0 left-0 transform translate-y-1/2 translate-x-1/2 rotate-180 hidden lg:block xl:-ml-12 -mb-12 w-2/3 xl:w-auto" src="uinel-assets/elements/stats/line-bottom-right-blue.svg" alt="">
        <div>
          <img class="w-24 h-24" src="uinel-assets/elements/stats/percent-46-blue.svg" alt="">
        </div>
        <p class="md:ml-7 lg:w-24 font-heading text-3xl xl:text-6xl leading-tighter">Years together</p>
      </div>
      <div class="relative flex items-center py-2 xl:py-10 px-5 lg:mt-32 bg-white rounded-3xl">
        <img class="absolute top-0 -right-1/2 transform translate-y-1/2 translate-x-1/2 hidden lg:block mt-12 xl:mt-0 w-2/3 xl:w-auto" src="uinel-assets/elements/stats/line-bottom-right-blue.svg" alt="">
        <img class="absolute bottom-0 left-0 transform translate-y-1/2 translate-x-1/2 rotate-180 hidden lg:block xl:-ml-12 -mb-12 w-2/3 xl:w-auto" src="uinel-assets/elements/stats/line-bottom-right-blue.svg" alt="">
        <div>
          <img class="w-24 h-24" src="uinel-assets/elements/stats/percent-61-blue.svg" alt="">
        </div>
        <p class="md:ml-7 lg:w-40 2xl:w-48 font-heading text-3xl xl:text-6xl leading-tighter">Feel free and take all</p>
      </div>
      <div class="relative flex items-center py-2 xl:py-10 px-5 lg:mt-64 bg-white rounded-3xl">

<section class="py-24 2xl:pt-44 2xl:pb-52 bg-white overflow-hidden">
  <div class="container px-4 mb-14 mx-auto">
    <div class="pb-14 xl:pb-20 mb-14 xl:mb-28 md:grid md:grid-cols-2 md:items-start border-b border-gray-100">
      <h2 class="mb-14 md:mb-0 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Your best website starts here</h2>
      <div class="flex items-center xl:justify-end">
        <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 class="max-w-5xl mx-auto">
      <span class="block mb-12 font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">Discover special tools</span>
      <h3 class="font-heading font-medium text-7xl xl:text-8xl leading-snug">A spatial system is a set of rules for how you measure and size your UI elements.</h3>
    </div>
  </div>
  <div class="container relative px-6 mb-14 xl:mb-32 mx-auto">
    <img src="uinel-assets/images/content/widget4.png" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">

<section class="pt-12 overflow-hidden bg-blueGray-100" x-data="{ memoryStorage: '', tab: '' }" x-init="memoryStorage = $refs.memoryStorage1.textContent, tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <ul class="flex flex-wrap items-center mb-10">
      <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="flex flex-wrap mx-auto mb-1 justify-between items-center max-w-5xl">
      <h2 class="mb-4 md:mb-0 text-5xl md:text-7xl lg:text-8xl font-heading font-medium">Apple iPhone 12 Pro (128GB)</h2>
      <div class="flex items-center mb-4 md:mb-0">

<div x-data="{ category: '', slideWidth: 0, activeSlide: 0, slideCount: 3 }" x-init="category = $refs.category1.textContent">
  <section class="p-8 pb-0 font-medium bg-blueGray-100">
    <div class="relative py-24 2xl:py-44 bg-white z-10 rounded-t-10xl">
      <div class="container px-4 mx-auto">
        <h2 class="mb-16 xl:mb-28 font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">Works</h2>
        <div class="py-6 px-5 mb-20 xl:py-3 font-heading text-xl leading-7 bg-gray-50 rounded-8xl">
          <div class="md:grid md:grid-cols-2 xl:grid-cols-5 md:text-center xl:max-w-max xl:mx-auto">
            <a x-ref="category1" class="block py-5 px-8 2xl:px-14 rounded-5xl shadow-lg bg-white" :class="{'bg-white shadow-lg': category == $refs.category1.textContent}" x-on:click.prevent="category = $refs.category1.textContent" href="#">Mobile Apps</a>
            <a x-ref="category2" class="block py-5 2xl:px-14 px-8 rounded-5xl" :class="{'bg-white shadow-lg': category == $refs.category2.textContent}" x-on:click.prevent="category = $refs.category2.textContent" href="#">Web Design</a>
            <a x-ref="category3" class="block py-5 px-8 2xl:px-14 rounded-5xl" :class="{'bg-white shadow-lg': category == $refs.category3.textContent}" x-on:click.prevent="category = $refs.category3.textContent" href="#">Commercial</a>
            <a x-ref="category4" class="block py-5 px-8 2xl:px-14 rounded-5xl" :class="{'bg-white shadow-lg': category == $refs.category4.textContent}" x-on:click.prevent="category = $refs.category4.textContent" href="#">Social media</a>
            <a x-ref="category5" class="block py-5 px-8 2xl:px-14 rounded-5xl" :class="{'bg-white shadow-lg': category == $refs.category5.textContent}" x-on:click.prevent="category = $refs.category5.textContent" href="#">UX Design</a>
          </div>
        </div>
        <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 -mx-4 mb-20 xl:mb-36">
                      <div class="w-full lg:w-6/12 px-4 mb-6 lg:mb-0">
                        <div class="relative max-w-max" href="#">
                          <img src="uinel-assets/images/portfolio/portfolio5-glass.png" alt="">
                          <div class="h-32 bg-gray-50 bg-opacity-70 rounded-b-9xl"></div>
                          <div class="absolute bottom-12 w-full px-2">
                            <div class="py-12 px-6 md:px-14 bg-white rounded-5xl shadow-md"><a class="block mb-3 text-lg font-heading leading-5 text-purple-500 hover:text-purple-600" href="#">XAOS LTD</a><a class="font-heading leading-normal text-3xl xl:text-7xl hover:underline" href="#">Xaos Redesign</a></div>

<section class="pt-12 pb-24 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="pb-9 mb-7 text-center border-b border-black border-opacity-5">
      <h2 class="text-9xl xl:text-10xl leading-normal font-heading font-medium text-center">Your cart</h2>
    </div>

<section class="bg-white py-24 2xl:py-44 overflow-hidden" 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-20 text-9xl md:text-10xl xl:text-11xl font-heading font-medium">Team</h2>
    <div class="flex flex-wrap justify-center items-center -mx-4 mb-16 md:mb-28">
      <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-3/4 lg:w-4/5 mx-auto mb-16 sm:mb-0 px-4">
        <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 -mx-4">
                      <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
                        <div class="pt-6 px-8 pb-12 bg-gray-50 rounded-7xl">
                          <div class="text-right">
                            <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Founder</span>
                          </div>
                          <div class="flex flex-wrap">
                            <div class="w-full md:w-1/3">

<section class="relative py-24 xl:py-36 bg-blueGray-100">
  <div class="relative z-10 container px-4 mx-auto">
    <ul class="mb-14 xl:mb-20 mx-auto flex flex-wrap max-w-7xl">
      <li class="mb-3 mr-8 xl:mr-32"><a class="text-xl font-heading font-medium" href="#">Your account</a></li>
      <li class="mb-3 mr-8 xl:mr-32"><a class="text-xl font-heading font-medium" href="#">Bestsellers</a></li>
      <li class="mb-3 mr-8 xl:mr-32"><a class="text-xl font-heading font-medium" href="#">Categories</a></li>
      <li class="mb-3 mr-8 xl:mr-32"><a class="text-xl font-heading font-medium" href="#">Payments</a></li>
      <li><a class="text-xl font-heading font-medium" href="#">Delivery</a></li>
    </ul>
    <div class="md:flex md:items-center xl:items-stretch md:flex-wrap mb-20 xl:mb-32 bg-white rounded-3xl">
      <div class="xl:flex xl:items-center w-full xl:w-6/12">
        <div class="p-10 xl:py-14 xl:px-6 xl:mx-auto md:max-w-xl">
          <span class="block mb-7 text-xs leading-4 text-gray-300 uppercase font-medium tracking-widest">Newsletter</span>
          <h2 class="mb-10 text-6xl leading-tighter font-heading font-medium xl:pr-24">Get free 20% discount for your first order.</h2>
          <div class="md:flex">
            <input class="py-3 px-6 xl:px-9 mb-2 md:mb-0 xl:mb-0 xl:mr-2 w-full md:w-auto xl:w-full 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 md:ml-2 w-full md:max-w-max 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>
        </div>
      </div>
      <div class="relative xl:flex xl:items-center w-full md:w-1/2 xl:w-3/12">
        <div class="absolute left-0 top-0 xl:top-1/2 xl:transform xl:-translate-y-1/2 w-full xl:w-px h-px xl:h-56 bg-gray-100"></div>
        <div class="p-10 xl:px-20">
          <img class="mb-6" src="uinel-assets/elements/ecommerce-footers/email-orange.svg" alt="">

<section>
  <div class="py-24 bg-blueGray-100 rounded-t-10xl">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-2/5 px-4 mb-10 md:mb-0">
          <a class="block font-bold text-xl mb-14" href="#">
            <img class="h-12" src="uinel-assets/logos/uinel-gray-black.svg" alt="">
          </a>
          <h2 class="text-6xl xl:text-8xl font-medium mb-8">Subscribe now</h2>
          <div class="mb-5">
            <input class="w-full xl:w-auto mb-2 xl:mb-0 xl:mr-2 py-3 px-8 bg-blueGray-100 placeholder-gray-700 border-2 border-blue-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="email" placeholder="Enter you Email">
            <button class="inline-block py-3 px-10 md:mx-auto w-full xl:w-auto text-xl leading-7 text-white font-medium tracking-tighter font-heading bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" type="button">Let's go</button>
          </div>
          <p class="text-sm leading-9 text-gray-400">Fusce sodales vitae lorem vitae now tempus.</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-3/5 px-4">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-10 lg:mb-0">
              <h3 class="font-medium text-xl mb-10">About Uinel</h3>
              <ul>
                <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">About us</a></li>
                <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Stories</a></li>
                <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Our people</a></li>
                <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Founders</a></li>

<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="pt-12 pb-24 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="bg-blueGray-100" x-data="{ mobileNavOpen: false }">
  <div class="px-6 md:px-12 py-6 bg-white rounded-b-lg">
    <nav class="flex justify-between">
      <div class="flex w-full items-center">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.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 hover:text-darkBlueGray-400" href="#">Stories</a></li>
          <li class="relative mr-16">
            <a class="flex items-center font-medium hover:text-darkBlueGray-400" 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">
              <div class="absolute top-0 left-0 ml-72 w-7 h-7 bg-white transform rotate-45 -translate-y-1/2"></div>
              <div class="flex flex-wrap min-w-max -mx-4 lg:-mx-10">
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 lg:px-10">
                  <div>
                    <h3 class="mb-4 text-xl font-heading font-medium">Smartphone</h3>
                    <ul class="w-full">
                      <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">View all</a></li>

<section class="py-8 bg-blueGray-50" x-data="{ tab: '', showContent: false }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="order-1 w-full lg:w-2/3 p-4">
        <div class="p-7 pt-12 pb-12 2xl:h-full bg-white rounded-5xl">
          <div class="flex flex-wrap px-9 mb-8">
            <div class="w-full md:w-1/2 mb-6 md:mb-0">
              <h2 class="mb-3 text-3xl font-heading font-medium">Project Progress Data</h2>
              <p class="text-darkBlueGray-400 font-heading font-normal">List of recent contracts and freelancers.</p>
            </div>
            <div class="w-full md:w-1/2 max-w-max md:ml-auto"><a class="block py-4 px-7 w-full leading-3 text-white font-semibold 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="#">Export file</a></div>
          </div>
          <div class="px-9 mb-4">
            <div class="border-b border-gray-100">
              <a x-ref="tab1" class="inline-block py-4 pr-16 mr-9 font-heading font-medium border-b-2 border-blue-500 text-blue-500 hover:text-blue-600" :class="{'border-b-2 border-blue-500 text-blue-500 hover:text-blue-600': $refs.tab1.textContent == tab, 'text-gray-300 hover:text-gray-400': $refs.tab1.textContent != tab}" x-on:click.prevent="tab = $refs.tab1.textContent" href="#">Progress</a>
              <a x-ref="tab2" class="inline-block py-4 pr-16 mr-9 font-heading font-medium text-gray-300 hover:text-gray-400" :class="{'border-b-2 border-blue-500 text-blue-500 hover:text-blue-600': $refs.tab2.textContent == tab, 'text-gray-300 hover:text-gray-400': $refs.tab2.textContent != tab}" x-on:click.prevent="tab = $refs.tab2.textContent" href="#">Completed</a>
              <a x-ref="tab3" class="inline-block py-4 pr-16 mr-9 font-heading font-medium text-gray-300 hover:text-gray-400" :class="{'border-b-2 border-blue-500 text-blue-500 hover:text-blue-600': $refs.tab3.textContent == tab, 'text-gray-300 hover:text-gray-400': $refs.tab3.textContent != tab}" x-on:click.prevent="tab = $refs.tab3.textContent" href="#">Invoices</a>
            </div>
          </div>
          <div class="overflow-x-auto">
            <div class="inline-block min-w-full overflow-hidden">
              <table class="table-auto w-full mb-8">
                <thead>
                  <tr>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 md:-mx-6 lg:-mx-8">
      <div class="w-full sm:w-1/2 px-4 md:px-6 lg:px-8 mb-16">
        <div class="relative pt-4 bg-white rounded-2xl">
          <span class="absolute right-8 top-8 py-1 px-3 text-xxs leading-5 text-red-500 font-bold uppercase bg-orange-200 rounded-2xl">5 Tasks</span>
          <div class="flex flex-wrap items-start px-8 py-14">
            <div class="w-full lg:w-auto mb-6 lg:mb-0">
              <div class="flex items-center justify-center w-24 h-24 mr-9 bg-white rounded-5xl shadow-sm">
                <img src="uinel-assets/images/dashboard-content/av1-circle.png" alt="">
              </div>
            </div>
            <div class="w-full lg:flex-1">
              <h2 class="text-xl font-heading font-medium leading-10">Ainsley Stones</h2>
              <p class="mb-8 text-darkBlueGray-400 font-heading">UX/UI Designer</p>
              <p class="mb-8 text-darkBlueGray-400 font-heading">I haretra neque non mi aliquam, finibus hart bibendum molestie. Vestibulum suscipit sagittis dignissim mauris.</p>
              <div class="flex items-start xl:items-center justify-between pb-4 mb-4 border-b border-gray-100">
                <div class="flex">
                  <img class="mr-2 md:mr-6" src="uinel-assets/elements/dashboard-content/lines.svg" alt="">
                  <h3 class="text-sm font-medium tracking-tighter">Location</h3>
                </div>
                <p class="text-right text-sm text-darkBlueGray-400 font-heading">Lincoln, United Kingdom</p>
              </div>
              <div class="flex flex-wrap items-center justify-between pb-4 mb-4 border-b border-gray-100">

<section class="relative bg-darkBlueGray-500" 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-24 2xl:pt-64 2xl:pb-48 font-medium bg-blueGray-100 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }">
  <div class="container relative px-4 mx-auto">
    <span class="block mb-9 uppercase tracking-widest text-xs leading-4">The Most popular</span>
    <h2 class="mb-20 xl:mb-44 font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">FAQ’s</h2>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex mb-20 xl:mb-40 transition-transform duration-500 ease-in-out -m-1">
        <div x-ref="slide1" class="flex-shrink-0 md:max-w-sm w-full p-1">
            <div class="relative py-9 px-16 h-full bg-white rounded-3xl" x-data="{ accordion: false }">
                <h3 class="font-heading text-3xl xl:text-6xl leading-tighter">How should i develop my workflow over time?</h3>
                <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                    <p class="text-lg text-left font-normal leading-6 mt-5">The nulla commodo, commodo eros a, tristique lectus.</p>
                </div>
                <button x-on:click="accordion = !accordion" class="absolute -bottom-6 right-10 block w-12 h-12 bg-blue-500 rounded-full">
                    <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform w-full h-full">
                        <img class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" src="uinel-assets/elements/faqs/arrow-down-white.svg" alt="">
                    </span>
                </button>
            </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 md:max-w-sm w-full p-1">
            <div class="relative py-9 px-16 h-full bg-white rounded-3xl" x-data="{ accordion: false }">
                <h3 class="font-heading text-3xl xl:text-6xl leading-tighter">Can i pay by credit card?</h3>
                <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                    <p class="text-lg text-left font-normal leading-6 mt-5">The nulla commodo, commodo eros a, tristique lectus.</p>
                </div>