Tailwind CSS Components

<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 w-full flex flex-wrap items-center">
        <div class="w-full lg:w-1/2">
          <span class="text-purple-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-100 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="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-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="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-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-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-purple-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-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 max-w-xl mx-auto text-center">
        <span class="text-purple-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-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-purple-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 class="skewed-top-left skewed-bottom-right">
  <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-xl mx-auto text-center">
        <span class="mb-6 inline-block p-3 bg-green-400 rounded">
          <svg class="w-6 h-6 text-green-200" 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>
        </span>
        <h2 class="mb-4 text-4xl md:text-5xl text-white font-bold font-heading">Many useful features</h2>
        <p class="mb-6 text-gray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        <div class="flex flex-wrap justify-center items-center">
          <input class="w-full md:w-auto mb-3 md:mb-0 md:mr-4 py-2 px-4 bg-green-400 text-white leading-loose placeholder-white rounded" type="email" placeholder="hello@example.com">
          <input class="w-full md:w-auto mb-3 md:mb-0 md:mr-4 py-2 px-4 bg-green-400 text-white leading-loose placeholder-white rounded" type="text" placeholder="Name">

<section class="relative py-10 lg:h-screen bg-gray-900">
  <div class="hidden lg:flex items-center absolute inset-0 w-2/5 bg-gray-800">
    <img class="mx-auto" src="atis-assets/illustrations/technical-support-little-dark-purple.png" alt="">
  </div>
  <div class="lg:absolute inset-0 flex justify-center items-center ml-auto w-full lg:w-3/5 bg-gray-900">
    <div class="container mx-auto px-4">
      <div class="max-w-md mx-auto py-10">
        <h3 class="mb-6 text-2xl">Got any question? Let’s talk about it.</h3>
        <form action="">
          <div class="mb-4 text-sm">
            <span class="mr-4 font-semibold text-gray-500">Department:</span>
            <label class="mr-4">
              <input class="mr-1" type="radio" name="department" value="1" checked="">
              <span class="text-gray-500">Support</span>
            </label>
            <label>
              <input class="mr-1" type="radio" name="department" value="2">
              <span class="text-gray-500">Sales</span>
            </label>
          </div>
          <div class="mb-4">
            <input class="w-full p-4 text-xs font-semibold leading-none bg-gray-800 rounded outline-none" type="text" placeholder="Subject">
          </div>
          <div class="mb-4">

<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-md mx-auto 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">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-3">
        <div class="mb-6 w-full lg:w-1/2 px-3">
          <div class="p-6 flex flex-wrap bg-gray-800 shadow-md rounded-lg">
            <div>
              <span class="mb-4 lg:mb-0 mr-6 inline-block p-3 md:p-5 rounded-lg bg-yellow-800">
                <svg class="h-8 w-8 md:w-12 md:h-12 text-yellow-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>

<section class="skewed-top-left skewed-bottom-right">
  <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 text-center">
        <span class="mb-6 inline-block p-3 bg-gray-800 rounded">
          <svg class="w-6 h-6 text-purple-400" 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>
        </span>
        <h2 class="mb-4 text-4xl md:text-5xl text-white font-bold font-heading">Many useful features</h2>
        <p class="mb-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        <div class="flex flex-wrap justify-center items-center">
          <input class="w-full md:w-auto mb-3 md:mb-0 md:mr-4 py-2 px-4 bg-gray-800 text-gray-400 leading-loose placeholder-gray-500 rounded" type="email" placeholder="hello@example.com">
          <input class="w-full md:w-auto mb-3 md:mb-0 md:mr-4 py-2 px-4 bg-gray-800 text-gray-400 leading-loose placeholder-gray-500 rounded" type="text" placeholder="Name">

<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="flex flex-wrap">
        <div class="w-full lg:w-1/3 mb-16 lg:mb-0">
          <a class="inline-block mb-3 text-white text-3xl font-bold leading-none" href="#">
            <img class="mb-3 h-12" src="atis-assets/logo/atis/atis-color-white.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-800 hover:bg-gray-700 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-800 hover:bg-gray-700 rounded" href="#">

<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-10 flex flex-wrap">
        <div class="mb-10 lg:mb-0 w-full lg:w-1/2">
          <div class="max-w-md">
            <span class="text-yellow-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>
            <p class="max-w-xs text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
          </div>
        </div>
        <div class="relative w-full lg:w-1/2">
          <img class="relative rounded-lg" src="https://images.unsplash.com/photo-1607556772227-fe3868023d27?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <button class="text-white hover:text-gray-50">

<section class="skewed-top-left skewed-bottom-right">
  <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-xl mx-auto text-center">
        <span class="mb-6 inline-block p-3 bg-yellow-400 rounded">
          <svg class="w-6 h-6 text-yellow-200" 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>
        </span>
        <h2 class="mb-4 text-4xl md:text-5xl text-white font-bold font-heading">Many useful features</h2>
        <p class="mb-6 text-gray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        <div class="flex flex-wrap justify-center items-center">
          <input class="w-full md:w-auto mb-3 md:mb-0 md:mr-4 py-2 px-4 bg-purple-400 text-white leading-loose placeholder-white rounded" type="email" placeholder="hello@example.com">
          <input class="w-full md:w-auto mb-3 md:mb-0 md:mr-4 py-2 px-4 bg-purple-400 text-white leading-loose placeholder-white rounded" type="text" placeholder="Name">

<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-10 flex flex-wrap">
        <div class="mb-10 lg:mb-0 w-full lg:w-1/2">
          <div class="max-w-md">
            <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">Build &amp; Launch without problems</h2>
            <p class="max-w-xs text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
          </div>
        </div>
        <div class="relative w-full lg:w-1/2">
          <img class="relative rounded-lg" src="https://images.unsplash.com/photo-1607556772227-fe3868023d27?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <button class="text-white hover:text-gray-50">

<section class="relative py-10 lg:h-screen bg-gray-50">
  <div class="hidden lg:flex items-center absolute inset-0 w-2/5 bg-white">
    <img class="mx-auto" src="atis-assets/illustrations/technical-support-dark-green.png" alt="">
  </div>
  <div class="lg:absolute inset-0 flex justify-center items-center ml-auto w-full lg:w-3/5 bg-gray-50">
    <div class="container mx-auto px-4">
      <div class="max-w-md mx-auto py-10">
        <h3 class="mb-6 text-2xl">Got any question? Let’s talk about it.</h3>
        <form action="">
          <div class="mb-4 text-sm">
            <span class="mr-4 font-semibold">Department:</span>
            <label class="mr-4">
              <input class="mr-1" type="radio" name="department" value="1" checked="">
              <span>Support</span>
            </label>
            <label>
              <input class="mr-1" type="radio" name="department" value="2">
              <span>Sales</span>
            </label>
          </div>
          <div class="mb-4">
            <input class="w-full p-4 text-xs font-semibold leading-none bg-white rounded outline-none" type="text" placeholder="Subject">
          </div>
          <div class="mb-4">

<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-10 flex flex-wrap">
        <div class="mb-10 lg:mb-0 w-full lg:w-1/2">
          <div class="max-w-md">
            <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>
            <p class="max-w-xs text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
          </div>
        </div>
        <div class="relative w-full lg:w-1/2">
          <img class="relative rounded-lg" src="https://images.unsplash.com/photo-1607556772227-fe3868023d27?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <button class="text-white hover:text-gray-50">

<section class="skewed-top-left skewed-bottom-right">
  <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-xl mx-auto text-center">
        <span class="mb-6 inline-block p-3 bg-purple-200 rounded">
          <svg class="w-6 h-6 text-purple-600" 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>
        </span>
        <h2 class="mb-4 text-4xl md:text-5xl font-bold font-heading">Many useful features</h2>
        <p class="mb-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        <div class="flex flex-wrap justify-center items-center">
          <input class="w-full md:w-auto mb-3 md:mb-0 md:mr-4 py-2 px-4 bg-white rounded leading-loose" type="email" placeholder="hello@example.com">
          <input class="w-full md:w-auto mb-3 md:mb-0 md:mr-4 py-2 px-4 bg-white rounded leading-loose" type="text" placeholder="Name">

<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-8 md:mb-16 max-w-lg mx-auto text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="mb-6 text-4xl lg:text-5xl font-bold font-heading">Latest Projects</h2>
        <div class="inline-flex flex-wrap py-1 sm:px-1 sm:space-x-1 bg-white 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-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none transition duration-200" :class="{'bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab1.textContent == tab, 'text-gray-500 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-gray-500 font-bold transition duration-200" :class="{'bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab2.textContent == tab, 'text-gray-500 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-gray-500 font-bold transition duration-200" :class="{'bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab3.textContent == tab, 'text-gray-500 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-gray-500 font-bold transition duration-200" :class="{'bg-gray-50 text-gray-900 shadow-md rounded font-bold focus:outline-none': $refs.tab4.textContent == tab, 'text-gray-500 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 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-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-8 md:mb-16 max-w-lg mx-auto text-center">
        <span class="text-green-600 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-gray-800 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-green-600 text-white shadow-md rounded font-bold focus:outline-none transition duration-200" :class="{'bg-green-600 text-white shadow-md rounded font-bold focus:outline-none': $refs.tab1.textContent == tab, 'text-gray-500 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-gray-500 font-bold transition duration-200" :class="{'bg-green-600 text-white shadow-md rounded font-bold focus:outline-none': $refs.tab2.textContent == tab, 'text-gray-500 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-gray-500 font-bold transition duration-200" :class="{'bg-green-600 text-white shadow-md rounded font-bold focus:outline-none': $refs.tab3.textContent == tab, 'text-gray-500 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-gray-500 font-bold transition duration-200" :class="{'bg-green-600 text-white shadow-md rounded font-bold focus:outline-none': $refs.tab4.textContent == tab, 'text-gray-500 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 class="relative py-10 lg:h-screen bg-gray-50">
  <div class="hidden lg:flex items-center absolute inset-0 w-2/5 bg-white">
    <img class="mx-auto" src="atis-assets/illustrations/technical-support-dark-green.png" alt="">
  </div>
  <div class="lg:absolute inset-0 flex justify-center items-center ml-auto w-full lg:w-3/5 bg-gray-50">
    <div class="container mx-auto px-4">
      <div class="max-w-md mx-auto py-10">
        <h3 class="mb-6 text-2xl">Got any question? Let’s talk about it.</h3>
        <form action="">
          <div class="mb-4 text-sm">
            <span class="mr-4 font-semibold">Department:</span>
            <label class="mr-4">
              <input class="mr-1" type="radio" name="department" value="1" checked="">
              <span>Support</span>
            </label>
            <label>
              <input class="mr-1" type="radio" name="department" value="2">
              <span>Sales</span>
            </label>
          </div>
          <div class="mb-4">
            <input class="w-full p-4 text-xs font-semibold leading-none bg-white rounded outline-none" type="text" placeholder="Subject">
          </div>
          <div class="mb-4">