Tailwind CSS Components

<section class="bg-white py-24 2xl:py-44">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 xl:w-1/2 px-4">
        <span class="mb-9 block font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">Clouds</span>
        <h2 class="mb-16 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-none">Trusted by brands all over</h2>
        <p class="text-lg leading-6 mb-20 xl:mb-0 text-darkBlueGray-400">The nulla commodo, commodo eros a, tristique lectus.</p>
      </div>
      <div class="w-full lg:w-2/3 xl:w-1/2 px-4">
        <div class="flex flex-wrap">
          <div class="w-full md:w-2/5 px-1 mb-5">
            <div class="flex items-center py-4 px-4 bg-gray-50 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/spotify.png" alt="">
              </div>
              <p class="ml-6 font-heading font-medium text-2xl">Spotify</p>
            </div>
          </div>
          <div class="w-full md:w-2/5 px-1 mb-5">
            <div class="flex items-center py-4 px-4 bg-gray-50 rounded-9xl">
              <div class="flex items-center justify-center w-16 h-16 bg-white rounded-5xl shadow-sm">
                <img class="h-5" src="uinel-assets/brands/we-transfer.png" alt="">
              </div>
              <p class="ml-6 font-heading font-medium text-2xl">WeTransfer</p>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="relative p-10 md:py-20 xl:pt-28 xl:pb-72 xl:px-20 bg-blue-500 overflow-hidden rounded-3xl">
      <img class="absolute right-0 top-1/2 transform -translate-y-1/2" src="uinel-assets/images/dashboard-banners/header3.png" alt="">
      <div class="relative z-10 text-center">
        <h2 class="mb-8 text-6xl md:text-7xl text-white font-heading font-semibold">Generate Monthly reports</h2>
        <p class="mb-16 text-white font-heading font-medium">New tools is out now.</p>
        <div class="sm:mx-auto sm:max-w-max"><a class="block py-5 px-8 w-full text-lg leading-3 text-white font-medium tracking-tighter font-heading text-center bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-600 focus:ring-opacity-50 rounded-xl" href="#">Discover</a></div>
      </div>
    </div>
  </div>
</section>

<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-1/2 px-3 mb-6 lg:mb-0">
        <div class="h-full px-8 md:px-12 lg:px-16 pt-14 pb-12 sm:pb-16 mb-5 bg-white rounded-3xl">
          <div class="flex mb-10 items-center justify-between">
            <h3 class="text-xl font-heading font-medium">Balance</h3>
            <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>
          <div class="flex flex-wrap -mx-2 mb-14">
            <div class="w-full md:w-1/2 px-2 mb-10 md:mb-0">
              <div class="flex items-start">
                <img class="mr-3" src="uinel-assets/elements/dashboard-stats/icon1.svg" alt="">
                <div>
                  <h4 class="mb-1 text-sm text-darkBlueGray-300 font-heading font-medium tracking-wide leading-5">Earnings</h4>

<section>
  <div class="relative py-24 2xl:pb-44 bg-blueGray-100 rounded-b-9xl overflow-hidden">
    <div class="relative container px-4 mx-auto z-10">
      <img class="mb-6 xl:mb-10 mx-auto" src="uinel-assets/elements/ecommerce-order/check.svg" alt="">
      <h2 class="mb-5 xl:mb-10 text-9xl xl:text-10xl leading-normal font-heading font-medium text-center">Thanks for your order</h2>
      <p class="mb-14 xl:mb-20 text-lg text-darkBlueGray-400 font-heading text-center">We hope you enjoyed shopping with us.</p>
      <div class="mx-auto max-w-2xl">
        <h3 class="mb-6 text-xl font-heading font-medium">What you ordered:</h3>
        <div class="sm:flex sm:items-center p-10 xl:py-5 xl:px-12 mb-3 bg-white rounded-3xl">
          <a href="#">
            <img class="h-16 mb-6 sm:mb-0 sm:mr-12 mx-auto sm:ml-0 object-cover" src="uinel-assets/images/ecommerce-order/iphone.png" alt="">
          </a>
          <div>
            <a class="inline-block mb-1 text-lg hover:underline font-heading font-medium" href="#">Apple iPhone 12 Pro (128GB)</a>
            <div class="flex flex-wrap">
              <p class="mr-4 text-sm font-medium">
                <span class="font-heading">Color:</span>
                <span class="ml-2 text-gray-400">Silver</span>
              </p>
              <p class="text-sm font-medium">
                <span>Qty:</span>
                <span class="ml-2 text-gray-400">1</span>
              </p>
            </div>

<section class="py-8 bg-white">
  <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 lg:w-1/3 px-4 md:px-6 lg:px-8 mb-8 lg:mb-0">
        <div class="relative pt-4 bg-white rounded-2xl shadow-6xl">
          <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>
          <img class="w-full px-4 mb-8" src="uinel-assets/images/dashboard-content/pic1.png" alt="">
          <div class="flex flex-wrap items-center px-8 mb-8">
            <div class="flex items-center justify-center w-16 h-16 mr-8 bg-gray-50 rounded-5xl">
              <img class="h-9" src="uinel-assets/brands/spotify.png" alt="">
            </div>
            <div>
              <h2 class="text-xl font-heading font-medium">Spotify</h2>
              <p class="text-sm text-darkBlueGray-400 font-heading leading-7">Upgrade. New tools</p>
            </div>
          </div>
          <div class="px-8 pb-11 border-b border-gray-100">
            <div class="flex flex-wrap justify-between items-center mb-3">
              <p class="text-sm 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 class="flex flex-wrap justify-between items-center mb-3">
              <p class="text-sm 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>

<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="pt-12 pb-24 bg-darkBlueGray-500 rounded-b-10xl overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4, color: 1 }">
  <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="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 xl:pr-20">
        <div class="lg:max-w-lg mb-6">

<section class="font-medium bg-darkBlueGray-500 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-white 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 text-gray-300 hover:text-white" 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 text-gray-300 hover:text-white" 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 text-gray-300 hover:text-white" 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="bg-blueGray-100 py-24 2xl:py-44 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="text-sm text-gray-300 uppercase">What people say</span>
      <h2 class="mt-8 mb-24 text-9xl md:text-10xl xl:text-11xl font-heading font-medium">Opinion</h2>
    </div>
    <div class="flex flex-wrap items-center justify-center -mx-4 mb-16 md:mb-28">
      <div class="w-auto px-4 mb-4 xl:mb-0 text-center order-last md: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="overflow-hidden md:flex-1">
        <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="w-full sm:w-2/3 max-w-4xl px-4 mx-auto mb-16 md:mb-0 pt-6">
                  <div class="relative mb-5 py-20 px-8 md:px-20 bg-white rounded-7xl shadow-lg">
                    <img class="absolute top-0 right-0 mr-12 transform -translate-y-1/2" src="uinel-assets/images/team/quote-2.svg" alt="">
                    <p class="mb-8 text-lg md:text-xl font-heading font-medium">Morbi ut nisl placerat, suscipit urna non, fringilla leo. Aenean mi libero, pretium eu convallis non, feugiat non ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia!</p>
                    <p class="text-gray-400">I haretra neque non mi aliquam, finibus hart bibendum molestie. Vestibulum suscipit sagittis dignissim mauris.</p>
                  </div>
                  <div class="flex flex-wrap -mx-4">

<section class="py-20 xl:pb-24 bg-darkBlueGray-500" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <h2 class="mb-14 xl:mb-16 text-6xl leading-relaxed text-white font-heading font-medium">Trusted by brands all over the world</h2>
      <div class="sm:flex sm:items-center">
        <div class="hidden sm:block flex-1">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="block text-white hover:text-darkBlueGray-400 max-w-max">
            <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.0966169 6.28579 -0.0966169 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="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
                <div class="inline-block w-full whitespace-normal">
                    <div class="flex flex-wrap items-center -mb-4">
                      <div class="p-4 xl:px-12 w-full sm:w-1/2 lg:w-1/5">
                        <img class="mx-auto opacity-50" src="uinel-assets/elements/ecommerce-logo-clouds/aol.svg" alt="">
                      </div>
                      <div class="p-4 xl:px-12 w-full sm:w-1/2 lg:w-1/5">
                        <img class="mx-auto opacity-50" src="uinel-assets/elements/ecommerce-logo-clouds/dslogo.svg" alt="">
                      </div>
                      <div class="p-4 xl:px-12 w-full sm:w-1/2 lg:w-1/5">
                        <img class="mx-auto opacity-50" src="uinel-assets/elements/ecommerce-logo-clouds/fedex_logo.svg" alt="">

<section x-data="{ mobileNavOpen: false }">
  <div class="relative text-center text-sm bg-blue-500">
    <div class="px-6 md:px-12 py-2">
      <p class="lg:hidden font-medium text-blue-200 leading-10">
        <span>Hello, you are new here.</span>
        <span class="text-white">Get 20% off card!</span>
      </p>
      <div class="relative flex lg:justify-end">
        <div class="flex w-full lg:w-auto h-14 lg:h-auto justify-between items-center py-4 md:py-0">
          <div class="hidden lg:block flex-shrink-0 w-px h-14 bg-blue-400 opacity-40 mr-10"></div>
          <a class="inline-block mr-10 text-white hover:text-gray-100" href="#">
            <svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.4998 20.2059L2.70115 10.925C1.92859 10.1441 1.41864 9.13717 1.24355 8.04689C1.06847 6.95661 1.23713 5.83827 1.72563 4.8503V4.8503C2.09464 4.10439 2.63366 3.45781 3.29828 2.96383C3.9629 2.46985 4.73408 2.14261 5.5483 2.00908C6.36252 1.87555 7.19647 1.93955 7.98144 2.1958C8.7664 2.45205 9.47991 2.89322 10.0632 3.48296L11.4998 4.93554L12.9364 3.48296C13.5197 2.89322 14.2332 2.45205 15.0182 2.1958C15.8031 1.93955 16.6371 1.87555 17.4513 2.00908C18.2655 2.14261 19.0367 2.46985 19.7013 2.96383C20.3659 3.45781 20.905 4.10439 21.274 4.8503V4.8503C21.7625 5.83827 21.9311 6.95661 21.756 8.04689C21.581 9.13717 21.071 10.1441 20.2984 10.925L11.4998 20.2059Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="relative inline-block text-white hover:text-gray-100" href="#">
            <div class="absolute bottom-0 right-0 flex items-center justify-center -mb-4 -mr-4 w-6 h-6 text-sm text-white bg-purple-400 rounded-full">3</div>
            <svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72414H2.50427C1.99709 8.72414 1.58594 9.12657 1.58594 9.62299V21.308C1.58594 21.8045 1.99709 22.2069 2.50427 22.2069H18.1159C18.6231 22.2069 19.0342 21.8045 19.0342 21.308V9.62299C19.0342 9.12657 18.6231 8.72414 18.1159 8.72414Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34483V4.9569C6.34473 3.85259 6.76252 2.79352 7.5062 2.01265C8.24988 1.23179 9.25852 0.793106 10.3102 0.793106C11.362 0.793106 12.3706 1.23179 13.1143 2.01265C13.858 2.79352 14.2758 3.85259 14.2758 4.9569V6.34483" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="hidden lg:block flex-shrink-0 w-px h-14 bg-blue-400 opacity-40 ml-12 mr-8"></div>
          <a class="flex items-center text-white hover:text-darkBlueGray-100" href="#">

<section class="relative" x-data="{ open: true }" x-show="open">
  <div class="navbar-backdrop fixed inset-0 bg-blueGray-800 opacity-25"></div>
  <div class="fixed top-0 right-0 bottom-0 w-full md:max-w-xl z-40">
    <div class="flex flex-col h-full">
      <div class="flex-1 w-full px-6 pt-20 pb-16 bg-white overflow-y-auto">
        <div class="px-6 md:px-16">
          <div class="relative flex flex-wrap items-center -mx-4 mb-8 pb-8 border-b border-gray-200 border-opacity-40">
            <div class="relative w-full md:w-auto px-4 mb-6 md:mb-10 lg:mb-0">
              <a href="#">
                <img class="w-20" src="uinel-assets/images/ecommerce-product-info/phone01.png" alt="">
              </a>
            </div>
            <div class="w-full md:w-auto px-4">
              <a class="block mb-2 font-heading font-medium hover:underline" href="#">Apple iPhone 12 Pro (128GB)</a>
              <span class="flex items-center mb-3 text-xl font-heading font-medium text-blue-500">
                <span class="mr-2 text-sm">$</span>
                <span>544.90</span>
              </span>
              <div class="flex flex-wrap">
                <p class="mr-4 text-sm font-medium">
                  <span class="font-heading">Color:</span>
                  <span class="ml-2 text-gray-400">Silver</span>
                </p>
                <p class="text-sm font-medium">

<section>
  <div class="py-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-10 lg:mb-11 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 order</h2>

<section class="py-24 2xl:pt-40 2xl:pb-52 bg-white" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 2 }">
  <div class="container mx-auto px-4">
    <div class="mb-20 2xl:mb-36 text-center">
      <span class="block mb-9 font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">How it works</span>
      <h2 class="mb-12 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-none">Easy to use</h2>
    </div>
    <div class="flex flex-wrap items-center justify-center -mx-4 mb-10 xl:mb-32">
      <div class="w-auto px-4 order-last xl:order-first">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="w-auto px-4 order-last md:order-first">
            <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 xl:w-10/12 px-4 mb-10 xl: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 md:flex-nowrap items-center xl:items-start -mx-2">
                      <div class="w-full lg:w-1/2 xl:w-1/4 px-2 mb-5 xl:mb-0">
                        <div class="pt-16 pb-20 px-8 lg:px-12 2xl:px-16 border-black border-opacity-10 border rounded-3xl">
                          <div class="relative inline-flex items-center justify-center mb-8 w-12 h-12 leading-6 text-white bg-blue-500 rounded-full">
                            <span class="text-2xl font-bold">1</span>
                          </div>

<section class="py-24 2xl:py-44 bg-blueGray-100" x-data="{ tab: '', showContent: false }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-2 mb-6">
      <div class="w-full xl:w-3/5 px-2 mb-4 xl:mb-0">
        <div class="flex items-center py-12 px-8 h-full bg-white rounded-3xl">
          <div class="flex flex-wrap items-center justify-between w-full -mx-2">
            <div class="w-full md:w-auto px-2 mb-4 md:mb-0">
              <a class="block mx-auto max-w-max" href="#">
                <img class="h-24 object-cover" src="uinel-assets/images/ecommerce-reviews/product-phone1.png" alt="">
              </a>
            </div>
            <div class="w-full md:w-auto px-2 mb-8 md:mb-0">
              <a class="block mb-2 text-2xl xl:text-3xl font-heading font-medium hover:underline" href="#">Apple iPhone 12 Pro</a>
              <div class="flex">
                <p class="text-sm font-heading font-medium mr-2">
                  <span>Color:</span>
                  <span class="text-darkBlueGray-300">Silver</span>
                </p>
                <p class="text-sm font-heading font-medium">
                  <span>Memory storage:</span>
                  <span class="text-darkBlueGray-300">128GB</span>
                </p>
              </div>
            </div>

<section class="bg-darkBlueGray-500 text-white py-24 2xl:pt-40 2xl:pb-52">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 2xl:w-1/3 px-4 mb-24 xl:mb-0">
        <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 mb-8">Workable</h2>
        <p class="mb-16 text-darkBlueGray-300 leading-loose text-base md:max-w-sm">Mauris semper mi vel lectus aliquam tincidunt. Quisque venenatis enim ut tortor porta vulputate. Aliquam vel dignissim augue, eu iaculis diam.</p>
        <a class="py-5 px-10 text-lg 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="#">See all</a>
      </div>
      <div class="w-full xl:w-2/3 2xl:w-2/3 px-4">
        <div class="max-w-3xl ml-auto overflow-x-auto">
          <div class="inline-block min-w-full border border-indigo-700 rounded-5xl overflow-hidden">
            <table class="table-auto w-full text-white">
              <thead>
                <tr><th class="bg-indigo-700"></th><th class="h-14 text-lg font-semibold uppercase bg-indigo-700">Feature 1</th><th class="h-14 text-lg font-semibold uppercase bg-indigo-700">Feature 2</th><th class="h-14 text-lg font-semibold uppercase bg-indigo-700">Feature 3</th></tr>
              </thead>
              <tbody>
                <tr class="border-b border-gray-100 border-opacity-10">
                  <td class="relative pl-16 font-medium text-lg h-24 pt-5">
                    <div class="flex items-center">
                      <div>
                        <div class="w-12 h-12 rounded-full bg-blue-500 mr-6 relative">
                          <span class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 font-bold text-2xl">1</span>
                        </div>

<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="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="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-24 2xl:py-44 bg-blueGray-100" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <h2 class="mb-14 xl:mb-24 text-9xl xl:text-10xl font-heading font-medium">Best sellers</h2>
    <div class="flex items-center">
      <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="hidden md:block pr-6 hover:text-darkBlueGray-400">
        <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.59661 10.8128 7.59661 11.3841 7.21015 11.7349C6.82369 12.0871 6.19929 12.0897 5.81282 11.7349L0.289847 6.63794C-0.0966174 6.28579 -0.0966173 5.71584 0.289847 5.36108L5.81282 0.264109C6.19785 -0.0880364 6.82369 -0.0880364 7.21015 0.264109C7.59662 0.617558 7.59662 1.18882 7.21015 1.53966L2.68073 6.00147L7.21015 10.4594Z" fill="currentColor"></path>
        </svg>
      </button>
      <div class="overflow-hidden">
        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
            <div class="inline-block w-full whitespace-normal">
                <div class="flex flex-wrap items-start -mx-3 lg:-mx-0 lg:w-full">
                  <div class="p-3 w-full sm:w-1/2 xl:w-5/12">
                    <div class="p-10 xl:px-12 xl:pt-24 xl:pb-20 h-full bg-white rounded-3xl">
                      <a class="block mx-auto mb-8 xl:mb-20 max-w-max" href="#">
                        <img class="h-40 lg:h-72 object-cover" src="uinel-assets/images/ecommerce-product-list/iphone-12-pro.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 mb-5 text-xl text-blue-500 font-heading font-medium tracking-tighter">
                        <span class="mr-2 text-xs">$</span>
                        <span>544.90</span>

<section class="bg-blueGray-100 rounded-b-8xl md:rounded-br-none">
  <div class="relative overflow-hidden">
    <div class="md:absolute top-0 right-0 w-full md:w-1/2 lg:w-5/12 xl:w-auto xl:max-w-lg md:h-full">
      <div class="mt-1 w-full md:h-full md:w-auto z-50 overflow-y-auto">
        <div class="px-4 md:px-16 pt-10 pb-16 bg-white">
          <div class="mb-12">
            <h3 class="mb-10 text-gray-300 font-medium">3 products</h3>
            <div class="flex flex-wrap items-center mb-8 pb-8 border-b border-gray-200 border-opacity-40">
              <div class="w-full md:w-1/3 xl:w-3/12 mb-6 md:mb-0">
                <img class="mx-auto md:mx-0 h-24 object-cover" src="uinel-assets/images/ecommerce-product-info/phone01.png" alt="">
              </div>
              <div class="w-full md:w-2/3 xl:w-9/12">
                <a class="block mb-2 font-heading font-medium hover:underline" href="#">Apple iPhone 12 Pro (128GB)</a>
                <span class="inline-block mb-3 text-xl font-heading font-medium text-blue-500">
                  <span class="text-sm">$</span>
                  <span>544.90</span>
                </span>
                <div class="flex flex-wrap">
                  <p class="mr-4 text-sm font-medium">
                    <span class="font-heading">Color:</span>
                    <span class="ml-2 text-gray-400">Silver</span>
                  </p>
                  <p class="text-sm font-medium">
                    <span>Memory Storage:</span>