Tailwind CSS Components

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 xl:-mx-8">
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4 xl:p-8 xl:py-6">
        <div class="relative p-8 md:p-12 bg-white rounded-2xl">
          <span class="absolute right-4 top-4 py-1 px-3 text-xxs leading-5 text-red-500 font-bold uppercase bg-orange-200 rounded-2xl">5 Tasks</span>
          <div class="flex flex-wrap items-center mb-8">
            <div class="lg:w-1/3 2xl:w-24 mb-6 lg:mb-0">
              <div class="flex items-center justify-center bg-white rounded-5xl shadow-sm">
                <img class="p-2" src="uinel-assets/images/dashboard-content/av1-circle.png" alt="">
              </div>
            </div>
            <div class="w-full lg:w-2/3 md:pl-3 xl:pl-9">
              <h2 class="text-xl font-heading font-medium 2xl:leading-10">Ainsley Stones</h2>
              <p class="text-darkBlueGray-400 font-heading">UX/UI Designer</p>
            </div>
          </div>
          <p class="mb-8 text-darkBlueGray-400 font-heading">I haretra neque non mi aliquam, fine hart bibendum molestie.</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>

<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="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">Recent Transactions</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>
                <th class="flex items-center pl-9 h-24 bg-white text-left">
                  <input class="appearance-none w-6 h-6 mr-9 bg-white border-2 border-darkbluegray-50 rounded-md" type="checkbox">

<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 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 px-4 xl:px-7 mb-6">
        <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 px-4 xl:px-7 mb-6">
        <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 px-4 xl:px-7 mb-6 md: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="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="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 mb-6">
        <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 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">Inventory</h3>
          <div class="chart" data-type="radial-bar-inventory"></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">Sales</h3>

<section class="bg-white py-24 2xl:py-44 overflow-hidden">
  <div class="container px-4 mx-auto">
    <span class="text-sm text-gray-300 uppercase">What people say</span>
    <h2 class="mt-8 mb-24 text-8xl md:text-10xl xl:text-11xl font-heading font-medium">Testimonials</h2>
    <div class="relative flex flex-wrap -mx-4 mb-20 lg:mb-32">
      <div class="hidden md:block absolute top-0 left-0 ml-40 mt-10 py-6 w-72 lg:w-60 border-t-2 border-r-2 border-blue-500 rounded-tr-xl z-10"></div>
      <div class="hidden lg:block absolute top-0 left-1/2 ml-40 mt-10 py-6 w-60 border-t-2 border-r-2 border-blue-500 rounded-tr-xl z-10"></div>
      <div class="hidden md:block lg:hidden absolute top-1/2 left-0 ml-40 mt-20 py-6 w-72 border-t-2 border-r-2 border-blue-500 rounded-tr-xl z-10"></div>
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4 mb-20 md:mb-0 bg-white">
        <img class="h-32 w-32 mb-12 rounded-full" src="uinel-assets/images/team/photo1.png" alt="">
        <h3 class="mb-2 text-3xl font-medium">Ainsley Stones</h3>
        <p class="mb-8 text-xl font-heading">Co-Founder</p>
        <p class="text-base text-gray-400 leading-relaxed">Morbi sit amet massa et ex volutpat vestibulum dolor. In hac habitasse dictumst.</p>
      </div>
      <div class="relative w-full md:w-1/2 lg:w-1/4 px-4 mb-20 lg:mb-0 md:mt-32 bg-white">
        <img class="h-32 w-32 mb-12 rounded-full" src="uinel-assets/images/team/photo2.png" alt="">
        <h3 class="mb-2 text-3xl font-medium">Faustina H. Fawn</h3>
        <p class="mb-8 text-lg">CEO</p>
        <p class="text-base text-gray-400 leading-relaxed">Morbi sit amet massa et ex volutpat vestibulum dolor. In hac habitasse dictumst.</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-20 md:mb-0 bg-white">
        <img class="h-32 w-32 mb-12 rounded-full" src="uinel-assets/images/team/photo3.png" alt="">
        <h3 class="mb-2 text-3xl font-medium">Jasmine Joy</h3>
        <p class="mb-8 text-xl font-heading">Manager</p>

<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="relative pb-24 xl:pb-44 bg-darkBlueGray-500 overflow-hidden">
  <div class="py-8 mx-10 mb-20 xl:mb-52 bg-white"></div>
  <img class="absolute top-0 right-0 lg:h-full -mr-32 md:-mr-64" src="uinel-assets/images/ecommerce-newsletter/newsletter-right-graphic.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="w-full md:w-2/3 xl:w-1/2">
      <div class="mb-24">
        <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>
        <h2 class="mb-10 text-9xl md:text-10xl xl:text-11xl text-white leading-tight font-heading font-medium">Subscribe to newsletter</h2>
        <p class="mb-14 text-2xl font-heading font-medium text-white">Phasellus eget pretium me lobortis neque.</p>
        <div class="flex items-center mb-3">
          <svg class="mr-6 text-blueGray-400" width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.45337 11.2668L0 5.81348L0.720216 5.09326L5.45337 9.82641L15.2798 0L16 0.720215L5.45337 11.2668Z" fill="currentColor"></path>
          </svg>
          <p class="text-blueGray-400">100GB cloud storage</p>
        </div>
        <div class="flex items-center">
          <svg class="mr-6 text-blueGray-400" width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.45337 11.2668L0 5.81348L0.720216 5.09326L5.45337 9.82641L15.2798 0L16 0.720215L5.45337 11.2668Z" fill="currentColor"></path>
          </svg>
          <p class="text-blueGray-400">Unlimited anonymous board editors</p>
        </div>
      </div>
      <div class="flex flex-wrap items-center">
        <input class="w-full md:w-auto 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">

<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 py-8 xl:py-4 justify-between">
      <ul class="hidden xl:flex flex-wrap items-center mr-auto">
        <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>Tasks</span>

<section class="bg-blueGray-100 py-24 2xl:py-44 overflow-hidden" style="border-top-left-radius: 80px; border-top-right-radius: 80px;" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-24">
      <span class="text-sm text-gray-300 uppercase">What people say</span>
      <h2 class="mt-8 text-9xl md:text-10xl xl:text-11xl font-heading font-medium">Testimonials</h2>
    </div>
    <div class="flex flex-wrap items-center justify-center mb-16 md:mb-28">
      <div class="w-auto px-4 mb-4 xl:mb-0 text-center order-last sm:order-first">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.21015 10.4594C7.59662 10.8128 7.59662 11.3841 7.21015 11.7349C6.82369 12.0871 6.19929 12.0897 5.81282 11.7349L0.289847 6.63794C-0.096617 6.28579 -0.096617 5.71584 0.289847 5.36108L5.81282 0.264109C6.19785 -0.0880364 6.82369 -0.0880363 7.21015 0.264109C7.59662 0.617558 7.59662 1.18882 7.21015 1.53966L2.68073 6.00147L7.21015 10.4594Z" fill="black"></path>
          </svg>
        </button>
      </div>
      <div class="overflow-hidden sm: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-4/5 mx-auto mb-16 sm:mb-0">
                  <div class="bg-gray-50 rounded-7xl shadow-lg">
                    <div class="flex flex-wrap lg:items-end pb-8">
                      <div class="w-full lg:w-1/2 self-stretch rounded-tr-3xl lg:rounded-tr-none rounded-tl-3xl overflow-hidden">
                        <img class="h-full w-full object-cover" src="uinel-assets/images/team/photo-big.png" alt="">
                      </div>
                      <div class="w-full lg:w-1/2">

<section class="py-8 bg-blueGray-50" x-data="{ showContent: false }">
  <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="pt-14 px-8 pb-12 bg-white rounded-3xl">
          <div class="flex flex-wrap justify-between items-center pl-9">
            <div class="w-full md:w-auto mb-10 md:mb-0">
              <div class="flex flex-wrap items-start mb-2">
                <h3 class="w-full md:w-auto text-3xl font-heading font-medium leading-10">Project in Progress</h3>
                <div class="order-first md:order-last mb-2 md:mb-0 px-2 md:ml-2 text-center bg-green-200 bg-opacity-70 rounded-full">
                  <span class="text-xxs align-middle font-bold text-green-500 leading-7">16 NEW</span>
                </div>
              </div>
              <p class="text-darkBlueGray-400 font-heading">About recent tasks</p>
            </div>
            <div class="w-full max-w-max pr-9"><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="#">Add new</a></div>
          </div>
          <div class="overflow-x-auto">
            <div class="min-w-max overflow-hidden">
              <table class="table-auto w-full">
                <tbody>
                  <tr>
                    <td class="p-0">
                      <div class="flex items-center pl-9 p-5 mt-14 h-20 bg-blueGray-50 min-w-max border-l border-t border-b border-gray-100 rounded-tl-5xl rounded-bl-5xl">

<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">
  <div class="container px-4 mx-auto">
    <div class="relative p-8 md:p-12 pb-16 text-center bg-white rounded-2xl">
      <div class="flex items-center justify-center mx-auto w-24 h-24 mb-6 bg-white rounded-5xl shadow-sm">
        <img src="uinel-assets/images/dashboard-content/av1-circle.png" alt="">
      </div>
      <h2 class="text-xl font-heading font-medium leading-10">Ainsley Stones</h2>
      <p class="mb-10 text-darkBlueGray-400 font-heading leading-6">UX/UI Designer</p>
      <p class="mb-8 text-darkBlueGray-400 font-heading leading-6">I haretra neque non me lorem ipsum dolor aliquam, finibus hart bibendum molestie.</p>
      <div class="sm:w-80 sm:mx-auto">
        <div class="flex items-start md: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="">
            <h3 class="text-sm font-medium tracking-tighter">Company name</h3>
          </div>
          <p class="text-sm text-darkBlueGray-400 font-heading">Shuffle</p>
        </div>

<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 px-4 xl:px-7 mb-6">
        <div class="pt-10 pb-14 px-8 text-center bg-white rounded-3xl">
          <img class="block mx-auto 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 px-4 xl:px-7 mb-6">
        <div class="pt-10 pb-14 px-8 text-center bg-white rounded-3xl">
          <img class="block mx-auto 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 px-4 xl:px-7 mb-6 md:mb-0">
        <div class="pt-10 pb-14 px-8 text-center bg-white rounded-3xl">
          <img class="block mx-auto 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="overflow-hidden">
  <div class="px-6 lg:px-12 bg-blueGray-50">
    <nav class="flex justify-between">
      <div class="flex py-8 pl-2 lg:pl-0 pr-6 lg:pr-10 mr-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>
      <ul class="hidden xl:flex flex-wrap items-center mr-auto">
        <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>Tasks</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>

<section class="relative pb-24 xl:pb-44 bg-darkBlueGray-500 overflow-hidden">
  <div class="py-8 mx-10 mb-20 xl:mb-44 bg-white"></div>
  <img class="absolute top-0 right-0 h-full md:h-auto" src="uinel-assets/elements/ecommerce-newsletter/circle-outside.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-4xl xl:max-w-7xl mx-auto pt-20 pb-24 px-6 md:px-20 bg-purple-500 rounded-3xl">
      <img class="absolute top-0 right-0 h-16 -mt-8 mr-24 md:mr-80" src="uinel-assets/elements/ecommerce-newsletter/av1.png" alt="">
      <img class="absolute top-0 right-0 h-16 mt-24 -mr-8" src="uinel-assets/elements/ecommerce-newsletter/av2.png" alt="">
      <div class="relative z-10">
        <div class="flex flex-wrap items-end mb-12">
          <h2 class="w-full md:w-auto mb-4 md:mb-0 text-6xl md:text-8xl lg:text-9xl font-heading font-medium text-white leading-10">Newsletter</h2>
          <div class="hidden md:block w-px h-7 mx-4 bg-white bg-opacity-10"></div>
          <p class="text-xl text-white text-opacity-40 leading-4">Join our community</p>
        </div>
        <div class="flex flex-wrap">
          <input class="w-full md:w-auto xl:max-w-lg py-4 px-12 mb-4 md:mb-0 md:mr-6 leading-7 text-lg border-2 border-blue-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="email" placeholder="Drop Email address">
          <button class="inline-block w-full md:w-auto h-full py-4 px-10 leading-8 font-heading font-medium tracking-tighter text-xl text-white bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl">Join&nbsp;now</button>
        </div>
      </div>
      <img class="absolute bottom-0 md:top-0 md:h-full right-0 w-1/3 xl:w-1/2" src="uinel-assets/elements/ecommerce-newsletter/circle-inside.svg" alt="">
    </div>
  </div>
</section>

<section class="py-8 bg-blueGray-50" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="order-1 w-full lg:w-2/3 p-4">
        <div class="pt-14 px-8 pb-12 bg-white rounded-3xl">
          <div class="flex flex-wrap justify-between items-center pl-9">
            <div class="w-full md:w-auto mb-10 md:mb-0">
              <div class="flex flex-wrap items-start mb-2">
                <h3 class="w-full md:w-auto text-3xl font-heading font-medium leading-10">Project in Progress</h3>
                <div class="order-first md:order-last mb-2 md:mb-0 px-2 md:ml-2 text-center bg-green-200 bg-opacity-70 rounded-full">
                  <span class="text-xxs align-middle font-bold text-green-500 leading-7">16 NEW</span>
                </div>
              </div>
              <p class="text-darkBlueGray-400 font-heading">About recent tasks</p>
            </div>
            <div class="w-full max-w-max pr-9"><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="#">Add new</a></div>
          </div>
          <div class="overflow-x-auto">
            <div class="min-w-max overflow-hidden">
              <table class="table-auto w-full">
                <tbody>
                  <tr>
                    <td class="p-0">
                      <div class="flex items-center pl-9 p-5 mt-14 h-20 bg-blueGray-50 min-w-max border-l border-t border-b border-gray-100 rounded-tl-5xl rounded-bl-5xl">

<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-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 md:-mx-6 xl:-mx-8">
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 md:px-6 xl:px-8 mb-16">
        <div class="relative bg-gray-50 rounded-8xl">
          <img class="w-full mb-8" src="uinel-assets/images/dashboard-content/bg-linear.png" alt="">
          <div class="px-4 pb-12">
            <div class="relative -mt-24 px-4 md:px-9 pb-6 pt-16 mb-8 text-center bg-white rounded-5xl shadow-2xl">
              <img class="mx-auto absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2" src="uinel-assets/images/dashboard-content/av1-circle-xl.png" alt="">
              <h2 class="text-xl font-heading font-medium leading-10">Ainsley Stones</h2>
              <p class="mb-10 text-darkBlueGray-400 font-heading">UX/UI Designer</p>
              <div class="flex flex-wrap justify-center mb-10">
                <img class="mr-6" src="uinel-assets/elements/dashboard-content/plane.svg" alt="">
                <p class="text-sm font-heading font-medium tracking-tighter">a.stones@e.mail</p>
              </div>
              <div class="flex flex-wrap -mx-1 mb-10">
                <div class="w-full xl:w-1/3 p-1">
                  <div class="py-1 px-1 leading-7 text-blue-500 font-bold tracking-tight border border-gray-100 hover:border-gray-200 cursor-pointer rounded-full">Design</div>
                </div>
                <div class="w-full xl:w-1/3 p-1">
                  <div class="py-1 px-1 leading-7 text-blue-500 font-bold tracking-tight border border-gray-100 hover:border-gray-200 cursor-pointer rounded-full">UX/UI</div>
                </div>
                <div class="w-full xl:w-1/3 p-1">
                  <div class="py-1 px-1 leading-7 text-blue-500 font-bold tracking-tight border border-gray-100 hover:border-gray-200 cursor-pointer rounded-full">Motion</div>

<section class="relative pb-24 xl:pb-44 bg-darkBlueGray-500 overflow-hidden">
  <div class="py-8 mx-10 mb-20 xl:mb-44 bg-white"></div>
  <img class="absolute top-0 right-0 h-full md:h-auto" src="uinel-assets/elements/ecommerce-newsletter/circle-outside.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-14 xl:mb-0">
        <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>
        <h2 class="text-9xl sm:text-10xl md:text-12xl font-heading font-medium text-white leading-tight">Stay with us</h2>
      </div>
      <div class="w-full xl:w-2/3 px-4">
        <div class="relative pt-20 pb-24 px-6 md:px-20 bg-purple-500 rounded-3xl">
          <img class="absolute top-0 right-0 h-16 -mt-8 mr-24 md:mr-80" src="uinel-assets/elements/ecommerce-newsletter/av1.png" alt="">
          <img class="absolute top-0 right-0 h-16 mt-24 -mr-8" src="uinel-assets/elements/ecommerce-newsletter/av2.png" alt="">
          <div class="relative z-10">
            <div class="flex items-center mb-12">
              <h2 class="text-6xl md:text-8xl lg:text-9xl font-heading font-medium text-white leading-10">Our newsletter</h2>
              <img src="uinel-assets/elements/ecommerce-newsletter/fire.svg" alt="">
            </div>
            <div class="flex flex-wrap">
              <input class="w-full md:w-auto 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="Drop Email address">
              <button class="inline-block w-full md:w-auto h-full py-4 px-10 leading-8 font-heading font-medium tracking-tighter text-xl text-white bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl">Join&nbsp;now</button>
            </div>
          </div>
          <img class="absolute bottom-0 md:top-0 md:h-full right-0 w-1/3 xl:w-1/2" src="uinel-assets/elements/ecommerce-newsletter/circle-inside.svg" alt="">