Tailwind CSS Components

<div class="fixed bottom-0 inset-x-0 z-50" x-data="{ open: true }" x-show="open">
  <div class="max-w-md pt-6 pb-10 px-10 mx-4 md:mx-0 md:ml-10 mb-6 bg-gray-800 text-white rounded-lg">
    <div class="text-center">
      <p class="font-bold font-heading">Cookie Policy</p>
      <p class="mb-4 mt-3 mb-6 text-gray-400 text-sm">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the ‘how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
      <a class="inline-block mr-4 py-2 px-4 rounded-l-xl rounded-t-xl border-2 border-green-600 hover:border-green-700 bg-green-600 hover:bg-green-700 transition duration-200" href="#" x-on:click.prevent="open=false">Allow</a><a class="inline-block py-2 px-4 rounded-r-xl rounded-t-xl border-2 border-gray-400 hover:bg-gray-700 transition duration-200" href="#" x-on:click.prevent="open=false">Decline</a>
    </div>
  </div>
</div>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container px-4 mx-auto">
      <div class="max-w-xl mx-auto mb-12 text-center">
        <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Check our awesome team members</h2>
      </div>
      <div class="flex flex-wrap">
        <div class="mb-6 w-full md:w-1/2 lg:w-1/3 px-3">
          <div class="pb-8 bg-white rounded text-center overflow-hidden">
            <img class="mb-8 w-full h-64 object-cover" src="https://images.unsplash.com/photo-1580852300654-03c803a14e24?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80" alt="">
            <h4 class="mb-2 text-2xl font-bold font-heading">Danny Bailey</h4>
            <p class="text-gray-500">CEO</p>
          </div>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap">
        <div class="w-full lg:w-1/3 mb-16 lg:mb-0">
          <a class="inline-block mb-3 text-3xl font-bold leading-none" href="#">
            <img class="mb-3 h-12" src="atis-assets/logo/atis/atis-color-black.svg" alt="" width="auto">
          </a>
          <p class="mb-4 max-w-sm text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt felis eu est.</p>
          <div>
            <a class="inline-block w-10 mr-2 p-2 bg-gray-50 hover:bg-gray-100 rounded" href="#">
              <img class="mx-auto" src="atis-assets/social/facebook-purple.svg">
            </a>
            <a class="inline-block w-10 mr-2 p-2 bg-gray-50 hover:bg-gray-100 rounded" href="#">

<section x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-green-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-8 md:mb-16 max-w-lg mx-auto text-center">
        <span class="text-green-400 font-bold">Dolor sit amet consectutar</span>
        <h2 class="mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">Latest Projects</h2>
        <div class="inline-flex flex-wrap py-1 sm:px-1 sm:space-x-1 bg-green-500 rounded text-sm">
          <button x-ref="tab1" class="w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 bg-white text-gray-900 shadow-md rounded font-bold focus:outline-none transition duration-200" :class="{'bg-white text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab1.textContent == tab, 'text-white font-bold': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">Category 1</button>
          <button x-ref="tab2" class="w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 text-white font-bold transition duration-200" :class="{'bg-white text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab2.textContent == tab, 'text-white font-bold': $refs.tab2.textContent != tab}" x-on:click="tab = $refs.tab2.textContent">Category 2</button>
          <button x-ref="tab3" class="w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 text-white font-bold transition duration-200" :class="{'bg-white text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab3.textContent == tab, 'text-white font-bold': $refs.tab3.textContent != tab}" x-on:click="tab = $refs.tab3.textContent">Category 3</button>
          <button x-ref="tab4" class="w-full sm:w-auto mb-1 sm:mb-0 mx-1 sm:mx-0 py-2 px-4 text-white font-bold transition duration-200" :class="{'bg-white text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab4.textContent == tab, 'text-white font-bold': $refs.tab4.textContent != tab }" x-on:click="tab = $refs.tab4.textContent">Category 4</button>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-12">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container px-4 mx-auto">
      <div class="max-w-xl mx-auto mb-12 text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading">Check our awesome team members</h2>
      </div>
      <div class="flex flex-wrap">
        <div class="mb-6 w-full md:w-1/2 lg:w-1/3 px-3">
          <div class="pb-8 bg-white rounded shadow text-center overflow-hidden">
            <img class="mb-8 w-full h-64 object-cover" src="https://images.unsplash.com/photo-1580852300654-03c803a14e24?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80" alt="">
            <h4 class="mb-2 text-2xl font-bold font-heading">Danny Bailey</h4>
            <p class="text-gray-500">CEO</p>
          </div>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 flex flex-wrap justify-center md:justify-between items-center">
        <div class="text-center lg:text-left">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Featured Projects</h2>
        </div>
        <a class="hidden md:inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Projects</a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-4">
        <div class="mb-8 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="bg-white rounded">
            <img class="rounded-t object-cover h-128" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 flex flex-wrap justify-center md:justify-between items-center">
        <div class="text-center lg:text-left">
          <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Featured Projects</h2>
        </div>
        <a class="hidden md:inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-purple-600 hover:bg-purple-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Projects</a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-4">
        <div class="mb-8 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="bg-white rounded">
            <img class="rounded-t object-cover h-128" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

<section x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-purple-600 radius-for-skewed overflow-hidden">
    <div class="container mx-auto px-4">
      <div class="pt-8 pb-16 flex flex-wrap justify-center items-center">
        <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-3 lg:mr-0 order-last lg:order-first bg-white p-4 rounded-full shadow-md text-purple-600 hover:text-purple-400 transition duration-200">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
        </button>
        <div class="mb-10 max-w-lg text-center mx-auto">
          <span class="text-purple-400 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mt-4 text-4xl lg:text-5xl font-bold font-heading text-white">What our clients think about us</h2>
        </div>
        <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="order-last bg-white p-4 rounded-full shadow-md text-green-600 hover:text-green-400 transition duration-200">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-green-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 flex flex-wrap justify-center md:justify-between items-center">
        <div class="text-center lg:text-left">
          <span class="text-green-400 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Featured Projects</h2>
        </div>
        <a class="hidden md:inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-white hover:bg-gray-50 font-bold leading-loose transition duration-200" href="#">View More Projects</a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-4">
        <div class="mb-8 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="bg-white rounded">
            <img class="rounded-t object-cover h-128" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

<section x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-green-600 radius-for-skewed overflow-hidden">
    <div class="container mx-auto px-4">
      <div class="pt-8 pb-16 flex flex-wrap justify-center items-center">
        <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-3 lg:mr-0 order-last lg:order-first bg-white p-4 rounded-full shadow-md text-purple-600 hover:text-purple-400 transition duration-200">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
        </button>
        <div class="mb-10 max-w-lg text-center mx-auto">
          <span class="text-green-400 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mt-4 text-4xl lg:text-5xl font-bold font-heading text-white">What our clients think about us</h2>
        </div>
        <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="order-last bg-white p-4 rounded-full shadow-md text-green-600 hover:text-green-400 transition duration-200">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-purple-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 flex flex-wrap justify-center md:justify-between items-center">
        <div class="text-center lg:text-left">
          <span class="text-purple-400 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Featured Projects</h2>
        </div>
        <a class="hidden md:inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-pink-600 hover:bg-pink-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Projects</a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-4">
        <div class="mb-8 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="bg-white rounded">
            <img class="rounded-t object-cover h-128" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

<section x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed overflow-hidden">
    <div class="container mx-auto px-4">
      <div class="pt-8 pb-16 flex flex-wrap justify-center items-center">
        <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-3 lg:mr-0 order-last lg:order-first bg-white p-4 rounded-full shadow-md text-purple-600 hover:text-purple-400 transition duration-200">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
        </button>
        <div class="mb-10 max-w-lg text-center mx-auto">
          <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mt-4 text-4xl lg:text-5xl font-bold font-heading text-white">What our clients think about us</h2>
        </div>
        <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="order-last bg-white p-4 rounded-full shadow-md text-purple-600 hover:text-purple-400 transition duration-200">

<section x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 flex flex-wrap items-center">
        <div class="w-full lg:w-1/2">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading">Featured Posts</h2>
        </div>
        <div class="hidden lg:block text-right w-1/2"><a class="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Articles</a></div>
      </div>
      <div class="flex flex-wrap -mx-3">
        <div class="mb-8 lg:mb-0 w-full lg:w-1/4 px-3">
          <div class="py-4 px-6 bg-white shadow rounded">
            <h4 class="mb-4 text-gray-500 font-bold uppercase">Topics</h4>

<section x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed overflow-hidden">
    <div class="container mx-auto px-4">
      <div class="pt-8 pb-16 flex flex-wrap justify-center items-center">
        <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-3 lg:mr-0 order-last lg:order-first bg-white p-4 rounded-full shadow-md text-green-600 hover:text-green-400 transition duration-200">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
        </button>
        <div class="mb-10 max-w-lg text-center mx-auto">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mt-4 text-4xl lg:text-5xl font-bold font-heading">What our clients think about us</h2>
        </div>
        <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="order-last bg-white p-4 rounded-full shadow-md text-green-600 hover:text-green-400 transition duration-200">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 flex flex-wrap justify-center md:justify-between items-center">
        <div class="text-center lg:text-left">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading">Featured Projects</h2>
        </div>
        <a class="hidden md:inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Projects</a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-4">
        <div class="mb-8 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="bg-white rounded">
            <img class="rounded-t object-cover h-128" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

<section x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed overflow-hidden">
    <div class="container mx-auto px-4">
      <div class="pt-8 pb-16 flex flex-wrap justify-center items-center">
        <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-3 lg:mr-0 order-last lg:order-first bg-white p-4 rounded-full shadow-md text-green-600 hover:text-green-400 transition duration-200">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
        </button>
        <div class="mb-10 max-w-lg text-center mx-auto">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mt-4 text-4xl lg:text-5xl font-bold font-heading text-white">What our clients think about us</h2>
        </div>
        <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="order-last bg-white p-4 rounded-full shadow-md text-green-600 hover:text-green-400 transition duration-200">

<section x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed overflow-hidden">
    <div class="container mx-auto px-4">
      <div class="pt-8 pb-16 flex flex-wrap justify-center items-center">
        <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-3 lg:mr-0 order-last lg:order-first bg-white p-4 rounded-full shadow-md text-purple-600 hover:text-purple-400 transition duration-200">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
        </button>
        <div class="mb-10 max-w-lg text-center mx-auto">
          <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mt-4 text-4xl lg:text-5xl font-bold font-heading">What our clients think about us</h2>
        </div>
        <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="order-last bg-white p-4 rounded-full shadow-md text-purple-600 hover:text-purple-400 transition duration-200">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 flex flex-wrap justify-center md:justify-between items-center">
        <div class="text-center lg:text-left">
          <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="text-4xl lg:text-5xl font-bold font-heading">Featured Projects</h2>
        </div>
        <a class="hidden md:inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-purple-600 hover:bg-purple-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Projects</a>
      </div>
      <div class="flex flex-wrap -mx-4 mb-4">
        <div class="mb-8 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="bg-white rounded">
            <img class="rounded-t object-cover h-128" src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-md mx-auto text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-8 lg:mb-0 w-full lg:w-1/3 px-4">
          <div class="py-12 px-6 bg-white rounded shadow text-center">
            <span class="mb-6 inline-block p-2 rounded-lg bg-green-100">
              <svg class="w-10 h-10 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative py-6 bg-gray-900">
    <div class="container mx-auto px-4 flex items-center">
      <ul class="hidden lg:flex lg:w-1/3 lg:flex lg:items-center lg:w-auto lg:space-x-6">
        <li><a class="text-sm text-gray-300 hover:text-white" href="#">Start</a></li>
        <li class="text-gray-800">
          <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
          </svg>
        </li>
        <li><a class="text-sm text-white font-bold" href="#">About Us</a></li>
        <li class="text-gray-800">
          <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
          </svg>
        </li>
        <li><a class="text-sm text-gray-300 hover:text-white" href="#">Services</a></li>
      </ul>
      <div class="lg:absolute lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2">
        <a class="text-white text-3xl font-bold leading-none" href="#">
          <img class="h-12" src="atis-assets/logo/atis/atis-mono-white.svg" alt="" width="auto">
        </a>
      </div>
      <div class="hidden lg:ml-auto lg:block lg:w-1/3 text-right"><a class="hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 text-sm text-white font-bold border-2 border-gray-800 hover:border-gray-700 rounded-l-xl rounded-t-xl transition duration-200" href="#">Sign In</a><a class="hidden lg:inline-block py-2 px-6 bg-green-500 hover:bg-green-600 text-sm text-white font-bold rounded-l-xl rounded-t-xl transition duration-200" href="#">Sign up</a></div>