Tailwind CSS Components

<section class="py-20">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap text-center">
      <div class="mb-8 w-full md:w-1/2 lg:w-1/4">
        <h4 class="mb-2 text-gray-500">Total Revenue</h4>
        <span class="text-3xl lg:text-4xl font-bold">$33,261</span>
      </div>
      <div class="mb-8 w-full md:w-1/2 lg:w-1/4">
        <h4 class="mb-2 text-gray-500">Subscribers</h4>
        <span class="text-3xl lg:text-4xl font-bold">481,095</span>
      </div>
      <div class="mb-8 w-full md:w-1/2 lg:w-1/4">
        <h4 class="mb-2 text-gray-500">Conversations</h4>
        <span class="text-3xl lg:text-4xl font-bold">643,533</span>
      </div>
      <div class="mb-8 w-full md:w-1/2 lg:w-1/4">
        <h4 class="mb-2 text-gray-500">Modal Sale Rate</h4>
        <span class="text-3xl lg:text-4xl font-bold">25%</span>
      </div>
    </div>
  </div>
</section>

<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">
        <h2 class="text-4xl lg:text-5xl font-bold font-heading">Contact</h2>
        <p class="text-gray-500">Got any question? Let’s talk about it.</p>
      </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 lg:py-20 rounded bg-white shadow text-center">
            <h3 class="mb-8 lg:mb-20 text-3xl font-bold font-heading">Office</h3>
            <p class="text-gray-400">359 Hidden</p>
            <p class="text-gray-400">Valley Road, NY</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="mb-16 mx-auto max-w-md text-center">
        <span class="text-yellow-500 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 md:w-1/2 lg:w-1/3 px-4">
          <div class="py-10 px-6 bg-white shadow rounded text-center">
            <span class="mb-6 w-16 h-16 inline-flex justify-center items-center bg-blue-100 rounded text-2xl text-blue-600 font-bold">1</span>
            <h3 class="mb-4 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet</h3>
            <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus.</p>
          </div>

<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-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="max-w-6xl mx-auto">
        <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">
                    <div class="mb-8 p-6 flex flex-wrap items-center bg-white rounded-lg shadow">
                      <div class="w-full lg:w-1/3">
                        <img class="mb-5 lg:mb-0 w-full rounded-lg object-cover" style="max-height: 350px;" src="https://images.unsplash.com/photo-1484588168347-9d835bb09939?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
                      </div>
                      <div class="w-full lg:w-2/3">
                        <div class="max-w-lg mx-auto">
                          <p class="mb-8 text-2xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et placerat metus. Morbi aliquet felis sit amet erat finibus, ac condimentum ligula ornare.</p>

<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 w-full flex flex-wrap items-center">
        <div class="w-full lg:w-1/2">
          <span class="text-green-400 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">Choose your best plan</h2>
        </div>
        <div class="w-full lg:w-1/2">
          <p class="max-w-xs lg:mx-auto text-gray-50 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="mb-8 w-full p-8 flex flex-wrap items-center bg-white rounded shadow">

<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 max-w-xl mx-auto text-center">
        <span class="text-green-400 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-white text-5xl font-bold">Frequently Asked Questions</h2>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full lg:w-1/2 px-4 mb-8">
          <div class="h-full p-8 bg-white rounded shadow">
            <div class="mb-6 flex items-start">
              <span class="mr-4 inline-block p-3 rounded-full bg-green-600">
                <svg class="w-6 h-6 text-white" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>

<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="max-w-6xl mx-auto">
        <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">
                    <div class="mb-8 p-6 flex flex-wrap items-center bg-white rounded-lg shadow">
                      <div class="w-full lg:w-1/3">
                        <img class="mb-5 lg:mb-0 w-full rounded-lg object-cover" style="max-height: 350px;" src="https://images.unsplash.com/photo-1484588168347-9d835bb09939?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
                      </div>
                      <div class="w-full lg:w-2/3">
                        <div class="max-w-lg mx-auto">
                          <p class="mb-8 text-2xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et placerat metus. Morbi aliquet felis sit amet erat finibus, ac condimentum ligula ornare.</p>

<section class="bg-gray-900" x-data="{ activeSlide: 1 }">
  <div class="flex flex-wrap">
    <div class="pt-6 lg:pt-16 pb-6 w-full lg:w-1/2">
      <div class="max-w-md mx-auto">
        <div class="mb-6 lg:mb-20 w-full px-3 flex items-center justify-between">
          <a class="text-white text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
          </a>
          <a class="py-2 px-6 text-xs rounded-l-xl rounded-t-xl bg-purple-600 hover:bg-purple-700 text-white font-bold transition duration-200" href="#">Sign Up</a>
        </div>
        <div>
          <div class="mb-6 px-3">
            <span class="text-gray-500">Sign In</span>
            <h3 class="text-2xl font-bold text-white">Join our community</h3>
          </div>
          <form action="">
            <div class="mb-3 flex p-4 mx-3 bg-gray-800 rounded">
              <input class="w-full text-xs text-gray-50 bg-gray-800 outline-none" type="email" placeholder="name@email.com">
              <svg class="h-6 w-6 ml-4 my-auto text-gray-300" 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
              </svg>
            </div>
            <div class="mb-6 flex p-4 mx-3 bg-gray-800 rounded">
              <input class="w-full text-xs text-gray-50 bg-gray-800 outline-none" type="password" placeholder="Enter your password">

<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="max-w-6xl mx-auto">
        <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">
                    <div class="mb-8 p-6 flex flex-wrap items-center bg-white rounded-lg shadow">
                      <div class="w-full lg:w-1/3">
                        <img class="mb-5 lg:mb-0 w-full rounded-lg object-cover" style="max-height: 350px;" src="https://images.unsplash.com/photo-1484588168347-9d835bb09939?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
                      </div>
                      <div class="w-full lg:w-2/3">
                        <div class="max-w-lg mx-auto">
                          <p class="mb-8 text-2xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et placerat metus. Morbi aliquet felis sit amet erat finibus, ac condimentum ligula ornare.</p>

<section x-data="{ activeSlide: 1 }">
  <div class="flex flex-wrap">
    <div class="pt-6 lg:pt-16 pb-6 w-full lg:w-1/2">
      <div class="max-w-md mx-auto">
        <div class="mb-6 lg:mb-20 w-full px-3 flex items-center justify-between">
          <a class="text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-mono-black.svg" alt="" width="auto">
          </a>
          <a class="py-2 px-6 text-xs rounded-l-xl rounded-t-xl bg-green-100 hover:bg-green-200 text-green-600 font-bold transition duration-200" href="#">Sign Up</a>
        </div>
        <div>
          <div class="mb-6 px-3">
            <span class="text-gray-500">Sign In</span>
            <h3 class="text-2xl font-bold">Join our community</h3>
          </div>
          <form action="">
            <div class="mb-3 flex p-4 mx-3 bg-gray-50 rounded">
              <input class="w-full text-xs bg-gray-50 outline-none" type="email" placeholder="name@email.com">
              <svg class="h-6 w-6 ml-4 my-auto text-gray-300" 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
              </svg>
            </div>
            <div class="mb-6 flex p-4 mx-3 bg-gray-50 rounded">
              <input class="w-full text-xs bg-gray-50 outline-none" type="password" placeholder="Enter your password">

<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 w-full flex flex-wrap items-center">
        <div class="w-full lg:w-1/2">
          <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading">Choose your best plan</h2>
        </div>
        <div class="w-full lg:w-1/2">
          <p class="max-w-xs lg:mx-auto text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="mb-8 w-full p-8 flex flex-wrap items-center bg-white rounded shadow">

<section class="bg-gray-900" x-data="{ activeSlide: 1 }">
  <div class="flex flex-wrap">
    <div class="pt-6 lg:pt-16 pb-6 w-full lg:w-1/2">
      <div class="max-w-md mx-auto">
        <div class="mb-6 lg:mb-20 w-full px-3 flex items-center justify-between">
          <a class="text-white text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-mono-light.svg" alt="" width="auto">
          </a>
          <a class="py-2 px-6 text-xs rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-white font-bold transition duration-200" href="#">Sign Up</a>
        </div>
        <div>
          <div class="mb-6 px-3">
            <span class="text-gray-500">Sign In</span>
            <h3 class="text-2xl font-bold text-white">Join our community</h3>
          </div>
          <form action="">
            <div class="mb-3 flex p-4 mx-3 bg-gray-800 rounded">
              <input class="w-full text-xs text-gray-50 bg-gray-800 outline-none" type="email" placeholder="name@email.com">
              <svg class="h-6 w-6 ml-4 my-auto text-gray-300" 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
              </svg>
            </div>
            <div class="mb-6 flex p-4 mx-3 bg-gray-800 rounded">
              <input class="w-full text-xs text-gray-50 bg-gray-800 outline-none" type="password" placeholder="Enter your password">

<section x-data="{ page: 1, first: 0, last: 0 }" x-init="first = Number($refs.page4.textContent), last = Number($refs.page7.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="{'block': page == 1, 'hidden': page != 1}">
        <div class="mb-16 flex flex-wrap items-center">
          <div class="w-full lg:w-1/2 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">Our Blog</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="mb-8 flex flex-wrap rounded-lg shadow overflow-hidden">
          <div class="w-full lg:w-1/2 rounded-l">
            <img class="object-cover" src="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=968&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 max-w-xl mx-auto text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-white text-5xl font-bold">Frequently Asked Questions</h2>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full lg:w-1/2 px-4 mb-8">
          <div class="h-full p-8 bg-white rounded shadow">
            <div class="mb-6 flex items-start">
              <span class="mr-4 inline-block p-3 rounded-full bg-green-600">
                <svg class="w-6 h-6 text-white" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>

<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 w-full 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="mb-2 text-4xl lg:text-5xl font-bold font-heading">Choose your best plan</h2>
        </div>
        <div class="w-full lg:w-1/2">
          <p class="max-w-xs lg:mx-auto text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="mb-8 w-full p-8 flex flex-wrap items-center bg-white rounded shadow">

<section x-data="{ activeSlide: 1 }">
  <div class="flex flex-wrap">
    <div class="pt-6 lg:pt-16 pb-6 w-full lg:w-1/2">
      <div class="max-w-md mx-auto">
        <div class="mb-6 lg:mb-20 w-full px-3 flex items-center justify-between">
          <a class="text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-color-black.svg" alt="" width="auto">
          </a>
          <a class="py-2 px-6 text-xs rounded-l-xl rounded-t-xl bg-purple-600 hover:bg-purple-700 text-white font-bold transition duration-200" href="#">Sign Up</a>
        </div>
        <div>
          <div class="mb-6 px-3">
            <span class="text-gray-500">Sign In</span>
            <h3 class="text-2xl font-bold">Join our community</h3>
          </div>
          <form action="">
            <div class="mb-3 flex p-4 mx-3 bg-gray-50 rounded">
              <input class="w-full text-xs bg-gray-50 outline-none" type="email" placeholder="name@email.com">
              <svg class="h-6 w-6 ml-4 my-auto text-gray-300" 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
              </svg>
            </div>
            <div class="mb-6 flex p-4 mx-3 bg-gray-50 rounded">
              <input class="w-full text-xs bg-gray-50 outline-none" type="password" placeholder="Enter your password">

<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 max-w-xl mx-auto text-center">
        <span class="text-pink-400 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-white text-5xl font-bold">Frequently Asked Questions</h2>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full lg:w-1/2 px-4 mb-8">
          <div class="h-full p-8 bg-white rounded shadow">
            <div class="mb-6 flex items-start">
              <span class="mr-4 inline-block p-3 rounded-full bg-blue-400">
                <svg class="w-6 h-6 text-white" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>

<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 w-full 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="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">Choose your best plan</h2>
        </div>
        <div class="w-full lg:w-1/2">
          <p class="max-w-xs lg:mx-auto text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="mb-8 w-full p-8 flex flex-wrap items-center bg-white rounded shadow">

<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-xl mx-auto text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-5xl font-bold">Frequently Asked Questions</h2>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full lg:w-1/2 px-4 mb-8">
          <div class="h-full p-8 bg-white rounded shadow">
            <div class="mb-6 flex items-start">
              <span class="mr-4 inline-block p-3 rounded-full bg-green-600">
                <svg class="w-6 h-6 text-white" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>

<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="max-w-6xl mx-auto">
        <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">
                    <div class="mb-8 p-6 flex flex-wrap items-center bg-white rounded-lg shadow">
                      <div class="w-full lg:w-1/3">
                        <img class="mb-5 lg:mb-0 w-full rounded-lg object-cover" style="max-height: 350px;" src="https://images.unsplash.com/photo-1484588168347-9d835bb09939?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
                      </div>
                      <div class="w-full lg:w-2/3">
                        <div class="max-w-lg mx-auto">
                          <p class="mb-8 text-2xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et placerat metus. Morbi aliquet felis sit amet erat finibus, ac condimentum ligula ornare.</p>