Tailwind CSS Components

<section class="relative font-sans bg-darkBlueGray-500 py-24 2xl:pt-64 2xl:pb-72 overflow-hidden">
  <img class="hidden lg:block absolute bottom-0 right-0 -mb-6" src="uinel-assets/images/http-codes/half-elipse-yellow.svg" alt="">
  <img class="hidden lg:block absolute top-0 left-0" src="uinel-assets/images/http-codes/half-ellipse-purple2.png" alt="">
  <div class="relative container mx-auto px-4 z-10">
    <div class="relative max-w-2xl mx-auto text-center">
      <span class="inline-block py-3 px-7 mb-10 text-xl font-medium font-heading leading-5 text-indigo-500 border border-indigo-500 rounded-6xl" href="#">Wooooooops!</span>
      <h2 class="font-medium font-heading text-white text-9xl md:text-10xl xl:text-11xl mb-12 leading-tight">We can’t find that page</h2>
      <p class="text-base text-gray-300 mb-20 leading-6">or something has gone wrong</p>
      <div class="relative z-10"><a class="inline-block py-5 px-10 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="#">Back home</a></div>
    </div>
  </div>
  <img class="absolute left-0 sm:left-10 xl:left-16 bottom-0 w-full" src="uinel-assets/images/http-codes/widget.png" alt="">
</section>

<section class="pb-24 xl:pb-32 overflow-hidden">
  <div class="relative pt-24 xl:pt-52 pb-64 lg:pb-80 bg-darkBlueGray-500 text-center rounded-b-10xl">
    <img class="absolute top-0 right-0 h-full -mr-64" src="uinel-assets/images/sign-up/half-circle.svg" alt="">
    <div class="container px-6 mx-auto">
      <span class="relative z-10 inline-block py-3 px-7 mb-8 text-lg font-medium font-heading leading-5 text-indigo-500 border border-indigo-500 rounded-6xl">Create account</span>
      <h2 class="mb-12 text-9xl md:text-10xl xl:text-11xl text-white leading-tight font-heading font-medium">Start creating a design</h2>
      <p class="text-xl text-gray-200">Sed porttitor turpis sit amet malesuada porta vivamus lobortis.</p>
    </div>
  </div>
  <div class="container px-6 mx-auto">
    <div class="relative max-w-4xl mx-auto">
      <img class="absolute top-0 left-0 max-w-xl -ml-12 -mt-8" src="uinel-assets/images/sign-up/color-circles.png" alt="">
      <div class="relative -mt-40 md:-mt-52 py-10 px-8 bg-white rounded-4xl shadow-lg">
        <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/facebook.svg" alt="">
              <p class="font-bold uppercase">Facebook</p>

<section class="relative pt-24 2xl:pt-28 font-heading font-medium text-white bg-indigo-700 rounded-t-10xl overflow-hidden">
  <div class="relative container px-4 mx-auto z-10">
    <div class="md:grid md:grid-cols-2 lg:items-center gap-8">
      <div class="mb-20 md:mb-0 text-center md:text-left">
        <h2 class="mb-14 xl:mb-16 text-9xl md:text-10xl xl:text-11xl font-heading leading-tight">Join over 1 mln designers</h2>
        <p class="mb-14 xl:mb-16 font-sans font-normal text-base leading-6">A short message that will bring your customers into the world.</p>
        <a class="inline-block py-5 px-10 text-body text-xl leading-6 font-medium tracking-tighter font-heading bg-white hover:bg-gray-50 focus:ring-2 focus:ring-white focus:ring-opacity-50 rounded-xl" href="#">Join now</a>
      </div>
      <img class="md:mr-0 mx-auto" src="uinel-assets/images/call-to-action/man.jpeg" alt="">
    </div>
  </div>
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2 px-6" src="uinel-assets/elements/call-to-action/elipse-bg-blue2.svg" alt="">
</section>

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="relative p-10 md:py-20 xl:px-20 bg-indigo-600 overflow-hidden rounded-3xl">
      <img class="absolute right-0 top-1/2 transform -translate-y-1/2" src="uinel-assets/images/dashboard-banners/header4.png" alt="">
      <div class="relative z-10 text-center">
        <h2 class="mb-4 text-6xl md:text-7xl text-white font-heading font-semibold">Generate Monthly reports</h2>
        <p class="mb-9 text-white font-heading font-medium">New tools is out now.</p>
        <div class="sm:mx-auto sm:max-w-max"><a class="block py-5 px-7 w-full text-lg leading-3 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="#">Add new report</a></div>
      </div>
    </div>
  </div>
</section>

<div class="fixed right-0 bottom-5 px-5 w-full" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="relative flex flex-wrap p-10 xl:px-24 xl:pb-20 xl:pt-16 w-full bg-white rounded-3xl">
    <a x-on:click.prevent="open=false" class="absolute right-7 top-7" href="#">
      <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="13.495" y1="0.494975" x2="1.49498" y2="12.495" stroke="#326BFF" stroke-width="1.4"></line><line x1="12.505" y1="12.495" x2="0.505026" y2="0.494976" stroke="#326BFF" stroke-width="1.4"></line></svg>
    </a>
    <div class="mb-6 w-full sm:w-3/12 lg:w-2/12">
      <img src="uinel-assets/elements/ecommerce-cookies/logo-uinel-gray2.png" alt="">
    </div>
    <div class="relative z-10 mb-10 lg:mb-0 w-full sm:w-9/12 lg:w-5/12 xl:w-6/12">
      <h2 class="mb-6 xl:mb-9 text-3xl md:text-8xl font-heading font-medium">Accept or manage</h2>
      <div class="flex flex-wrap -mx-2">
        <div class="w-full sm:w-1/2 lg:w-1/2 xl:w-1/3 px-2 mb-6 xl:mb-0">
          <p class="text-gray-300">By clicking “Accept”, you agree to the storing of cookies on your device to enhance (...)</p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/2 xl:w-1/3 px-2 mb-6 xl:mb-0">
          <p class="text-gray-300">Mauris tempus, risus id condimentum pretium, lectus nisl auctor risus, eget eleifend leo sapien</p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-full xl:w-1/3 px-2">
          <p class="text-gray-300">Praesent vel posuere mauris. Proin varius, turpis quis volutpat facilisis, leo magna pulvinar nunc</p>
        </div>
        <div class="w-full px-2 mt-6">
          <a class="flex items-center pb-1 text-xl text-body hover:text-darkBlueGray-400 font-bold tracking-tight max-w-max border-b border-darkBlueGray-400 hover:border-darkBlueGray-400" href="#">
            <span class="mr-5">Learn more</span>
            <svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">

<section>
  <div class="pb-12 pt-24 2xl:pt-40 bg-blueGray-100 rounded-b-10xl">
    <div class="container px-4 mx-auto">
      <div class="text-center">
        <h2 class="text-9xl md:text-10xl xl:text-11xl font-medium font-heading mb-12 leading-tight">Have a question?</h2>
        <p class="mb-20 text-lg text-darkBlueGray-400">Sed porttitor turpis sit amet malesuada porta lobortis.</p>
        <div class="flex items-center flex-wrap">
          <div class="w-full lg:w-1/3 mb-8 lg:mb-0 pb-4 lg:pb-0 md:px-8 xl:px-16 border-b lg:border-b-0 lg:border-r border-gray-200 border-opacity-50">
            <div class="flex items-center">
              <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon1.svg" alt="">
              <a class="text-xl lg:text-3xl font-medium" href="#">+ 44 1447881709</a>
            </div>
          </div>
          <div class="w-full lg:w-1/3 mb-8 lg:mb-0 pb-4 lg:pb-0 md:px-8 xl:px-16 border-b lg:border-b-0 lg:border-r border-gray-200 border-opacity-50">
            <div class="flex items-center">
              <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon3.svg" alt="">
              <a class="text-xl lg:text-3xl font-medium" href="#">help@uinel</a>
            </div>
          </div>
          <div class="w-full lg:w-1/3 pb-8 lg:pb-0 md:px-8 xl:px-16">
            <div class="flex items-center">
              <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon2.svg" alt="">
              <a class="text-xl lg:text-3xl font-medium" href="#">uinelchat</a>
            </div>

<section class="py-24 xl:py-44 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-6 text-9xl md:text-10xl xl:text-12xl font-heading font-medium">Features</h2>
    <p class="mb-14 xl:mb-24 max-w-md text-xl font-heading font-medium">I am ante nulla, porttitor at turpis facilisis, dignissim rutrum durum.</p>
    <div class="flex flex-wrap md:flex-nowrap items-center justify-center -mx-4">
      <div class="hidden md:block flex-shrink-0 w-auto px-4">
        <div class="flex items-center" style="max-width: 26rem;">
          <div class="flex-shrink-0 text-center mr-8">
            <div class="h-32 w-44 flex items-center justify-center bg-yellow-300 rounded-t-3xl">
              <img class="h-16" src="uinel-assets/elements/ecommerce-features/icon1.svg" alt="">
            </div>
            <div class="py-4 px-2 bg-yellow-500 rounded-b-3xl">
              <span class="font-heading font-bold">Battery</span>
            </div>
          </div>
          <div>
            <h3 class="mb-4 text-lg font-heading font-medium">Superpower</h3>
            <p class="text-gray-400">Donec laoreet sem sollicitudin, mattis mi in, tristique.</p>
          </div>
        </div>
      </div>
      <div class="hidden sm:block w-1/12 px-4">
        <a class="inline-block hover:text-darkBlueGray-400" href="#">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">

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

<section class="pt-10 px-4 lg:px-16 pb-10 lg:pb-40">
  <div class="relative py-24 xl:pt-52 xl:pb-80">
    <img class="absolute top-0 left-0 w-full h-full rounded-9xl object-cover" src="uinel-assets/images/ecommerce-banners/background-banner-2.png" alt="">
    <div class="relative container px-4 mb-20 mx-auto">
      <div class="px-4 md:pl-20 lg:pl-40">
        <p class="mb-1 text-base md:text-xl font-heading font-medium">Brighter - stronger.</p>
        <h1 class="mb-8 text-9xl md:text-10xl lg:text-12xl font-heading font-medium">Series 9</h1>
        <p class="mb-14 md:mb-20 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>
    <div class="container px-4 mx-auto">
      <div class="sm:absolute sm:right-10 xl:right-28 xl:-bottom-40 sm:w-full sm:max-w-lg md:max-w-2xl lg:max-w-4xl xl:max-w-6xl flex flex-wrap max-w-xs mx-auto">
        <div class="p-3 w-full sm:w-1/2">
          <div class="relative flex flex-wrap justify-between items-center bg-white z-10 rounded-3xl overflow-hidden shadow-lg">
            <div class="w-full md:w-1/2 p-6 xl:px-20 xl:pr-4">
              <h3 class="mb-3 font-heading text-3xl lg:text-7xl leading-tighter">Series 7.</h3>
              <div class="flex items-center gap-3"><a class="inline-block font-heading text-lg text-purple-500 hover:text-purple-600 leading-tighter" href="#">Discover</a></div>
            </div>
            <img class="w-full md:w-1/2 lg:w-auto h-32 md:h-auto lg:h-40 xl:h-52 object-cover" src="uinel-assets/images/ecommerce-banners/hero5-teacher.jpg" alt="">
          </div>
          <div class="relative -top-12 lg:-top-7 px-5">
            <div class="py-6 bg-gray-50 bg-opacity-70 rounded-3xl shadow-lg"></div>
          </div>

<section class="font-medium bg-blueGray-100 pt-24 pb-12 2xl:py-44 rounded-b-10xl">
  <div class="container px-4 mx-auto">
    <div class="mb-10 text-center">
      <span class="inline-block mb-10 uppercase tracking-widest text-xs leading-4 text-gray-300">Newsletter</span>
      <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">Subscribe to our newsletter</h2>
    </div>
    <ul class="md:flex md:justify-center mb-20 xl:mb-28">
      <li class="flex md:max-w-max py-3 px-6 mb-3 leading-6 font-normal text-darkBlueGray-400 bg-white rounded-8xl shadow-xl">
        <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
        <span>Complete tools</span>
      </li>
      <li class="flex md:mx-3 md:max-w-max py-3 px-6 mb-3 leading-6 font-normal text-darkBlueGray-400 bg-white rounded-8xl shadow-xl">
        <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
        <span>100 team members</span>
      </li>
      <li class="flex md:max-w-max py-3 px-6 mb-3 leading-6 font-normal text-darkBlueGray-400 bg-white rounded-8xl shadow-xl">
        <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
        <span>100GB cloud storage</span>
      </li>
    </ul>
    <div class="relative max-w-5xl mx-auto">
      <img class="hidden md:block absolute -bottom-5" src="uinel-assets/elements/newsletter/bg-email.svg" alt="">
      <img class="md:hidden absolute -bottom-5 h-64 object-cover rounded-xl" src="uinel-assets/elements/newsletter/bg-email.svg" alt="">
      <div class="md:flex md:items-center md:justify-center bg-white rounded-3xl py-20 px-8 m-5 relative z-10">

<section class="bg-white py-24 2xl:pt-44 2xl:pb-48">
  <div class="container px-4 mx-auto">
    <span class="mb-9 block font-medium uppercase tracking-widest text-center text-xs leading-4 text-gray-300">Clouds</span>
    <h2 class="mb-16 font-heading font-medium text-center text-6xl leading-relaxed">Trusted by brands all over the world</h2>
    <div class="flex flex-wrap -mx-2">
      <div class="w-full md:w-1/2 lg:w-1/4 xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 bg-gray-50 rounded-9xl">
          <div class="flex items-center justify-center bg-white w-16 h-16 rounded-5xl shadow-sm">
            <img class="h-8" src="uinel-assets/brands/spotify.png" alt="">
          </div>
          <p class="ml-6 text-xl font-heading font-medium">Spotify</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 lg:mt-16 bg-gray-50 rounded-9xl">
          <div class="flex items-center justify-center w-16 h-16 bg-white rounded-5xl shadow-sm">
            <img class="h-8" src="uinel-assets/brands/slack.png" alt="">
          </div>
          <p class="ml-6 text-xl font-heading font-medium">Slack</p>
        </div>
      </div>
      <div class="hidden xl:block xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 lg:mt-16 bg-gray-50 rounded-9xl">
          <div class="flex items-center justify-center w-16 h-16 bg-white rounded-5xl shadow-sm">

<div class="fixed bottom-0 left-0 right-0 z-50" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="relative px-8 md:px-14 py-5 bg-purple-500 rounded-t-3xl z-50">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/3 xl:w-1/4 px-4 mb-6 lg:mb-0">
        <div class="flex items-center">
          <p class="font-medium text-white font-heading text-3xl leading-10">Manage Cookies</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 xl:w-5/12 flex items-center px-4 mb-6 lg:mb-0">
        <p class="text-base text-white leading-7">By clicking Accept, you agree to the storing of cookies on your device to enhance site navigation. Etiam commodo ipsum et imperdiet imperdiet.</p>
      </div>
      <div class="lg:max-w-max lg:flex w-full md:w-1/3 px-4 lg:ml-auto"><a x-on:click.prevent="open = false" class="inline-block py-3 px-10 mr-4 mb-2 lg:mb-0 w-full text-xl leading-7 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="#">Accept</a><a class="inline-block py-3 px-10 w-full text-xl leading-7 font-medium tracking-tighter font-heading text-center bg-white hover:bg-gray-50 focus:ring-2 focus:ring-white focus:ring-opacity-50 rounded-xl" href="#">More</a></div>
    </div>
  </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="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-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>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <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">Engaged Users</h3>
          <div class="flex items-center mb-4">
            <span class="text-3xl font-heading font-medium">32.78%</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">

<section class="relative bg-white py-24 2xl:py-28 overflow-hidden">
  <div class="relative container px-4 mx-auto">
    <div class="flex items-center flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <img src="uinel-assets/images/applications/phone-full.png" alt="">
      </div>
      <div class="w-full md:w-1/2 px-4">
        <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>
  </div>
</section>

<section class="py-24 2xl:pt-52 font-medium bg-blueGray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <span class="block mb-9 uppercase tracking-widest text-center text-xs leading-4 text-gray-300">Discover out blog</span>
    <h2 class="mb-20 xl:mb-32 text-9xl md:text-10xl xl:text-11xl text-center leading-tight">Latest blog</h2>
    <div class="lg:relative lg:grid lg:grid-cols-12 lg:top-96 lg:-mt-96">
      <div class="lg:col-start-1 lg:col-end-6 mb-8 lg:mb-0">
        <div class="relative mx-auto mb-8 lg:mb-20 max-w-max">
          <img src="uinel-assets/images/blog/blog4-learning.png" alt="">
          <div class="absolute left-1/2 transform -translate-x-1/2 bottom-12 w-full px-2">
            <div class="py-12 px-6 md:px-14 bg-white 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>
              <a class="inline-block hover:underline" href="#">
                <h3 class="font-heading leading-normal text-3xl xl:text-7xl">Get inspired from the all designers</h3>
              </a>
            </div>
          </div>
          <div class="h-48 bg-gray-50 rounded-b-9xl"></div>
        </div>
        <div class="relative mx-auto mb-8 lg:mb-20 max-w-max">
          <img src="uinel-assets/images/blog/blog4-meeting.png" alt="">

<section class="font-medium bg-blueGray-100 pt-24 pb-12 2xl:pt-44 2xl:pb-56 rounded-b-10xl">
  <div class="container px-4 mx-auto">
    <span class="uppercase tracking-widest text-xs leading-4 mb-10 block text-center text-gray-300">Newsletter</span>
    <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-10 text-center">Subscribe to our newsletter</h2>
    <ul class="md:flex md:justify-center mb-20 xl:mb-28">
      <li class="flex md:max-w-max leading-6 font-normal text-darkBlueGray-400 mb-3 bg-white rounded-8xl py-3 px-6 shadow-xl">
        <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
        <span>Complete tools</span>
      </li>
      <li class="flex md:mx-3 md:max-w-max leading-6 font-normal text-darkBlueGray-400 mb-3 bg-white rounded-8xl py-3 px-6 shadow-xl">
        <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
        <span>100 team members</span>
      </li>
      <li class="flex md:max-w-max leading-6 font-normal text-darkBlueGray-400 mb-3 bg-white rounded-8xl py-3 px-6 shadow-xl">
        <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
        <span>100GB cloud storage</span>
      </li>
    </ul>
    <div class="relative max-w-5xl mx-auto">
      <img class="hidden md:block absolute -bottom-5" src="uinel-assets/elements/newsletter/bg-email.svg" alt="">
      <img class="md:hidden absolute -bottom-5 h-64 object-cover rounded-xl" src="uinel-assets/elements/newsletter/bg-email.svg" alt="">
      <div class="md:flex md:items-center md:justify-center bg-white rounded-3xl py-20 px-8 m-5 relative z-10">
        <h3 class="text-4xl leading-10 mb-6 md:mb-0">Enter your Email:</h3>
        <div class="relative mb-3 md:mb-0 md:ml-9 md:mr-6">

<section class="font-medium bg-white overflow-hidden">
  <div class="lg:grid lg:grid-cols-2 gap-8 xl:gap-36">
    <div class="px-10 py-24 lg:flex lg:items-center bg-blueGray-100 rounded-b-10xl">
      <div class="relative max-w-max mx-auto">
        <img src="uinel-assets/images/faqs/widget2.png" alt="">
      </div>
    </div>
    <div class="container mx-auto">
      <div class="max-w-4xl px-4 lg:pl-0 py-24 2xl:pt-44 2xl:pb-52">
        <span class="uppercase tracking-widest text-xs text-gray-300 leading-4 mb-9 block text-center lg:text-left">The most popular</span>
        <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-20 xl:mb-36 text-center lg:text-left">FAQ's</h2>
        <div class="grid gap-4 mb-20 xl:mb-24">
            <div x-data="{ accordion: false }">
                <div :class="{'hidden': !accordion }" class="hidden mx-auto w-3/4 md:w-80 md:ml-16 bg-purple-500" style="height:3px;"></div>
                <button x-on:click="accordion = !accordion" class="w-full border border-black border-opacity-10 rounded-3xl py-9 px-6 md:px-16">
                    <div class="flex items-start justify-between">
                        <h3 class="font-heading text-left text-4xl leading-tighter leading-10 mr-16">How should i develop my workflow over time?</h3>
                        <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <img class="mt-4" src="uinel-assets/elements/faqs/arrow-down-black.svg" alt="">
                        </span>
                    </div>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                        <p class="text-lg text-left font-normal leading-6 mt-5">The nulla commodo, commodo eros a, tristique lectus.</p>
                    </div>

<div x-data="{ category: '' }" x-init="category = $refs.category1.textContent">
  <section class="p-8 pb-0 font-medium bg-blueGray-100">
    <div class="relative py-24 2xl:pt-52 2xl:pb-36 bg-white z-10 rounded-t-10xl">
      <div class="container px-4 mx-auto">
        <h2 class="mb-16 xl:mb-28 font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">Our works</h2>
        <div class="grid md:grid-cols-2 md:items-start xl:grid-cols-12 gap-20">
          <div class="xl:col-start-1 xl:col-end-5 flex flex-col py-6 px-5 font-heading text-xl leading-7 xl:max-w-xs bg-gray-50 rounded-8xl">
            <a class="flex items-center justify-between py-5 px-8 bg-white rounded-5xl shadow-lg" :class="{'bg-white shadow-lg': category == $refs.category1.textContent}" x-on:click.prevent="category = $refs.category1.textContent" href="#">
              <span x-ref="category1">Mobile</span>
              <img :class="{'hidden': category !== $refs.category1.textContent}" src="uinel-assets/elements/portfolio/arrow-right-black.svg" alt="">
            </a>
            <a class="flex items-center justify-between py-5 px-8 rounded-5xl" :class="{'bg-white shadow-lg': category == $refs.category2.textContent}" x-on:click.prevent="category = $refs.category2.textContent" href="#">
              <span x-ref="category2">Web Design</span>
              <img :class="{'hidden': category !== $refs.category2.textContent}" class="hidden" src="uinel-assets/elements/portfolio/arrow-right-black.svg" alt="">
            </a>
            <a class="flex items-center justify-between py-5 px-8 rounded-5xl" :class="{'bg-white shadow-lg': category == $refs.category3.textContent}" x-on:click.prevent="category = $refs.category3.textContent" href="#">
                <span x-ref="category3">Commercial</span>
                <img :class="{'hidden': category !== $refs.category3.textContent}" class="hidden" src="uinel-assets/elements/portfolio/arrow-right-black.svg" alt="">
            </a>
            <a class="flex items-center justify-between py-5 px-8 rounded-5xl" :class="{'bg-white shadow-lg': category == $refs.category4.textContent}" x-on:click.prevent="category = $refs.category4.textContent" href="#">
                <span x-ref="category4">Social</span>
                <img :class="{'hidden': category !== $refs.category4.textContent}" class="hidden" src="uinel-assets/elements/portfolio/arrow-right-black.svg" alt="">
            </a>
          </div>

<section class="py-24 2xl:py-44">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-16">
      <div class="w-full lg:w-3/6 px-4 mb-20 lg:mb-0">
        <div class="lg:flex mb-14 xl:mb-16">
          <div class="mr-16 mb-6">
            <img src="uinel-assets/images/footers/avatar.png" alt="">
          </div>
          <div>
            <div class="max-w-max py-5 px-12 mb-3 bg-white rounded-2xl shadow-4xl">
              <h3 class="font-bold text-3xl leading-6">Chilo</h3>
              <p class="leading-6">How many hours do u need?</p>
            </div>
            <div class="max-w-max flex pt-5 pb-4 px-8 ml-6 bg-white rounded-2xl shadow-4xl">
              <div class="w-2 h-2 rounded-full bg-gray-200"></div>
              <div class="mx-2 w-2 h-2 rounded-full bg-gray-200"></div>
              <div class="relative -top-1 w-2 h-2 bg-blue-500 rounded-full"></div>
            </div>
          </div>
        </div>
        <h2 class="max-w-md text-6xl xl:text-8xl font-medium font-heading mb-8 leading-tighter">Have any question? Don’t waste time! Send a message.</h2>
        <p class="text-xl text-darkBlueGray-400 mb-14 xl:mb-16">Fusce sodales vitae lorem vitae tempus.</p>
        <a class="inline-block py-5 px-10 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="#">Contact</a>
      </div>

<section class="text-gray-50 font-heading font-medium relative bg-blueGray-100" x-data="{ mobileNavOpen: false }">
  <div class="flex">
    <div class="hidden md:block">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="bg-white h-full px-12 flex items-center focus:outline-none">
        <img class="max-w-max" src="uinel-assets/elements/navigations/menu-icon-black.svg" alt="">
      </button>
    </div>
    <nav class="flex justify-between w-full px-6 lg:px-12 py-8">
      <div class="pr-12 flex w-full items-center justify-between">
        <a class="md:absolute md:top-1/2 md:left-1/2 md:transform md:-translate-y-1/2 md:-translate-x-1/2" href="#">
          <img class="h-12" src="uinel-assets/logos/uinel-white-black.svg" alt="">
        </a>
        <div class="relative hidden md:block ml-auto">
          <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="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 rounded-full" style="width: 145px;">
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center md:hidden text-body 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="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
      </button>
    </nav>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>