Tailwind CSS Components

<section class="font-medium bg-blueGray-100 rounded-b-10xl py-24 2xl:pt-52 2xl:pb-52">
  <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-32 text-center">Features</h2>
    <div class="mb-24 md:grid md:grid-cols-2 justify-center md:gap-16 md:gap-y-20">
      <div class="relative pt-20 pb-14 px-8 md:px-20 mb-20 md:mb-0 bg-white text-center md:text-left rounded-3xl">
        <img class="absolute -top-8 left-20 mb-6 mx-auto md:ml-0 w-18 h-18" src="uinel-assets/elements/features/helpdesk.svg" alt="">
        <h3 class="mb-4 font-heading text-7xl leading-tighter">Helpdesk</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Donec laoreet sem sollicitudin, mattis in tristique ex.</p>
      </div>
      <div class="relative pt-20 pb-14 px-8 md:px-20 mb-20 md:mb-0 bg-white text-center md:text-left rounded-3xl">
        <img class="absolute -top-8 left-20 mb-6 mx-auto md:ml-0 w-18 h-18" src="uinel-assets/elements/features/devices.svg" alt="">
        <h3 class="mb-4 font-heading text-7xl leading-tighter">3+ devices</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Donec laoreet sem sollicitudin, mattis in tristique ex.</p>
      </div>
      <div class="relative pt-20 pb-14 px-8 md:px-20 mb-20 md:mb-0 bg-white text-center md:text-left rounded-3xl">
        <img class="absolute -top-8 left-20 mb-6 mx-auto md:ml-0 w-18 h-18" src="uinel-assets/elements/features/plugin.svg" alt="">
        <h3 class="mb-4 font-heading text-7xl leading-tighter">Voice plugin</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Donec laoreet sem sollicitudin, mattis in tristique ex.</p>
      </div>
      <div class="relative pt-20 pb-14 px-8 md:px-20 bg-white text-center md:text-left rounded-3xl">
        <img class="absolute -top-8 left-20 mb-6 mx-auto md:ml-0 w-18 h-18" src="uinel-assets/elements/features/messages.svg" alt="">
        <h3 class="mb-4 font-heading text-7xl leading-tighter">Direct Messages</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Donec laoreet sem sollicitudin, mattis in tristique ex.</p>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="pt-12 pb-20 px-8 md:px-12 lg:px-16 bg-white rounded-3xl">
          <h3 class="mb-8 text-xl font-heading font-medium">Subscriptions</h3>
          <div class="chart" data-type="radial-bar-subscriptions"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="pt-12 pb-20 px-8 md:px-12 lg:px-16 bg-white rounded-3xl">
          <h3 class="mb-8 text-xl font-heading font-medium">Payments</h3>
          <div class="chart" data-type="radial-bar-payments"></div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3">
        <div class="pt-12 pb-20 px-8 md:px-12 lg:px-16 bg-white rounded-3xl">
          <h3 class="mb-8 text-xl font-heading font-medium">Inventory</h3>
          <div class="chart" data-type="radial-bar-inventory"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="px-8 md:px-12 lg:px-16 pt-14 pb-12 sm:pb-16 mb-6 bg-white rounded-3xl">
      <h3 class="mb-3 font-heading font-medium text-indigo-600">Total income</h3>
      <div class="flex items-center mb-4">
        <span class="text-3xl font-heading font-medium">$780,530.00</span>
        <span class="inline-block px-2 py-1 ml-4 text-xxs leading-4 text-green-500 font-bold bg-green-200 bg-opacity-70 rounded-full">+8%</span>
      </div>
      <div class="relative w-full h-1 mb-3 bg-blue-100 rounded-full">
        <div class="absolute top-0 left-0 w-3/5 h-full bg-blue-500 rounded-full"></div>
      </div>
      <span class="text-sm text-darkBlueGray-400 font-heading">Yearly Goal</span>
    </div>
    <div class="px-8 md:px-12 lg:px-16 pt-14 pb-12 sm:pb-16 bg-white rounded-3xl">
      <h3 class="mb-3 font-heading font-medium text-indigo-600">Total income</h3>
      <div class="flex items-center mb-10">
        <span class="text-3xl font-heading font-medium">$6,530.00</span>
        <span class="inline-block px-2 py-1 ml-4 text-xxs leading-4 text-green-500 font-bold bg-green-200 bg-opacity-70 rounded-full">+8%</span>
      </div>
      <div class="chart" data-type="columns-stacked"></div>
    </div>
  </div>
</section>

<section class="relative p-8 bg-blueGray-100 overflow-hidden">
  <img class="absolute top-0 left-0" src="uinel-assets/images/sign-up/color-circles2.png" alt="">
  <img class="absolute bottom-0 right-0" src="uinel-assets/images/sign-up/half-circle-purple.png" alt="">
  <div class="relative py-20 md:py-40 bg-white rounded-4xl">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div class="lg:max-w-md">
            <span class="mb-11 block font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">WOOOOPS</span>
            <h2 class="mb-12 text-9xl md:text-10xl xl:text-11xl leading-tight font-heading font-medium">Register now</h2>
            <p class="text-lg text-gray-400">Sed porttitor turpis sit amet malesuada porta vivamus lobortis.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap justify-center -mb-4 -mx-4">
            <div class="w-full md:w-auto px-4 mb-4">
              <a class="flex items-center justify-center py-5 px-5 border-2 border-gray-50 hover:border-gray-100 rounded-xl" href="#">
                <img class="w-6 h-6 mr-4" src="uinel-assets/images/sign-up/google.svg" alt="">
                <p class="font-bold uppercase">Google</p>
              </a>
            </div>
            <div class="w-full md:w-auto px-4 mb-4">
              <a class="flex items-center justify-center py-5 px-5 border-2 border-gray-50 hover:border-gray-100 rounded-xl" href="#">
                <img class="w-6 h-6 mr-4" src="uinel-assets/images/sign-up/apple.svg" alt="">

<section class="py-24 2xl:pt-48 2xl:pb-40 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 leading-4 text-gray-300">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 md:grid-cols-3 justify-center gap-16 lg:gap-8 max-w-8xl mx-auto">
      <div class="relative text-center">
        <div class="mx-auto p-3 2xl:p-9 mb-6 xl:mb-12 bg-white max-w-max rounded-full">
          <img src="uinel-assets/elements/stats/percent-46-blue.svg" alt="">
        </div>
        <h3 class="mx-auto w-36 font-heading text-3xl xl:text-6xl leading-tighter">Years together</h3>
        <img class="absolute top-16 -right-40 xl:-right-48 hidden lg:block w-2/3 xl:w-auto" src="uinel-assets/elements/stats/line-bottom-right-blue.svg" alt="">
      </div>
      <div class="md:mt-32 text-center">
        <div class="p-3 2xl:p-9 mb-6 xl:mb-12 mx-auto bg-white max-w-max rounded-full">
          <img src="uinel-assets/elements/stats/percent-61-blue.svg" alt="">
        </div>
        <h3 class="mx-auto w-44 xl:w-56 font-heading text-3xl xl:text-6xl leading-tighter">Feel free and take all</h3>
      </div>
      <div class="relative text-center">
        <div class="p-3 2xl:p-9 mb-6 xl:mb-12 mx-auto bg-white max-w-max rounded-full">
          <img src="uinel-assets/elements/stats/percent-2_5-blue.svg" alt="">
        </div>

<section class="relative bg-white pt-24 md:pb-24 overflow-hidden">
  <div class="hidden md:block absolute top-0 right-0 w-1/2 h-full bg-blueGray-100 rounded-b-10xl"></div>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-20 md:mb-0">
        <span class="text-xs text-gray-300 font-medium uppercase tracking-widest">Our application</span>
        <h2 class="mt-8 mb-8 text-9xl md:text-10xl xl:text-11xl font-heading font-medium leading-tight">Download app</h2>
        <p class="mb-14 text-xl text-darkBlueGray-400">Sed porttitor turpis sit amet malesuada porta lorem ut posuere.</p>
        <a class="inline-block py-5 px-10 w-full md:w-auto text-xl leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Download</a>
      </div>
      <div class="relative w-full md:w-1/2 p-20 md:py-0 md:px-4">
        <div class="md:hidden absolute bottom-0 left-0 h-full w-full bg-blueGray-100 rounded-b-10xl"></div>
        <img class="relative z-10" src="uinel-assets/images/applications/phone-full-2.png" alt="">
      </div>
    </div>
  </div>
  <img class="hidden md:block absolute top-0 right-0 h-full -mr-32" src="uinel-assets/images/applications/line-right.svg" alt="">
</section>

<section class="overflow-hidden">
  <div class="relative px-6 lg:px-12 bg-blueGray-50">
    <div class="hidden xl:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 2xl:w-full 2xl:max-w-sm">
      <div class="flex py-4 px-6 items-center rounded-3xl bg-white border-2 border-blueGray-100">
        <svg class="mr-4" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.3315 16.1329L5.32812 11.687" stroke="#8C949F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M9.93161 12.5306C13.1148 12.5306 15.6953 9.94935 15.6953 6.76528C15.6953 3.5812 13.1148 1 9.93161 1C6.74844 1 4.16797 3.5812 4.16797 6.76528C4.16797 9.94935 6.74844 12.5306 9.93161 12.5306Z" stroke="#8C949F" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <input class="w-full outline-none bg-transparent" type="search">
      </div>
    </div>
    <nav class="flex justify-between">
      <div class="flex py-8 pl-2 lg:pl-0 pr-6 lg:pr-10 items-center border-r border-darkBlueGray-100">
        <button class="navbar-burger text-blue-500">
          <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>
        </button>
      </div>
      <div class="hidden xl:flex items-center justify-between">
        <a class="relative inline-block text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">
          <div class="absolute bottom-0 right-0 flex items-center justify-center -mr-2 -mb-1 w-4 h-4 text-xs text-white bg-red-500 rounded-full">1</div>
          <svg class="h-5" 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>

<section class="relative py-24 pb-44 2xl:pt-44 bg-darkBlueGray-500 overflow-hidden" x-data="{ tab: ''}" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <h2 class="mb-10 xl:mb-24 text-9xl md:text-10xl xl:text-12xl text-white font-heading font-medium">Headphones</h2>
    <ul class="relative sm:flex pb-7 xl:pb-10 mb-14 xl:mb-20 border-b border-opacity-50 border-white">
      <li class="mb-4 sm:mr-16 xl:mr-36"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="text-xl text-gray-400 hover:text-white font-heading font-medium" href="#">Best sellers</a></li>
      <li class="mb-4 sm:mr-16 xl:mr-36"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="text-xl text-gray-400 hover:text-white font-heading font-medium" href="#">Newest</a></li>
      <li><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="text-xl text-gray-400 hover:text-white font-heading font-medium" href="#">Top rated</a></li>
      <div class="absolute -bottom-px left-0 w-1/2 sm:w-60 h-px bg-purple-500"></div>
    </ul>
    <div class="flex items-stretch flex-wrap mb-6 xl:mb-0 -mx-3">
      <div class="p-3 w-full sm:w-1/2 lg:w-1/3 xl:w-1/4">
        <div class="relative z-10 p-10 xl:px-12 xl:pt-28 xl:pb-14 h-full bg-white rounded-3xl">
          <a class="flex items-center mb-8 xl:mb-24" href="#">
            <img class="mx-auto 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>
          </p>
        </div>
      </div>

<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 md:mb-24 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 mb-24 md:mb-40">
        <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="sm:px-10">
            <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 justify-center items-center flex-wrap -mx-4">
                          <div class="w-1/2 sm:w-1/3 lg:w-1/4 xl:w-1/5 px-4 mb-24">
                            <img class="mx-auto opacity-50" src="uinel-assets/elements/ecommerce-logo-clouds/aol.svg" alt="">
                          </div>
                          <div class="w-1/2 sm:w-1/3 lg:w-1/4 xl:w-1/5 px-4 mb-24">
                            <img class="mx-auto opacity-50" src="uinel-assets/elements/ecommerce-logo-clouds/dslogo.svg" alt="">
                          </div>
                          <div class="w-1/2 sm:w-1/3 lg:w-1/4 xl:w-1/5 px-4 mb-24">

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="relative px-8 pt-12 pb-16 mb-10 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">
        <div class="w-full md:w-auto mb-6 md: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 md: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">
            <div class="flex">
              <img class="mr-2 md:mr-6" src="uinel-assets/elements/dashboard-content/star.svg" alt="">

<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="pb-24 xl:pb-0 bg-darkBlueGray-500">
  <div class="py-8 mx-10 mb-20 xl:mb-44 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 left-1/2 mt-16 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 bg-purple-900 bg-opacity-30 rounded-6xl">Newsletter</span>
        <div class="mb-14 xl:mb-28">
          <h2 class="text-9xl md:text-10xl xl:text-11xl text-white leading-tight font-heading font-medium">Subscribe to newsletter</h2>
        </div>
        <div class="flex flex-wrap mb-10 items-center justify-center">
          <input class="w-full md:max-w-md py-4 px-12 mb-4 md:mb-0 md:mr-6 text-lg leading-7 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">
          <a class="inline-block w-full md:w-auto py-4 px-10 text-xl leading-8 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="#">Join now</a>
        </div>
        <label for="">
          <input style="appearance: none;" type="checkbox">
          <p class="text-gray-200">By singning up, you agree to our Terms, Data Policy and Cookies.</p>
        </label>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="font-medium py-24 2xl:py-44 bg-blueGray-100">
    <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 class="md:grid md:grid-cols-2 md:gap-x-16 gap-8 max-w-6xl mx-auto">
        <div class="p-8 md:p-14 mb-8 md:mb-0 shadow-2xl rounded-5xl bg-white">
          <img class="mb-9 w-10 h-10" src="uinel-assets/elements/pricing/circle10-small.svg" alt="">
          <div class="flex flex-wrap items-center justify-between -mb-4">
            <h3 class="mb-4 font-heading text-7xl leading-10 tracking-tight">Beginner</h3>
            <div class="mb-4 font-heading pl-4 text-3xl flex items-center leading-5 tracking-tighter">
              <span class="text-base mr-2 -mb-1">$</span>
              <span>8.80</span>
            </div>
          </div>
          <p class="font-normal font-heading text-base leading-loose text-darkBlueGray-400 mt-6 mb-10">I haretra neque non me, finibus hart bibendum molestie.</p>
          <a class="block py-3 px-10 md:mr-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="p-8 md:p-14 mb-8 md:mb-0 shadow-2xl rounded-5xl bg-white">
          <img class="mb-9 w-10 h-10" src="uinel-assets/elements/pricing/circle11-small.svg" alt="">
          <div class="flex flex-wrap items-center justify-between -mb-4">
            <h3 class="mb-4 font-heading text-7xl leading-10 tracking-tight">Students</h3>
            <div class="mb-4 font-heading pl-4 text-3xl flex items-center leading-5 tracking-tighter">
              <span class="text-base mr-2 -mb-1">$</span>

<section class="bg-blueGray-100 py-24 2xl:py-44 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-20 xl:mb-24">
      <span class="text-sm text-gray-300 uppercase">What people say</span>
      <h2 class="mt-8 text-8xl md:text-10xl xl:text-11xl font-heading font-medium">Testimonials</h2>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20 xl:mb-24">
      <div class="w-full lg:w-1/3 px-4 lg:mt-20 mb-16 lg:mb-0">
        <div class="pb-6 bg-gray-50 rounded-7xl">
          <div class="py-5 pl-16 pr-6 flex items-center bg-gray-50 rounded-t-3xl">
            <span class="text-xl font-medium">4.3</span>
            <a class="ml-3 mr-1 inline-block" href="#">
              <img src="uinel-assets/images/team/star-gold.svg" alt="">
            </a>
            <a class="mr-1 inline-block" href="#">
              <img src="uinel-assets/images/team/star-gold.svg" alt="">
            </a>
            <a class="mr-1 inline-block" href="#">
              <img src="uinel-assets/images/team/star-gold.svg" alt="">
            </a>
            <a class="mr-1 inline-block" href="#">
              <img src="uinel-assets/images/team/star-gold.svg" alt="">
            </a>
            <a class="inline-block" href="#">

<section class="overflow-hidden">
  <div class="relative px-6 lg:px-12 bg-blue-500">
    <div class="hidden xl:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 2xl:w-full 2xl:max-w-sm">
      <div class="flex py-5 px-6 items-center rounded-3xl bg-blue-500 border-2 border-blue-400">
        <svg class="mr-4 text-white" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.3315 16.1329L5.32812 11.687" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M9.93161 12.5306C13.1148 12.5306 15.6953 9.94935 15.6953 6.76528C15.6953 3.5812 13.1148 1 9.93161 1C6.74844 1 4.16797 3.5812 4.16797 6.76528C4.16797 9.94935 6.74844 12.5306 9.93161 12.5306Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <input class="w-full outline-none bg-transparent text-xs font-medium tracking-wider text-white placeholder-white" type="search" placeholder="SEARCH">
      </div>
    </div>
    <nav class="flex justify-between">
      <div class="flex py-8 pl-2 lg:pl-0 pr-6 lg:pr-10 items-center border-r border-blue-400">
        <button class="navbar-burger text-white">
          <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>
        </button>
      </div>
      <div class="hidden xl:flex items-center justify-between">
        <a class="relative inline-block text-white hover:text-blueGray-100" href="#">
          <div class="absolute bottom-0 right-0 flex items-center justify-center -mr-2 -mb-1 w-4 h-4 text-xs text-white bg-red-500 rounded-full">1</div>
          <svg class="h-5" 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>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="px-8 md:px-12 xl:px-20 pt-14 pb-12 sm:pb-20 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>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
        <div class="pt-12 pb-20 px-8 md:px-12 lg:px-16 bg-white rounded-3xl">
          <h3 class="mb-8 text-xl font-heading font-medium">Subscriptions</h3>
          <div class="chart" data-type="radial-bar-subscriptions"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3">
        <div class="pt-12 pb-20 px-8 md:px-12 lg:px-16 bg-white rounded-3xl">
          <h3 class="mb-8 text-xl font-heading font-medium">Payments</h3>
          <div class="chart" data-type="radial-bar-payments"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-8 bg-blueGray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 xl:-mx-7">
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 xl:px-7 mb-8 xl:mb-0">
        <div class="pt-10 pb-14 px-8 bg-white rounded-3xl">
          <img class="mb-6" src="uinel-assets/elements/dashboard-stats-tiles/icon-small4.svg" alt="">
          <span class="text-6xl font-heading font-medium">248.53</span>
          <h3 class="mt-4 text-sm text-darkBlueGray-300 font-heading font-medium">Responces</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 xl:px-7 mb-8 xl:mb-0">
        <div class="pt-10 pb-14 px-8 bg-white rounded-3xl">
          <img class="mb-6" src="uinel-assets/elements/dashboard-stats-tiles/icon-small3.svg" alt="">
          <span class="text-6xl font-heading font-medium">1148.53</span>
          <h3 class="mt-4 text-sm text-darkBlueGray-300 font-heading font-medium">Projects</h3>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 xl:px-7 mb-8 xl:mb-0">
        <div class="pt-10 pb-14 px-8 bg-white rounded-3xl">
          <img class="mb-6" src="uinel-assets/elements/dashboard-stats-tiles/icon-small2.svg" alt="">
          <span class="text-6xl font-heading font-medium">310</span>
          <h3 class="mt-4 text-sm text-darkBlueGray-300 font-heading font-medium">Reports</h3>
        </div>
      </div>

<section class="text-white text-lg font-sans font-bold relative bg-darkBlueGray-500" 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">
      <a href="#">
        <img class="h-12" src="uinel-assets/logos/uinel-white-white.svg" alt="">
      </a>
      <div class="flex items-center">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="hidden xl:block mx-auto px-4 mr-20 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="white"></rect><rect y="14" width="25" height="2" fill="white"></rect></svg>
        </button>
        <ul class="hidden xl:flex px-4 mx-auto tracking-tight">
          <li class="mr-11 border-b border-blue-500 border-opacity-40 pb-px"><a class="hover:opacity-80" href="#">Product</a></li>
          <li class="mr-11 border-b border-blue-500 border-opacity-40 pb-px"><a class="hover:opacity-80" href="#">Download</a></li>
          <li class="mr-11 border-b border-blue-500 border-opacity-40 pb-px"><a class="hover:opacity-80" href="#">Pricing</a></li>
          <li class="mr-11 border-b border-blue-500 border-opacity-40 pb-px"><a class="hover:opacity-80" href="#">Reviews</a></li>
          <li class="border-b border-blue-500 border-opacity-40 pb-px"><a class="hover:opacity-80" href="#">Help</a></li>
        </ul>
      </div>
      <div class="relative hidden xl:block">
        <img class="absolute top-1/2 transform -translate-y-2/4 pl-6 mt-px" src="uinel-assets/elements/navigations/search-gray-icon.svg" alt="">
        <input class="rounded-full py-3 pl-12 pr-5 font-heading font-medium text-base text-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 outline-none" style="width: 145px;">
      </div>
    </div>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center xl:hidden focus:outline-none">

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="p-10 xl:py-12 xl:px-16 2xl:h-full max-w-6xl mx-auto bg-white rounded-5xl">
      <h3 class="mb-3 text-3xl font-heading font-medium">Media Traffic</h3>
      <p class="mb-12 text-darkBlueGray-400">Visits from media links</p>
      <div class="flex flex-wrap pb-7 mb-6 border-b border-gray-100">
        <div class="flex flex-wrap items-center w-full sm:w-1/2 mb-6 sm:mb-0">
          <img class="mr-6" src="uinel-assets/images/dashboard-tables/instagram.svg" alt="">
          <h3 class="font-heading font-medium">Instagram</h3>
        </div>
        <div class="w-full sm:w-1/2">
          <div class="relative w-full h-1 bg-indigo-100 rounded-sm">
            <div class="absolute top-0 left-0 w-1/2 h-full bg-blue-500 rounded-sm"></div>
          </div>
          <span class="block mt-2 text-sm text-darkBlueGray-400 font-heading">48%</span>
        </div>
      </div>
      <div class="flex flex-wrap pb-7 mb-6 border-b border-gray-100">
        <div class="flex flex-wrap items-center w-full sm:w-1/2 mb-6 sm:mb-0">
          <img class="mr-6" src="uinel-assets/images/dashboard-tables/twitter.svg" alt="">
          <h3 class="font-heading font-medium">Twitter</h3>
        </div>
        <div class="w-full sm:w-1/2">
          <div class="relative w-full h-1 bg-indigo-100 rounded-sm">