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-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/2 mb-12 lg:mb-0">
          <div class="max-w-md">
            <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 class="max-w-xs">
              <p class="text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2">

<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 mb-6 lg:mb-20">
        <div class="mb-6 w-full lg:w-1/5">
          <a class="text-white text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-mono-white.svg" alt="" width="auto">
          </a>
        </div>
        <div class="mb-5 w-full lg:w-1/5">
          <p class="text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo.</p>
        </div>
        <div class="w-full lg:w-3/5 flex flex-wrap -mx-3 justify-end">
          <div class="mb-6 w-full md:w-1/2 lg:w-1/4 lg:mr-6 px-3">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-md mx-auto text-center">
        <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl md:text-5xl font-bold">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-12 lg:mb-0 w-full md:w-1/2 lg:w-1/4 px-4">
          <span class="mb-4 md:mb-6 inline-block bg-blue-100 p-3 text-blue-500 rounded">
            <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
            </svg>
          </span>

<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="flex flex-wrap items-center">
        <div class="w-full lg:w-1/2 mb-12 lg:mb-0">
          <div class="max-w-md">
            <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 class="max-w-xs">
              <p class="text-gray-50 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2">

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-md mx-auto text-center">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl md:text-5xl font-bold">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-12 lg:mb-0 w-full md:w-1/2 lg:w-1/4 px-4">
          <span class="mb-4 md:mb-6 inline-block bg-green-100 p-3 text-green-500 rounded">
            <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
            </svg>
          </span>

<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">
      <img class="mx-auto" src="atis-assets/illustrations/pablo.png" alt="">
      <div class="text-center">
        <span class="mb-6 text-4xl text-green-600 font-bold">Whoops!</span>
        <h3 class="mb-2 text-white text-4xl font-bold">Something went wrong!</h3>
        <p class="mb-8 text-gray-500">Sorry, but we are unable to open this page</p>
        <div><a class="w-full lg:w-auto mb-2 lg:mb-0 lg:mr-4 inline-block py-2 px-6 rounded-l-xl rounded-t-xl font-bold leading-loose text-white bg-green-600 hover:bg-green-700" href="#">Go back to Homepage</a><a class="w-full lg:w-auto inline-block py-2 px-6 rounded-l-xl rounded-t-xl font-bold leading-loose bg-white hover:bg-gray-50 text-gray-900" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom 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">

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 flex justify-between items-center bg-gray-900">
    <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 class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-white p-3">
        <svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
      <li><a class="text-sm text-gray-300 hover:text-white" href="#">Start</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-white font-bold" href="#">About Us</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>

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

<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-purple-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-pink-600 text-white shadow-md rounded font-bold focus:outline-none transition duration-200" :class="{'bg-pink-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-pink-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-pink-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-pink-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 mb-8 -mx-4">

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 flex justify-between items-center bg-white">
    <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>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-green-600 p-3">
        <svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
      <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Start</a></li>
      <li class="text-gray-300">
        <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-green-600 font-bold" href="#">About Us</a></li>
      <li class="text-gray-300">
        <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>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/2 mb-12 lg:mb-0">
          <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>
            <div class="max-w-xs">
              <p class="text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2">

<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="border-b border-gray-800">
      <div class="mb-16 max-w-xl mx-auto px-4 text-center">
        <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-white text-4xl lg:text-5xl font-bold">Frequently Asked Questions</h2>
      </div>
      <div class="max-w-3xl mx-auto">
        <div class="flex flex-wrap px-4 text-center lg:-mx-4 lg:space-x-4 text-base lg:text-xl">
          <button x-ref="tab1" class="px-4 py-4 w-full md:w-1/2 lg:w-auto outline-none font-bold text-purple-600 border-b-2 border-purple-600 transition duration-150" :class="{'text-purple-600 border-b-2 border-purple-600': $refs.tab1.textContent == tab, 'text-gray-400 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600': $refs.tab1.textContent != tab }" x-on:click="tab = $refs.tab1.textContent">General</button>
          <button x-ref="tab2" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition duration-150" :class="{'text-purple-600 border-b-2 border-purple-600': $refs.tab2.textContent == tab}" x-on:click="tab = $refs.tab2.textContent">Payments</button>
          <button x-ref="tab3" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition duration-150" :class="{'text-purple-600 border-b-2 border-purple-600': $refs.tab3.textContent == tab}" x-on:click="tab = $refs.tab3.textContent">Returns</button>
          <button x-ref="tab4" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition duration-150" :class="{'text-purple-600 border-b-2 border-purple-600': $refs.tab4.textContent == tab}" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
        </div>

<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 In</a>
        </div>
        <div>
          <div class="mb-6 px-3">
            <span class="text-gray-500">Sign Up</span>
            <h3 class="text-2xl font-bold">Create an account</h3>
          </div>
          <form action="">
            <div class="flex flex-wrap">
              <div class="mb-3 w-full lg:w-1/2 px-2">
                <input class="w-full p-4 text-xs bg-gray-50 outline-none rounded" type="text" placeholder="First Name">
              </div>
              <div class="mb-3 w-full lg:w-1/2 px-2">
                <input class="w-full p-4 text-xs bg-gray-50 outline-none rounded" type="text" placeholder="Last Name">
              </div>
            </div>

<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 In</a>
        </div>
        <div>
          <div class="mb-6 px-3">
            <span class="text-gray-500">Sign Up</span>
            <h3 class="text-2xl font-bold text-white">Create an account</h3>
          </div>
          <form action="">
            <div class="flex flex-wrap">
              <div class="mb-3 w-full lg:w-1/2 px-2">
                <input class="w-full p-4 text-xs text-gray-50 bg-gray-800 outline-none rounded" type="text" placeholder="First Name">
              </div>
              <div class="mb-3 w-full lg:w-1/2 px-2">
                <input class="w-full p-4 text-xs text-gray-50 bg-gray-800 outline-none rounded" type="text" placeholder="Last Name">
              </div>
            </div>

<section x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-green-600 radius-for-skewed">
    <div class="border-b border-green-400">
      <div class="mb-16 max-w-xl mx-auto px-4 text-center">
        <span class="text-green-400 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-white text-4xl lg:text-5xl font-bold">Frequently Asked Questions</h2>
      </div>
      <div class="max-w-3xl mx-auto">
        <div class="flex flex-wrap px-4 text-center lg:-mx-4 lg:space-x-4 text-base lg:text-xl">
          <button x-ref="tab1" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-white border-b-2 border-white transition duration-150" :class="{'text-white border-b-2 border-white': $refs.tab1.textContent == tab, 'text-green-500 hover:text-white border-b-2 border-transparent hover:border-white': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">General</button>
          <button x-ref="tab2" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-green-500 hover:text-white border-b-2 border-transparent hover:border-white transition duration-150" :class="{'text-white border-b-2 border-white': $refs.tab2.textContent == tab }" x-on:click="tab = $refs.tab2.textContent">Payments</button>
          <button x-ref="tab3" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-green-500 hover:text-white border-b-2 border-transparent hover:border-white transition duration-150" :class="{'text-white border-b-2 border-white': $refs.tab3.textContent == tab }" x-on:click="tab = $refs.tab3.textContent">Returns</button>
          <button x-ref="tab4" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-green-500 hover:text-white border-b-2 border-transparent hover:border-white transition duration-150" :class="{'text-white border-b-2 border-white': $refs.tab4.textContent == tab }" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
        </div>

<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="border-b">
      <div class="mb-16 max-w-xl mx-auto px-4 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">Frequently Asked Questions</h2>
      </div>
      <div class="max-w-3xl mx-auto">
        <div class="flex flex-wrap px-4 text-center lg:-mx-4 lg:space-x-4 text-base lg:text-xl">
          <button x-ref="tab1" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-purple-600 border-b-2 border-purple-600 transition duration-150" :class="{'text-purple-600 border-b-2 border-purple-600': $refs.tab1.textContent == tab, 'text-gray-400 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">General</button>
          <button x-ref="tab2" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition duration-150" :class="{'text-purple-600 border-b-2 border-purple-600': $refs.tab2.textContent == tab}" x-on:click="tab = $refs.tab2.textContent">Payments</button>
          <button x-ref="tab3" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition duration-150" :class="{'text-purple-600 border-b-2 border-purple-600': $refs.tab3.textContent == tab}" x-on:click="tab = $refs.tab3.textContent">Returns</button>
          <button x-ref="tab4" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-purple-600 border-b-2 border-transparent hover:border-purple-600 transition duration-150" :class="{'text-purple-600 border-b-2 border-purple-600': $refs.tab4.textContent == tab}" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
        </div>

<section x-data="{ current: 0 }">
  <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 items-center -mx-3">
        <div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
          <ul class="flex flex-wrap flex-row lg:flex-col justify-center lg:justify-start space-x-6 lg:space-x-0">
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-white" :class="{'text-white': current == 0, 'text-gray-800 hover:text-white': current != 0}" x-on:click="current = 0">Danny Bailey</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-gray-800 hover:text-white" :class="{'text-white': current == 1, 'text-gray-800 hover:text-white': current != 1}" x-on:click="current = 1">Ian Brown</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-gray-800 hover:text-white" :class="{'text-white': current == 2, 'text-gray-800 hover:text-white': current != 2}" x-on:click="current = 2">Daisy Carter</button>

<section x-data="{ current: 0 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center -mx-3">
        <div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
          <ul class="flex flex-wrap flex-row lg:flex-col justify-center lg:justify-start space-x-6 lg:space-x-0">
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-gray-900" :class="{'text-gray-900': current == 0, 'text-gray-300 hover:text-gray-400': current != 0}" x-on:click="current = 0">Danny Bailey</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-gray-300 hover:text-gray-400" :class="{'text-gray-900': current == 1, 'text-gray-300 hover:text-gray-400': current != 1}" x-on:click="current = 1">Ian Brown</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-gray-300 hover:text-gray-400" :class="{'text-gray-900': current == 2, 'text-gray-300 hover:text-gray-400': current != 2}" x-on:click="current = 2">Daisy Carter</button>

<section x-data="{ current: 0 }">
  <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 items-center -mx-3">
        <div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
          <ul class="flex flex-wrap flex-row lg:flex-col justify-center lg:justify-start space-x-6 lg:space-x-0">
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-white" :class="{'text-white': current == 0, 'text-gray-800 hover:text-white': current != 0}" x-on:click="current = 0">Danny Bailey</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-gray-800 hover:text-white" :class="{'text-white': current == 1, 'text-gray-800 hover:text-white': current != 1}" x-on:click="current = 1">Ian Brown</button>
            </li>
            <li>
              <button class="text-2xl lg:text-4xl mb-4 font-bold text-gray-800 hover:text-white" :class="{'text-white': current == 2, 'text-gray-800 hover:text-white': current != 2}" x-on:click="current = 2">Daisy Carter</button>

<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="border-b">
      <div class="mb-16 max-w-xl mx-auto px-4 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">Frequently Asked Questions</h2>
      </div>
      <div class="max-w-3xl mx-auto">
        <div class="flex flex-wrap px-4 text-center lg:-mx-4 lg:space-x-4 text-base lg:text-xl">
          <button x-ref="tab1" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-green-600 border-b-2 border-green-600 transition duration-150" :class="{'text-green-600 border-b-2 border-green-600': $refs.tab1.textContent == tab, 'text-gray-400 hover:text-green-600 border-b-2 border-transparent hover:border-green-600': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">General</button>
          <button x-ref="tab2" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-green-600 border-b-2 border-transparent hover:border-green-600 transition duration-150" :class="{'text-green-600 border-b-2 border-green-600': $refs.tab2.textContent == tab }" x-on:click="tab = $refs.tab2.textContent">Payments</button>
          <button x-ref="tab3" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-green-600 border-b-2 border-transparent hover:border-green-600 transition duration-150" :class="{'text-green-600 border-b-2 border-green-600': $refs.tab3.textContent == tab }" x-on:click="tab = $refs.tab3.textContent">Returns</button>
          <button x-ref="tab4" class="px-4 py-4 w-full md:w-1/2 lg:w-auto font-bold text-gray-400 hover:text-green-600 border-b-2 border-transparent hover:border-green-600 transition duration-150" :class="{'text-green-600 border-b-2 border-green-600': $refs.tab4.textContent == tab }" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
        </div>