Tailwind CSS Components – Uinel Library

<section class="py-24 2xl:py-44 bg-blueGray-100 rounded-t-10xl overflow-hidden" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <span class="text-xs text-gray-300 uppercase tracking-wide">What people say</span>
    <h1 class="mt-8 mb-14 md:mb-24 text-8xl md:text-10xl xl:text-11xl font-heading font-medium leading-tight">Testimonials</h1>
    <div class="flex flex-wrap -mx-2 mb-14">
      <div class="w-full xl:w-3/5 px-2 mb-4 xl:mb-0">
        <div class="flex items-center h-full py-12 px-8 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>

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-2">
      <div class="w-full md:w-1/3 lg:w-1/6 px-2 mb-4 lg:mb-0">
        <div class="flex items-center justify-center h-28 px-4 border border-gray-100 rounded-5xl">
          <img class="h-10" src="uinel-assets/brands/docusign.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 px-2 mb-4 lg:mb-0">
        <div class="flex items-center justify-center h-28 px-4 border border-gray-100 rounded-5xl">
          <img class="h-10" src="uinel-assets/brands/british-business-bank.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 px-2 mb-4 lg:mb-0">
        <div class="flex items-center justify-center h-28 px-4 border border-gray-100 rounded-5xl">
          <img class="h-10" src="uinel-assets/brands/fedex.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 px-2 mb-4 md:mb-0">
        <div class="flex items-center justify-center h-28 px-4 border border-gray-100 rounded-5xl">
          <img class="h-10" src="uinel-assets/brands/starling-bank.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 px-2 mb-4 md:mb-0">

<section class="pb-24 xl:pb-0 bg-darkBlueGray-500">
  <div class="py-8 mx-10 mb-20 xl:mb-52 bg-white"></div>
  <div class="container px-4 mx-auto">
    <div class="relative xl:pb-52 text-center overflow-hidden">
      <img class="absolute top-0 bottom-0 h-full left-1/2 mt-20 transform -translate-x-1/2 object-contain" src="uinel-assets/images/sign-up/half-circle.svg" alt="">
      <div class="relative">
        <span class="inline-block py-3 px-7 mb-10 text-lg font-medium font-heading leading-5 text-indigo-500 border border-indigo-500 rounded-6xl">Create account</span>
        <div class="mb-14 xl:mb-16">
          <h2 class="text-9xl md:text-10xl xl:text-11xl text-white leading-tight font-heading font-medium">Start creating a design</h2>
        </div>
        <div class="max-w-md mx-auto">
          <input class="w-full mb-6 py-5 px-12 text-xl border-2 border-blue-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="email" placeholder="Your Email">
          <input class="w-full mb-6 py-5 px-12 text-xl border-2 border-blue-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="password" placeholder="Password">
          <input class="w-full mb-14 py-5 px-12 text-xl border-2 border-blue-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="password" placeholder="Confirm password">
          <div class="relative mb-14 flex justify-center items-center">
            <a class="inline-block mr-4 -mt-5" href="#">
              <img src="uinel-assets/images/sign-up/check.svg" alt="">
            </a>
            <input style="appearance: none;" type="checkbox">
            <p class="text-gray-200">By singning up, you agree to our Terms, Data Policy and Cookies.</p>
          </div>
          <a class="block py-5 px-10 mx-auto w-full md:max-w-max 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="#">Register now</a>
        </div>
      </div>

<section>
  <div class="font-medium pt-24 2xl:pt-52 bg-blueGray-100 rounded-b-10xl pb-96">
    <div class="container px-4 mx-auto">
      <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-12 text-center">Select software</h2>
      <p class="text-lg leading-6 font-normal text-darkBlueGray-400 mb-20 text-center">Sed porttitor turpis sit amet malesuada porta vivamus lobortis.</p>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="-mt-96 grid md:grid-cols-2 lg:grid-cols-3 lg:items-center gap-9 pb-24 2xl:pb-52 font-medium mx-auto max-w-7xl">
      <div class="pt-14 pb-16 px-8 md:px-16 shadow-2xl rounded-5xl bg-white">
        <img class="mb-14 w-10 h-10" src="uinel-assets/elements/pricing/circle1-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-12 leading-5 tracking-tighter">
          <span class="text-base mr-2 -mb-1">$</span>
          <span>8.80</span>
        </div>
        <p class="font-normal font-heading text-base leading-loose text-darkBlueGray-400 mb-14 xl:mb-28">I haretra neque non me, finibus hart bibendum molestie.</p>
        <a class="block py-3 px-10 md:mx-auto w-full md:max-w-max text-xl leading-7 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Buy now</a>
      </div>
      <div class="pt-14 pb-16 px-8 md:px-16 shadow-3xl rounded-5xl bg-white">
        <img class="mb-14 w-10 h-10" src="uinel-assets/elements/pricing/circle2-small.svg" alt="">
        <h3 class="font-heading text-7xl leading-10 tracking-tight mb-4">Students</h3>
        <div class="font-heading text-3xl flex items-center mb-12 leading-5 tracking-tighter">
          <span class="text-base mr-2 -mb-1">$</span>

<section class="font-medium bg-blueGray-100 rounded-b-10xl 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 lg:grid-cols-3 xl:grid-cols-5 gap-16 bg-white rounded-3xl py-20 px-8 md:px-16 xl:px-24">
      <div class="text-center md:text-left">
        <img class="w-12 h-12 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-400">Donec laoreet sem sollicitudin</p>
      </div>
      <div class="text-center md:text-left">
        <img class="w-12 h-12 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-400">The nulla come commodo</p>
      </div>
      <div class="text-center md:text-left">
        <img class="w-12 h-12 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-400">Nam ipsum augue eleifend</p>
      </div>
      <div class="text-center md:text-left">
        <img class="w-12 h-12 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-400">Vestibulum non odio non dui</p>

<section class="pt-12 pb-24 bg-blueGray-100 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="max-w-md mb-6">

<section class="font-medium bg-blueGray-100 py-24 2xl:py-44 overflow-hidden rounded-b-10xl">
  <div class="container px-4 mx-auto">
    <span class="block mb-9 uppercase tracking-widest text-xs leading-4 text-gray-300">Discover out blog</span>
    <h2 class="mb-36 md:mb-20 xl:mb-32 font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">Latest blog</h2>
    <div class="flex flex-wrap items-start -mx-4">
      <div class="relative md:-mt-0 w-full lg:w-2/3 px-4 mb-52 md:mb-12 -mt-20">
        <img class="w-full" src="uinel-assets/images/blog/blog2-learning.png" alt="">
        <div class="absolute left-1/2 transform -translate-x-1/2 -bottom-40 md:bottom-12 px-6 w-full">
          <div class="py-12 px-6 md:px-14 bg-white z-10 rounded-5xl shadow-md">
            <div class="flex items-center mb-4">
              <a class="inline-block font-heading text-lg leading-5 text-purple-500 hover:text-purple-600" href="#">New in Uinel</a>
              <div class="mx-4 w-px h-6 bg-gray-50"></div>
              <p class="relative top-px uppercase tracking-widest text-xs text-gray-300">2 june</p>
            </div>
            <h3 class="mb-4 font-heading leading-normal text-3xl xl:text-7xl">Get inspired from the all designers</h3>
            <p class="xl:max-w-md mb-4 xl:mb-0 font-heading font-normal text-base leading-8 text-gray-500">I haretra neque non mi aliquam, finibus hart bibendum molestie. Vestibulum suscipit sagittis dignissim mauris.</p>
            <button class="block py-5 px-10 md:ml-auto md:w-auto w-full 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" type="button">Learn more</button>
          </div>
        </div>
        <div class="h-40 xl:h-80 bg-gray-50 rounded-b-9xl"></div>
      </div>
      <div class="relative w-full lg:w-1/3 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="relative w-full md:w-1/2 lg:w-full px-4 mb-12 md:mb-0 lg:mb-12">

<section class="py-24 2xl:py-44 bg-darkBlueGray-500">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-14 lg:mb-24">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl text-white">About Uinel</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">About us</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Stories</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Our people</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Founders</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Why Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">How we compare</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Website</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Idea</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Mission</a></li>
          <li><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Newsroom</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl text-white">Product &amp; Tools</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Download Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Sign up free</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Pricing</a></li>

<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 text-center">Products</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 -mx-3">
                  <div class="w-full sm:w-1/2 xl:w-1/4 px-3 mb-6 xl:mb-0">
                    <div class="p-10 xl:px-9 xl:pt-24 xl:pb-12 h-full bg-white 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/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 text-xl text-blue-500 font-heading font-medium tracking-tighter">
                        <span class="mr-2 text-xs">$</span>
                        <span>544.90</span>

<section class="py-24 xl:py-44">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-2">
      <div class="w-full md:w-1/2 px-2 mb-24">
        <div class="flex flex-wrap items-start max-w-sm">
          <div class="w-full md:w-1/5 mb-4 md:mb-0">
            <img class="h-16" src="uinel-assets/elements/ecommerce-features/icon1.svg" alt="">
          </div>
          <div class="w-full md:w-4/5 md:pl-6">
            <h3 class="mb-8 text-4xl lg:text-6xl font-heading font-medium">Great battery, fast charging, and superpower!</h3>
            <p class="mb-6 text-base md:text-lg font-heading font-medium">
              <span class="mr-5">•</span>
              <span>New superpower</span>
            </p>
            <p>Donec laoreet sem sollicitudin, mattis me in, tristique ex.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-2 mb-24">
        <div class="flex flex-wrap items-start max-w-sm">
          <div class="w-full md:w-1/5 mb-4 md:mb-0">
            <img class="h-16" src="uinel-assets/elements/ecommerce-features/icon2.svg" alt="">
          </div>
          <div class="w-full md:w-4/5 md:pl-6">

<section class="font-normal bg-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-darkBlueGray-400 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">
        <table class="table-auto w-full">
          <thead>
            <tr><th class="min-w-max pr-24 h-28 flex items-center text-left pl-16 lg:pl-32 text-lg font-semibold uppercase">Our plans and pricing</th><th class="h-20 text-lg font-semibold uppercase">Feature 1</th><th class="h-20 text-lg font-semibold uppercase">Feature 2</th><th class="h-20 text-lg font-semibold uppercase">Feature 3</th><th class="h-20 text-lg font-semibold uppercase">Feature 4</th><th class="pr-16 lg:pr-32 h-20 text-lg font-semibold uppercase">Feature 5</th></tr>
          </thead>
          <tbody>
            <tr>
              <td class="pl-16 lg:pl-32 font-medium text-lg h-20 bg-gray-50 rounded-tl-20 rounded-bl-20">
                <div class="flex items-center">
                  <input class="mr-9 form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                  <span>Number of Team Members</span>
                </div>
              </td>
              <td class="text-center px-5 py-5 text-lg text-darkBlueGray-400 h-20 bg-gray-50">
                <p>5</p>
              </td>
              <td class="text-center px-5 py-5 text-lg text-darkBlueGray-400 h-20 flex items-center justify-center bg-gray-50">

<section class="relative overflow-hidden">
  <img class="absolute top-0 right-0 h-52 lg:h-auto lg:w-auto" src="uinel-assets/images/ecommerce-banners/color-circles.png" alt="">
  <img class="relative md:absolute top-0 right-0 h-full mt-8 w-full md:w-1/2 lg:w-7/12 xl:w-8/12" src="uinel-assets/images/ecommerce-banners/big-phone-placeholder.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="pt-20 pb-24 lg:py-40 w-full md:w-1/2">
      <h1 class="mb-8 text-9xl md:text-10xl xl:text-12xl font-heading font-medium">Series 7</h1>
      <p class="mb-8 text-xl font-heading font-medium">New superpower.</p>
      <p class="mb-20 xl:mb-52 text-darkBlueGray-400 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>
</section>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-2">
      <div class="w-full md:w-1/2 lg:w-1/3 px-2 mb-4 lg:mb-0">
        <div class="h-full pt-10 px-5 pb-6 text-center bg-white rounded-3xl">
          <h3 class="mb-6 text-sm text-darkBlueGray-300 font-heading font-medium">Engaged Users</h3>
          <div class="flex items-center justify-center mb-6">
            <span class="inline-block mr-2 text-6xl font-heading font-medium">448</span>
            <div class="px-3 text-center bg-green-200 bg-opacity-70 rounded-full">
              <span class="text-xxs font-bold text-green-500 leading-7">+9%</span>
            </div>
          </div>
          <div class="chart" data-type="area-small-blue"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-2 mb-4 lg:mb-0">
        <div class="h-full pt-10 px-5 pb-6 text-center bg-white rounded-3xl">
          <h3 class="mb-6 text-sm text-darkBlueGray-300 font-heading font-medium">Total Profit</h3>
          <div class="flex items-center justify-center mb-6">
            <span class="inline-block mr-2 text-6xl font-heading font-medium">$3,640</span>
            <div class="px-3 text-center bg-green-200 bg-opacity-70 rounded-full">
              <span class="text-xxs font-bold text-green-500 leading-7">+5%</span>
            </div>
          </div>

<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">
      <nav class="flex justify-between py-10 md:py-6">
        <div class="relative flex w-full items-center">
          <a class="hidden md:inline-block mr-12 text-white hover:text-gray-100" href="#">
            <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
          </a>
          <div class="hidden md:block flex-shrink-0 w-px h-12 bg-blue-400 opacity-40 mx-12"></div>
          <div class="relative hidden xl:flex items-center px-6 py-4 border-2 border-blue-400 border-opacity-40 rounded-xl">
            <span class="inline-block mr-6">
              <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.0015 15.2219L5.43359 11.21" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M9.93063 12.5306C13.1138 12.5306 15.6943 9.94935 15.6943 6.76528C15.6943 3.5812 13.1138 1 9.93063 1C6.74746 1 4.16699 3.5812 4.16699 6.76528C4.16699 9.94935 6.74746 12.5306 9.93063 12.5306Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
            <input class="rounded-4xl text-sm text-white placeholder-blueGray-200 font-heading font-medium bg-blue-500 outline-none" placeholder="">
          </div>

<section>
  <div class="pt-12 pb-24 bg-white overflow-hidden">
    <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="relative pb-9 text-center">
        <h2 class="text-9xl xl:text-10xl leading-normal font-heading font-medium text-center">Thanks for order</h2>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-2">
      <div class="w-full lg:w-1/3 px-2 mb-4 lg:mb-0">
        <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="font-heading font-medium relative bg-blueGray-100" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between px-6 lg:px-12 py-8">
    <div class="flex w-full items-center justify-between">
      <div class="flex items-center">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="hidden lg:block focus:outline-none">
          <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="black"></rect><rect y="14" width="25" height="2" fill="black"></rect></svg>
        </button>
        <div class="hidden lg:block w-px h-8 bg-gray-200 bg-opacity-50 mx-8 md:ml-14 md:mr-12"></div>
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/uinel-white-black.svg" alt="">
        </a>
      </div>
      <div class="hidden xl:flex items-center">
        <a class="text-gray-400 hover:text-gray-500" href="#">
          <svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.5219 18.016H2.70312V8.5933C2.70313 6.719 3.48375 4.92147 4.87328 3.59614C6.2628 2.27081 8.1474 1.52625 10.1125 1.52625C12.0776 1.52625 13.9622 2.27081 15.3517 3.59614C16.7412 4.92147 17.5219 6.719 17.5219 8.5933V18.016Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 18.0121H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8.87891 22H10.8789" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <div class="w-px h-12 bg-blueGray-200 ml-9 mr-11"></div>
        <a class="flex items-center mr-12" href="#">
          <span>Sona</span>
          <img class="ml-6" src="uinel-assets/elements/navigations/avatar-online.png" alt="">

<section class="pt-12 pb-24" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <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="relative pb-9 text-center">
      <h2 class="text-9xl xl:text-10xl leading-normal font-heading font-medium text-center">Your cart</h2>
      <div class="absolute left-1/2 transform -translate-x-1/2 bottom-0 w-screen border-b border-black border-opacity-5"></div>

<section class="pt-12 pb-24 overflow-hidden bg-white" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <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="relative pb-9 text-center">
      <h2 class="text-9xl xl:text-10xl leading-normal font-heading font-medium text-center">Your cart</h2>
      <div class="absolute left-1/2 transform -translate-x-1/2 bottom-0 w-screen border-b border-black border-opacity-5"></div>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="px-8 md:px-12 lg: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>
              <option value="2">2022</option>
              <option value="3">2023</option>