Tailwind CSS Components

<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">
    <div class="container px-4 mx-auto">
      <div class="lg:flex items-center justify-center md:space-x-8">
        <div class="mb-10 text-center lg:hidden">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-6 lg:mr-0 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>
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>

<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">
    <div class="container mx-auto px-4">
      <div class="relative flex">
        <div class="hidden xl:absolute inset-y-0 left-0 -ml-6 xl:flex items-center">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="p-4 bg-green-600 hover:bg-green-700 rounded-l-xl rounded-t-xl text-white z-10">
            <svg class="w-4 h-4" 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>
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
                <div class="inline-block w-full whitespace-normal relative overflow-hidden">

<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">
    <div class="container px-4 mx-auto">
      <div class="lg:flex items-center justify-center md:space-x-8">
        <div class="mb-10 text-center lg:hidden">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-6 lg:mr-0 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>
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>

<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">
    <div class="container px-4 mx-auto">
      <div class="lg:flex items-center justify-center md:space-x-8">
        <div class="mb-10 text-center lg:hidden">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-6 lg:mr-0 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>
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>

<section x-init="pricing = $refs.pricing1.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 max-w-2xl mx-auto text-center">
        <div class="max-w-lg mx-auto">
          <span class="text-pink-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">All the tools you need in one workspace.</h2>
          <p class="mb-8 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="flex flex-wrap justify-center">
          <label class="md:mr-4 w-full sm:w-auto flex items-center mr-8 mb-2">
            <input type="radio" name="billing" value="1">
            <span class="mx-2 font-semibold">Monthly Billing</span>
            <span class="inline-flex items-center justify-center w-12 h-10 bg-pink-600 text-white font-semibold rounded-lg">$59</span>

<section x-data="{ activeSlide: 1 }">
  <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 max-w-2xl mx-auto text-center">
        <div class="max-w-lg mx-auto">
          <span class="text-pink-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">All the tools you need in one workspace.</h2>
          <p class="mb-8 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="flex flex-wrap justify-center">
          <label class="md:mr-4 w-full sm:w-auto flex items-center mr-8 mb-2">
            <input type="radio" name="billing" value="1">
            <span class="mx-2 font-semibold text-white">Monthly Billing</span>
            <span class="inline-flex items-center justify-center w-12 h-10 bg-pink-600 text-white font-semibold rounded-lg">$59</span>

<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">
    <div class="container px-4 mx-auto">
      <div class="lg:flex items-center justify-center md:space-x-8">
        <div class="mb-10 text-center lg:hidden">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-6 lg:mr-0 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>
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>

<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">
    <div class="container mx-auto px-4">
      <div class="relative flex">
        <div class="hidden xl:absolute inset-y-0 left-0 -ml-6 xl:flex items-center">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="p-4 bg-purple-600 hover:bg-purple-700 rounded-l-xl rounded-t-xl text-white z-10">
            <svg class="w-4 h-4" 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>
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
                <div class="inline-block w-full whitespace-normal relative overflow-hidden">

<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">
    <div class="container mx-auto px-4">
      <div class="relative flex">
        <div class="hidden xl:absolute inset-y-0 left-0 -ml-6 xl:flex items-center">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="p-4 bg-green-600 hover:bg-green-700 rounded-l-xl rounded-t-xl text-white z-10">
            <svg class="w-4 h-4" 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>
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
                <div class="inline-block w-full whitespace-normal relative overflow-hidden">

<section x-data="{ activeSlide: 1 }">
  <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 max-w-2xl mx-auto text-center">
        <div class="max-w-lg mx-auto">
          <span class="text-pink-400 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">All the tools you need in one workspace.</h2>
          <p class="mb-8 text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="flex flex-wrap justify-center">
          <label class="md:mr-4 w-full sm:w-auto flex items-center mr-8 mb-2">
            <input type="radio" name="billing" value="1">
            <span class="mx-2 font-semibold text-white">Monthly Billing</span>
            <span class="inline-flex items-center justify-center w-12 h-10 bg-pink-400 text-white font-semibold rounded-lg">$59</span>

<section x-data="{ activeSlide: 1 }">
  <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-2xl mx-auto text-center">
        <div class="max-w-lg mx-auto">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">All the tools you need in one workspace.</h2>
          <p class="mb-8 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="flex flex-wrap justify-center">
          <label class="md:mr-4 w-full sm:w-auto flex items-center mr-8 mb-2">
            <input type="radio" name="billing" value="1">
            <span class="mx-2 font-semibold">Monthly Billing</span>
            <span class="inline-flex items-center justify-center w-12 h-10 bg-green-600 text-white font-semibold rounded-lg">$59</span>

<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">
    <div class="container px-4 mx-auto">
      <div class="lg:flex items-center justify-center md:space-x-8">
        <div class="mb-10 text-center lg:hidden">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-6 lg:mr-0 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>
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>

<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 overflow-hidden radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-md text-center mx-auto">
        <span class="text-yellow-500 font-bold">Dolor sit amet consectutar</span>
        <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">Build &amp; Launch without problems</h2>
      </div>
      <div class="relative flex flex-wrap -mx-4 z-0">
        <img class="h-128 hidden xl:block absolute top-0 right-0 -mt-4 -mr-16" style="z-index: -1;" src="atis-assets/elements/line.svg" alt="">
        <div class="mb-10 lg:mb-32 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="max-w-xs">
            <span class="mb-4 lg:mb-10 flex w-16 h-16 items-center justify-center bg-yellow-400 rounded-full font-bold text-white text-2xl">1</span>
            <h3 class="mb-4 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar</h3>
            <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>

<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 overflow-hidden radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-md text-center mx-auto">
        <span class="text-yellow-500 font-bold">Dolor sit amet consectutar</span>
        <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">Build &amp; Launch without problems</h2>
      </div>
      <div class="relative flex flex-wrap -mx-4 z-0">
        <img class="h-128 hidden xl:block absolute top-0 right-0 -mt-4 -mr-16" style="z-index: -1;" src="atis-assets/elements/line-light-gray.svg" alt="">
        <div class="mb-10 lg:mb-32 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="max-w-xs">
            <span class="mb-4 lg:mb-10 flex w-16 h-16 items-center justify-center bg-yellow-400 rounded-full font-bold text-2xl">1</span>
            <h3 class="mb-4 text-2xl font-bold font-heading text-white">Lorem ipsum dolor sit amet consectutar</h3>
            <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>

<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="max-w-xl mx-auto mb-10 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="py-24 bg-gray-800 rounded text-center">
            <img class="mx-auto mb-8 w-24 h-24 rounded-full 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 text-gray-50">Danny Bailey</h4>
            <p class="text-gray-400">CEO</p>
          </div>

<section class="bg-gray-50">
  <div class="flex w-full">
    <div class="w-1/3 flex">
      <div class="w-1/3 py-1 bg-blue-400"></div>
      <div class="w-1/3 py-1 bg-pink-400"></div>
      <div class="w-1/3 py-1 bg-green-400"></div>
    </div>
    <div class="w-1/3 flex">
      <div class="w-1/3 py-1 bg-purple-400"></div>
      <div class="w-1/3 py-1 bg-yellow-400"></div>
      <div class="w-1/3 py-1 bg-blue-400"></div>
    </div>
    <div class="w-1/3 flex">
      <div class="w-1/3 py-1 bg-pink-400"></div>
      <div class="w-1/3 py-1 bg-green-500"></div>
      <div class="w-1/3 py-1 bg-purple-600"></div>
    </div>
  </div>
  <div class="container mx-auto px-4">
    <div class="pt-10 pb-12">
      <div class="relative lg:pb-8 mb-8 flex flex-wrap lg:border-b lg:border-gray-300">
        <p class="w-full lg:w-auto text-gray-400 text-sm text-center lg:text-left order-last lg:order-first">© 2021. All rights reserved.</p>
        <div class="lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 mb-6 lg:mb-0 mx-auto"><a class="mr-6 text-sm hover:text-gray-500" href="#">Terms of Service</a><a class="text-sm hover:text-gray-500" href="#">Police Privacy</a></div>
        <div class="mb-12 lg:mb-0 lg:ml-auto w-full lg:w-auto order-first lg:order-last text-center lg:text-left">

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 bg-gray-900">
    <div class="flex items-center">
      <ul class="hidden lg:flex lg:flex lg:items-center lg:w-auto lg:space-x-5">
        <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>
      <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>

<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 overflow-hidden radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-md text-center mx-auto">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">Build &amp; Launch without problems</h2>
      </div>
      <div class="relative flex flex-wrap -mx-4 z-0">
        <img class="h-128 hidden xl:block absolute top-0 right-0 -mt-4 -mr-16" style="z-index: -1;" src="atis-assets/elements/line.svg" alt="">
        <div class="mb-10 lg:mb-32 w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="max-w-xs">
            <span class="mb-4 lg:mb-10 flex w-16 h-16 items-center justify-center bg-green-600 rounded-full font-bold text-white text-2xl">1</span>
            <h3 class="mb-4 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar</h3>
            <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>

<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="max-w-xl mx-auto mb-10 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 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="py-24 bg-gray-800 rounded text-center">
            <img class="mx-auto mb-8 w-24 h-24 rounded-full 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 text-gray-50">Danny Bailey</h4>
            <p class="text-gray-400">CEO</p>
          </div>

<section>
  <div class="relative py-20 radius-for-skewed" style="background-image: url('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'); background-size: cover; background-repeat: no-repeat; background-position: center;">
    <div class="absolute inset-0 bg-gray-900 opacity-80 radius-for-skewed"></div>
    <div class="container mx-auto px-4 relative">
      <div class="max-w-md text-center mx-auto">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl text-white font-bold font-heading">Build &amp; Launch without problems</h2>
        <div class="mb-6 max-w-sm mx-auto">
          <p class="text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
        <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="#">See More</a>
      </div>
    </div>
  </div>
</section>