Tailwind CSS Components

<section class="relative pt-24 pb-36 bg-black overflow-hidden"><img class="absolute right-0 top-0" src="gradia-assets/elements/teams/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="max-w-xl">
      <h2 class="mb-6 font-heading font-bold text-6xl sm:text-7xl text-white" >Team Members</h2>
      <p class="mb-20 text-lg text-gray-400" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 text-center transform hover:-translate-y-3 bg-white transition ease-out duration-1000"><img class="mb-7 mx-auto" src="gradia-assets/images/teams/avatar-oval-md.png" alt="">
          <h3 class="mb-1 font-bold text-gray-900 text-xl" >Eleanor Pena</h3>
          <p class="pb-8 text-sm text-gray-500 border-b border-gray-200" >Team Leader</p><a class="inline-block pt-8 font-heading font-semibold text-xs uppercase text-gray-900 hover:text-gray-700" href="#" >Contact us</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 text-center transform hover:-translate-y-3 bg-white transition ease-out duration-1000"><img class="mb-7 mx-auto" src="gradia-assets/images/teams/avatar-oval-md2.png" alt="">
          <h3 class="mb-1 font-bold text-gray-900 text-xl" >Cameron Williamson</h3>
          <p class="pb-8 text-sm text-gray-500 border-b border-gray-200" >Software Developer</p><a class="inline-block pt-8 font-heading font-semibold text-xs uppercase text-gray-900 hover:text-gray-700" href="#" >Contact us</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 text-center transform hover:-translate-y-3 bg-white transition ease-out duration-1000"><img class="mb-7 mx-auto" src="gradia-assets/images/teams/avatar-oval-md3.png" alt="">
          <h3 class="mb-1 font-bold text-gray-900 text-xl" >Kathryn Murphy</h3>
          <p class="pb-8 text-sm text-gray-500 border-b border-gray-200" >Scrum Master</p><a class="inline-block pt-8 font-heading font-semibold text-xs uppercase text-gray-900 hover:text-gray-700" href="#" >Contact us</a>
        </div>

<section class="relative pt-16 pb-56 overflow-hidden"><img class="absolute left-1/2 transform -translate-x-1/2 bottom-0" src="gradia-assets/elements/http-codes/radial3.svg" alt="">
  <div class="relative z-10 container mx-auto px-4"><img class="mx-auto mb-36" src="gradia-assets/logos/gradia-name-black.svg" alt=""><img class="mb-11 mx-auto" src="gradia-assets/elements/http-codes/sad.svg" alt="">
    <div class="md:max-w-xl mx-auto mb-12">
      <h2 class="mb-5 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900 text-center" >Oh no! The page does not exist.</h2>
    </div>
    <div class="group relative md:max-w-max mx-auto">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
      <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 group-hover:text-white uppercase overflow-hidden rounded-md">
        <div class="relative p-5 bg-gradient-green overflow-hidden rounded-md">
          <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gray-900 transition ease-in-out duration-500"></div>
          <div class="relative z-10 flex flex-wrap items-center justify-center -m-1">
            <div class="w-auto p-1">
              <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 14.75L2.75 9.5M2.75 9.5L8 4.25M2.75 9.5L16.25 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <div class="w-auto p-1">
              <p >Go back to Homepage</p>
            </div>
          </div>
        </div>
      </button>
    </div>
  </div>

<section class="relative py-20 bg-black overflow-hidden"><img class="w-full h-full absolute top-1/2 left-3/4 transform -translate-y-1/2 -translate-x-3/4" src="gradia-assets/elements/cta/radial2.png" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-between -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="font-heading font-bold text-white text-6xl sm:text-7xl" >Get maximum results from all projects.</h2>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap md:justify-end -m-2">
          <div class="w-auto p-2"><a href="#"><img src="gradia-assets/logos/brands/app-store-rounded.png" alt=""></a></div>
          <div class="w-auto p-2"><a href="#"><img src="gradia-assets/logos/brands/play-store-rounded.png" alt=""></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-28 pb-40 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto">
      <h2 class="mb-5 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900" >Plan, Select, Grow</h2>
      <p class="mb-20 text-gray-600" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada nisl, ullamcorper pulvinar sed tincidunt tempus. In mi diam neque consectetur quis vitae.</p>
      <div class="p-px bg-gradient-cyan rounded-10 shadow-7xl">
        <div class="p-12 text-center rounded-10 bg-white">
          <p class="mb-7 font-heading text-xs font-semibold text-gray-900 uppercase tracking-px" >Pricing</p>
          <h3 class="mb-4 font-heading font-semibold text-5xl text-gray-900" >$9/user/month</h3>
          <p class="mb-10 text-xl text-gray-600" >Create unlimited project, invite everyone from your team, grow everything fast </p>
          <button class="group relative mb-6 px-16 py-3.5 font-heading bg-gray-900 text-base font-bold text-white overflow-hidden rounded-md">
            <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full transition ease-in-out duration-500 bg-gradient-cyan"></div>
            <p class="relative z-10" >Create Your First Project</p>
          </button>
          <p class="text-gray-500" >30 days free trial, No credit card required</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative pt-28 pb-36 bg-gray-100 overflow-hidden"><img class="absolute top-0 left-1/2 transform -translate-x-1/2" src="gradia-assets/elements/testimonials/radial3.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
      <h2 class="mb-16 max-w-3xl mx-auto font-heading font-semibold text-center text-5xl sm:text-6xl text-gray-900" >Hear from Gradia’s users who saved thousands on building websites</h2>
      <div class="px-10 md:px-16 py-12 bg-white rounded-10">
        <div class="flex flex-wrap items-end justify-between -m-4">
          <div class="p-4 w-full md:flex-1 overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex -m-6 transition-transform duration-500 ease-in-out">
              <div x-ref="slide1" class="flex-shrink-0 w-full p-6">
                <img class="mb-11" src="gradia-assets/images/testimonials/logo.svg" alt="">
                <h2 class="mb-9 font-heading font-medium text-2xl text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae et ultricies sapien mauris, urna. Arcu justo, tellus in tellus, sed sed venenatis velit. Nisl nam augue elit at viverra euismod vitae. Est praesent mattis velit morbi nec sit.</h2>
                <div class="flex flex-wrap -m-1.5">
                  <div class="w-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar10.png" alt=""></div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-heading font-semibold text-gray-900 text-lg" >Albert Flores</h3>
                    <p class="text-sm text-gray-600" >Co-Founder, CEO</p>
                  </div>
                </div>
              </div>
              <div x-ref="slide2" class="flex-shrink-0 w-full p-6">
                <img class="mb-11" src="gradia-assets/images/testimonials/logo.svg" alt="">
                <h2 class="mb-9 font-heading font-medium text-2xl text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis neque vel justo suscipit, in pellentesque metus cursus. Etiam euismod euismod risus, a luctus ipsum fermentum eu. Proin bibendum nunc vel felis dapibus, sed cursus nulla congue.</h2>
                <div class="flex flex-wrap -m-1.5">
                  <div class="w-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar10.png" alt=""></div>

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-gray-900">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
      </div>
    </div>
    <div class="w-auto hidden lg:block">
      <ul class="flex items-center mr-10">
        <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
        <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
        <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
        <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
      </ul>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-white font-medium bg-gradient-cyan overflow-hidden rounded-10">
            <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
            <div class="py-2 px-5 bg-gray-900 rounded-lg">
              <p class="relative z-10" >Start Free Trial</p>
            </div>
          </button>

<section class="py-44 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="max-w-lg">
          <p class="mb-9 max-w-max text-transparent bg-clip-text bg-gradient-cyan font-heading text-xs uppercase font-semibold tracking-px" >The team that made us successful</p>
          <h2 class="mb-7 font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >Our mission is making the customers lives easier now.</h2>
          <p class="text-xl text-gray-900" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap justify-center -m-6">
          <div class="w-full lg:w-auto p-6">
            <div class="max-w-max mx-auto">
              <div class="mb-5 bg-gradient-orange"><img src="gradia-assets/images/teams/avatar-bg.png" alt=""></div>
              <h3 class="mb-1 font-heading font-bold text-xl text-gray-900" >Albert Flores</h3>
              <p class="text-xs text-gray-600" >Digital Marketer @ Grower.io</p>
            </div>
          </div>
          <div class="w-full lg:w-auto p-6">
            <div class="xl:mt-24 max-w-max mx-auto">
              <div class="mb-5 bg-gradient-green"><img src="gradia-assets/images/teams/avatar-bg2.png" alt=""></div>
              <h3 class="mb-1 font-heading font-bold text-xl text-gray-900" >Albert Flores</h3>
              <p class="text-xs text-gray-600" >Digital Marketer @ Grower.io</p>

<section class="relative py-24 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full lg:w-7/12 p-8 lg:p-16">
        <div class="bg-gradient-violet2 rounded-2xl"><img class="relative top-3 w-full transform hover:scale-105 transition ease-in-out duration-500" src="gradia-assets/images/features/team.png" alt=""></div>
      </div>
      <div class="w-full lg:w-5/12 p-8 lg:p-16">
        <div class="lg:max-w-md">
          <h2 class="mb-10 font-heading font-bold text-4xl sm:text-5xl text-gray-900" >Control every project from a place without hassle.</h2>
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block pb-6" href="#">
            <div class="mb-6 bg-gradient-cyan h-px"></div>
            <div class="flex flex-wrap items-center justify-between">
              <h3 class="font-heading font-bold text-lg text-gray-900" >Video Analytics</h3>
              <div>
                <div :class="{ 'hidden': accordion }">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>    
                </div>   
                <div :class="{ 'hidden': !accordion }" class="hidden">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.75 11.25L9 6L14.25 11.25" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>

<section class="py-24 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-md">
          <h2 class="mb-6 font-heading font-bold text-4xl sm:text-5xl text-gray-900" >Grow your business connecting with customers</h2>
          <p class="mb-9 text-base text-gray-900" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit justo, sit iaculis ultrices vitae pulvinar tellus. Volutpat, ut lacus tristique blandit ligula.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2">
              <button class="px-9 py-3.5 font-heading font-bold w-full lg:w-auto text-base text-white bg-blue-600 hover:bg-blue-700 rounded-md" >Book A Call</button>
            </div>
            <div class="w-full md:w-auto p-2">
              <button class="px-9 py-3.5 font-heading font-bold w-full lg:w-auto text-base text-gray-900 bg-white hover:bg-gray-50 border border-gray-300 rounded-md" >Learn More</button>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap mx-auto divide-y md:max-w-md">
          <div class="w-full py-5">
            <div class="flex flex-wrap items-center -m-2.5">
              <div class="w-auto p-2.5 self-start"><img class="relative top-1" src="gradia-assets/elements/cta/file.svg" alt=""></div>
              <div class="flex-1 p-2.5"><a class="group" href="#">
                  <h3 class="mb-1 font-heading font-bold text-lg text-gray-900 group-hover:underline" >Documentation</h3>

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-gray-900">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-10">
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
            <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <div class="flex flex-wrap">
            <div class="w-auto">
              <button class="font-heading block py-2 px-5 mr-5 text-lg text-gray-900 rounded-10" >Login</button>
            </div>
            <div class="w-auto">
              <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-white font-medium bg-white overflow-hidden rounded-10">

<section class="pt-24 pb-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="mb-20 max-w-xl mx-auto">
      <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-white text-center" >Pricing &amp; Plans</h2>
      <p class="text-gray-400 text-base text-center" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="h-full py-9 px-7 text-center bg-gray-900 rounded-10">
          <h3 class="mb-8 font-heading text-xs text-white font-bold uppercase tracking-px" >Basic</h3>
          <p class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-white" >$29</p>
          <p class="mb-8 text-gray-400" >per month</p>
          <p class="mb-11 text-lg text-white" >Book up to 10 meetings with your clients per month</p>
          <button class="mb-4 font-heading font-semibold py-4 px-10 text-xs uppercase text-white tracking-px border border-gray-500 hover:border-gray-600 rounded-md" >Try 14 Days free trial</button>
          <p class="text-sm text-gray-500" >No credit card required</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="h-full py-9 px-7 text-center bg-gray-900 rounded-10">
          <h3 class="mb-8 font-heading text-xs text-white font-bold uppercase tracking-px" >Standard</h3>
          <p class="mb-3 font-heading font-bold text-6xl sm:text-7xl text-white" >$59</p>
          <p class="mb-8 text-gray-400" >per month</p>
          <p class="mb-11 text-lg text-white" >Book up to 50 meetings with your clients per month</p>
          <button class="mb-4 font-heading font-semibold py-4 px-10 text-xs uppercase text-white tracking-px border border-gray-500 hover:border-gray-600 rounded-md" >Try 14 Days free trial</button>

<section class="relative py-40 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6 lg:-m-11">
      <div class="w-full lg:w-1/2 p-6 lg:p-11">
        <div class="lg:max-w-xl">
          <h2 class="mb-5 font-heading text-6xl sm:text-7xl font-bold text-gray-900" >Manage projects easily.</h2>
          <p class="mb-9 text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
          <button class="font-heading w-full lg:w-auto px-6 py-3 text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-full" >Start 14 Days Free Trial</button>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-6 lg:p-11">
        <div class="lg:max-w-md ml-auto">
          <div class="flex flex-wrap w-full lg:-m-3">
            <div class="w-full p-3">
              <div class="p-4 bg-white rounded-2xl shadow-4xl">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <div class="flex items-center justify-center w-11 h-11 bg-gradient-red rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 13V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V13M20 13V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V13M20 13H17.4142C17.149 13 16.8946 13.1054 16.7071 13.2929L14.2929 15.7071C14.1054 15.8946 13.851 16 13.5858 16H10.4142C10.149 16 9.89464 15.8946 9.70711 15.7071L7.29289 13.2929C7.10536 13.1054 6.851 13 6.58579 13H4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="w-auto p-2">

<section class="pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto mb-16">
      <h2 class="font-heading font-bold text-6xl sm:text-7xl text-gray-900 text-center" >Everything you need to launch a website</h2>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/3 p-3">
        <div class="mb-9 p-9 text-center border border-gray-200 rounded">
          <div class="mb-11 p-px bg-gradient-cyan max-w-max mx-auto rounded-full">
            <p class="font-heading font-semibold px-5 py-1.5 text-xs text-gray-900 tracking-px uppercase bg-white rounded-full" >Basic</p>
          </div>
          <h3 class="font-heading font-bold sm:text-6xl text-7xl text-gray-900" >Free</h3>
          <p class="mb-12 text-gray-500" >Forever</p>
          <button class="font-heading px-12 py-4 text-base font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-full" >Sign up. It’s Free</button>
        </div>
        <div class="px-7">
          <ul>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">
              <svg class="mr-2.5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2134 6.08683C19.6625 6.53593 19.6625 7.26407 19.2134 7.71317L10.0134 16.9132C9.56426 17.3623 8.83613 17.3623 8.38702 16.9132L3.78702 12.3132C3.33792 11.8641 3.33792 11.1359 3.78702 10.6868C4.23613 10.2377 4.96427 10.2377 5.41337 10.6868L9.20019 14.4737L17.587 6.08683C18.0361 5.63772 18.7643 5.63772 19.2134 6.08683Z" fill="#14B082"></path>
              </svg>
              <p class="text-gray-900" >10 GB Disk Space</p>
            </li>
            <li class="mb-5 flex items-center font-heading font-semibold text-lg">

<section class="relative pt-24 pb-28 bg-black overflow-hidden">
  <div class="relative z-10 container mx-auto px-4">
    <h2 class="mb-12 max-w-lg mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-white" >Hard to believe? Analyze your website</h2>
    <div class="mb-9 md:max-w-lg mx-auto">
      <div class="p-1 flex flex-col md:flex-row bg-white focus-within:ring-4 focus-within:ring-indigo-500 overflow-hidden rounded-md">
        <input class="block flex-1 px-5 py-4 md:py-0 text-base text-gray-500 bg-transparent outline-none placeholder-gray-500 rounded-tl-xl rounded-bl-xl" type="text" placeholder="Enter email to get started">
        <button class="group relative font-heading font-semibold w-full md:w-auto py-5 px-8 text-xs text-white bg-gray-900 uppercase overflow-hidden rounded-md tracking-px">
          <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-gradient-fuchsia"></div>
          <p class="relative z-10" >Connect now</p>
        </button>
      </div>
    </div>
    <p class="text-gray-500 text-sm text-center"><span >Or, learn more </span><a class="text-white hover:text-gray-200" href="#" >about Gradia</a></p>
  </div><img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="gradia-assets/elements/cta/radial3.png" alt="">
</section>

<section class="relative pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4 mb-12">
    <h2 class="mb-24 font-heading font-semibold text-center text-5xl sm:text-6xl text-gray-900" >Grow team, anywhere, anytime online.</h2>
    <div class="flex flex-wrap -m-8 max-w-4xl mx-auto">
      <div class="w-full md:w-1/2 p-8 border-b md:border-r border-gray-200"><a class="group" href="#">
          </a><div class="flex flex-wrap -m-4"><a class="group" href="#">
            <div class="w-auto p-4"><img src="gradia-assets/elements/features/users.svg" alt=""></div>
            </a><div class="flex-1 p-4"><a class="group" href="#">
              <h3 class="mb-5 font-heading font-bold text-gray-900 text-lg group-hover:underline" >Connect with experts</h3>
              <p class="mb-5 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p></a><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
                <p class="mb-1" >Learn more</p>
                <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-px bg-black transition ease-in-out duration-500"></div></a>
            </div>
          </div></div>
      <div class="w-full md:w-1/2 p-8 border-b border-gray-200"><a class="group" href="#">
          </a><div class="flex flex-wrap -m-4"><a class="group" href="#">
            <div class="w-auto p-4"><img src="gradia-assets/elements/features/folder.svg" alt=""></div>
            </a><div class="flex-1 p-4"><a class="group" href="#">
              <h3 class="mb-5 font-heading font-bold text-gray-900 text-lg group-hover:underline" >Organize every project</h3>
              <p class="mb-5 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p></a><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
                <p class="mb-1" >Learn more</p>
                <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-px bg-black transition ease-in-out duration-500"></div></a>
            </div>
          </div></div>

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="px-8 py-5 lg:py-8 bg-gray-900">
    <div class="container mx-auto">
      <div class="flex items-center justify-between">
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
          </div>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto hidden lg:block">
              <ul class="flex items-center mr-10">
                <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
                <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
                <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
                <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
              </ul>
            </div>
            <div class="w-auto lg:hidden">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                  <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="relative py-28 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full lg:w-1/2 p-6">
        <div class="lg:max-w-2xl">
          <h2 class="mb-9 font-heading text-6xl sm:text-7xl font-semibold text-gray-900" >Manage remote team, anywhere, anytime.</h2>
          <ul class="mb-11">
            <li class="mb-3 flex items-center font-heading font-semibold text-lg text-gray-900"><img class="mr-3.5" src="gradia-assets/elements/features/check.svg" alt=""><span >                        No hidden feels</span></li>
            <li class="mb-3 flex items-center font-heading font-semibold text-lg text-gray-900"><img class="mr-3.5" src="gradia-assets/elements/features/check.svg" alt=""><span >                        Start with a free account</span></li>
            <li class="mb-3 flex items-center font-heading font-semibold text-lg text-gray-900"><img class="mr-3.5" src="gradia-assets/elements/features/check.svg" alt=""><span >                        Edit online, no software needed</span></li>
          </ul>
          <button class="font-heading flex justify-center items-center w-full lg:w-auto px-4 py-3 text-base font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md"><span class="mr-2.5" >Start Growing Team</span>
            <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11 3.75L16.25 9M16.25 9L11 14.25M16.25 9L2.75 9" stroke="#F9FAFB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-6">
        <div class="flex flex-wrap justify-center -mx-3 mb-6">
          <div class="w-auto px-3">
            <div class="w-64 p-3 bg-white rounded-2xl shadow-4xl transform hover:-translate-y-3 transition ease-out duration-1000">
              <div class="flex flex-wrap -m-2">
                <div class="w-auto p-2"><img src="gradia-assets/images/hero/avatar-circle.png" alt=""></div>

<section class="relative py-28 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative z-10 flex flex-wrap">
      <div class="w-full md:w-1/2">
        <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-white" >Grow with latest job updates</h2>
        <p class="mb-16 text-gray-300 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit justo, sit iaculis ultrices vitae pulvinar tellus. Volutpat, ut lacus tristique ligula.</p>
        <div class="flex flex-wrap -m-1.5 mb-8 md:max-w-xl">
          <div class="w-full md:flex-1 lg:w-auto p-1.5">
            <div class="p-px bg-gradient-cyan focus-within:ring-4 focus-within:ring-indigo-500 rounded-full">
              <input class="w-full px-6 py-4 placeholder-gray-300 text-base text-gray-300 bg-gray-900 outline-none rounded-full" type="text" placeholder="Enter email to get started">
            </div>
          </div>
          <div class="w-full md:w-auto p-1.5">
            <button class="group relative font-heading py-4 px-12 block w-full md:w-auto text-lg text-gray-900 font-semibold bg-white hover:bg-gray-50 overflow-hidden rounded-full">
              <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full transition ease-in-out duration-500 bg-gradient-cyan"></div>
              <p class="relative z-10" >Join Now</p>
            </button>
          </div>
        </div>
        <p class="md:max-w-xs md:pr-16 text-sm text-gray-400"><span class="text-white" >12,000+ People</span><span > are already using Gradia for their business</span></p>
      </div>
    </div><img class="absolute left-0 bottom-0 transform" src="gradia-assets/elements/cta/radial4.png" alt=""><img class="absolute right-0 top-0 left-50 transform" src="gradia-assets/elements/cta/radial5.png" alt="">
  </div>
</section>

<section class="relative pt-28 pb-36 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <p class="mb-6 font-heading text-xs text-gray-400 text-center uppercase tracking-px" >The features that made us special</p>
    <h2 class="mb-20 max-w-xl mx-auto font-heading font-semibold text-center text-6xl sm:text-7xl text-white" >A simple &amp; smart way to grow your marketing team</h2>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/3 p-4">
        <div class="h-full p-9 bg-gray-800 rounded-10"><img class="mb-12" src="gradia-assets/elements/features/users2.svg" alt="">
          <h3 class="font-heading font-bold text-white text-2xl"><span class="text-transparent bg-clip-text bg-gradient-cyan" >Connect</span><span > with experts without any issues.</span></h3>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="h-full p-9 bg-gray-800 rounded-10"><img class="mb-12" src="gradia-assets/elements/features/sm-view-grid-add.svg" alt="">
          <h3 class="font-heading font-bold text-white text-2xl"><span class="text-transparent bg-clip-text bg-gradient-orange" >Organize</span><span > your media files on cloud.</span></h3>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="h-hull p-9 bg-gray-800 rounded-10"><img class="mb-12" src="gradia-assets/elements/features/finger-print2.svg" alt="">
          <h3 class="font-heading font-bold text-white text-2xl"><span class="text-transparent bg-clip-text bg-gradient-green" >Secured</span><span > payment service, subscribe monthly.</span></h3>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-20 pb-32 bg-gradient-cyan2 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="mb-16 max-w-md mx-auto">
      <h2 class="mb-5 font-heading font-bold text-center text-5xl sm:text-6xl text-gray-900" >Recommended by world-class companies</h2>
      <p class="text-gray-600 text-center" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="flex flex-wrap justify-center -m-2 mb-7">
      <div class="w-auto p-2">
        <div class="font-heading flex items-center font-semibold px-4 py-2.5 text-lg text-gray-900 bg-white rounded-full">
          <div class="mr-3 w-3.5 h-3.5 bg-gradient-cyan rounded-full"></div>
          <p >Manage remote team</p>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="font-heading flex items-center font-semibold px-4 py-2.5 text-lg text-gray-900 bg-white rounded-full">
          <div class="mr-3 w-3.5 h-3.5 bg-gradient-orange rounded-full"></div>
          <p >Connect with experts</p>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="font-heading flex items-center font-semibold px-4 py-2.5 text-lg text-gray-900 bg-white rounded-full">
          <div class="mr-3 w-3.5 h-3.5 bg-gradient-purple rounded-full"></div>
          <p >Easy to chat</p>
        </div>