Tailwind CSS Components

<section class="py-20">
  <div class="container mx-auto px-4 text-center">
    <h3 class="mb-12 text-2xl font-heading">Trusted by brands all over the world</h3>
    <div class="flex flex-wrap -mx-2">
      <div class="mb-4 w-full md:w-1/3 lg:w-1/6 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-6" src="atis-assets/logo/brands/slack.png" alt="">
          </a>
        </div>
      </div>
      <div class="mb-4 w-full md:w-1/3 lg:w-1/6 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-6" src="atis-assets/logo/brands/dropbox.png" alt="">
          </a>
        </div>
      </div>
      <div class="mb-4 w-full md:w-1/3 lg:w-1/6 px-2">
        <div class="py-16 bg-gray-50 rounded">
          <a href="#">
            <img class="mx-auto h-6" src="atis-assets/logo/brands/spotify.png" alt="">
          </a>
        </div>

<section x-data="{ pricing: 'Monthly' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-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-lg mx-auto text-center">
        <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">All the tools you need in one workspace.</h2>
        <p class="mb-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="inline-block py-1 px-1 bg-gray-800 rounded-lg">
          <button x-ref="pricing1" class="mr-1 text-sm py-2 px-4 text-white bg-green-600 rounded-lg shadow-md font-bold" :class="{'text-white bg-green-600 rounded-lg shadow-md': $refs.pricing1.textContent == pricing, 'text-gray-500 hover:text-gray-400': $refs.pricing1.textContent != pricing}" x-on:click="pricing = $refs.pricing1.textContent">Monthly</button>
          <button x-ref="pricing2" class="text-sm py-2 px-4 text-gray-500 hover:text-gray-400 font-bold" :class="{'text-white bg-green-600 rounded-lg shadow-md': $refs.pricing2.textContent == pricing, 'text-gray-500 hover:text-gray-400': $refs.pricing2.textContent != pricing}" x-on:click="pricing = $refs.pricing2.textContent">Yearly</button>
        </div>
      </div>
      <div class="flex flex-wrap max-w-4xl mx-auto">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">

<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-8 lg:mb-16 text-center mx-auto max-w-xl">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Check our awesome team members</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-6 w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap items-center bg-white rounded overflow-hidden">
            <img class="w-full lg:w-1/3 h-80 object-cover" src="https://images.unsplash.com/photo-1580852300654-03c803a14e24?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80" alt="">
            <div class="w-full lg:w-2/3 lg:pl-6 p-4">
              <h4 class="mb-2 text-2xl font-bold font-heading">Danny Bailey</h4>
              <p class="mb-4 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</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="pb-12 flex flex-wrap items-center justify-between border-b border-gray-100">
        <div class="w-full lg:w-1/5 mb-12 lg:mb-4">
          <a class="inline-block text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-color-black.svg" alt="" width="auto">
          </a>
        </div>
        <div class="w-full lg:w-auto">
          <ul class="flex flex-wrap lg:space-x-5 items-center">
            <li class="w-full md:w-auto mb-2 md:mb-0"><a class="lg:text-sm text-gray-400 hover:text-gray-500" href="#">Start</a></li>
            <li class="hidden md:block">
              <svg class="mx-4 w-4 h-4 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<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-20 max-w-md text-center mx-auto">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-16 lg:mb-0 relative w-full md:w-1/2 lg:w-1/3 px-4">
          <svg class="absolute top-0 left-0 -mt-10 ml-4 text-green-600" width="36" height="101" viewBox="0 0 36 101" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path opacity="0.2" d="M16.736 101V21.224L0.176 25.112V11L24.512 0.199993H35.888V101H16.736Z" fill="currentColor"></path>
          </svg>
          <h3 class="text-2xl font-bold">Lorem ipsum dolor sit amet consectutar</h3>
          <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-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 lg:mb-16 text-center mx-auto max-w-xl">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading">Check our awesome team members</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-6 w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap items-center bg-white rounded shadow overflow-hidden">
            <img class="w-full lg:w-1/3 h-80 object-cover" src="https://images.unsplash.com/photo-1580852300654-03c803a14e24?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80" alt="">
            <div class="w-full lg:w-2/3 lg:pl-6 p-4">
              <h4 class="mb-2 text-2xl font-bold font-heading">Danny Bailey</h4>
              <p class="mb-4 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</p>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="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-4">
        <div class="mb-8 lg:mb-0 w-full lg:w-1/3 px-4">
          <div class="py-12 px-6 bg-gray-800 rounded shadow-md text-center">
            <span class="mb-6 inline-block p-2 rounded-lg bg-yellow-800">
              <svg class="w-10 h-10 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>
              </svg>

<div class="fixed bottom-0 inset-x-0 z-50" x-data="{ open: true }" x-show="open">
  <div class="max-w-md lg:max-w-3xl mx-4 md:mx-0 md:ml-10 mb-6 py-6 pl-6 pr-16 bg-gray-800 text-white rounded-lg">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <p class="font-bold font-heading">Cookie Policy</p>
        <p class="mb-4 mt-3 mb-6 text-gray-400 text-sm">We use <a class="text-green-600 underline" href="#">cookies</a> to personalise content, to provide social media features and to analyse our traffic.</p>
      </div>
      <div class="w-full lg:w-1/2 px-4 lg:text-right"><a class="mr-4 py-2 px-4 rounded-l-xl rounded-t-xl border-2 border-green-600 hover:border-green-700 bg-green-600 hover:bg-green-700 transition duration-200" href="#" x-on:click.prevent="open=false">Allow</a><a class="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>

<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 lg:text-5xl font-bold font-heading">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-8 lg:mb-0 w-full lg:w-1/3 px-4">
          <div class="py-12 px-6 bg-white rounded shadow text-center">
            <span class="mb-6 inline-block p-2 rounded-lg bg-yellow-100">
              <svg class="w-10 h-10 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>
              </svg>

<section class="py-20 bg-gray-900">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-center">
      <div class="w-auto bg-gray-800 mb-10 lg:mb-0 lg:mr-8 py-8 px-10 rounded">
        <img class="h-16" src="atis-assets/logo/atis/atis-color-sign.svg" alt="">
      </div>
      <div class="w-full lg:w-auto mb-10 lg:mb-0 text-center lg:text-left">
        <h2 class="max-w-xl mx-auto lg:mx-0 mb-2 text-4xl lg:text-5xl text-white font-bold font-heading">Many useful features</h2>
        <p class="max-w-xl mx-auto lg:mx-0 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
      </div>
      <div class="w-full lg:w-auto lg:ml-auto text-center"><a class="inline-block py-2 px-6 bg-purple-600 hover:bg-purple-700 text-white font-bold leading-loose rounded-l-xl rounded-t-xl transition duration-200" href="#">Get Started</a></div>
    </div>
  </div>
</section>

<section class="py-10 lg:py-20 bg-gray-800">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto">
      <div class="mb-10">
        <a class="text-white text-3xl font-bold leading-none" href="#">
          <img class="h-12 mx-auto" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
        </a>
      </div>
      <div class="p-6 lg:p-12 mb-6 bg-gray-900 shadow-md rounded">
        <div class="mb-6">
          <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 -mx-2">
            <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>
          <div class="mb-3 flex p-4 bg-gray-800 rounded">
            <input class="w-full text-xs text-gray-50 bg-gray-800 outline-none" type="email" placeholder="name@email.com">

<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-20 max-w-md text-center mx-auto">
        <span class="text-purple-400 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-16 lg:mb-0 relative w-full md:w-1/2 lg:w-1/3 px-4">
          <svg class="absolute top-0 left-0 -mt-10 ml-4 text-pink-600" width="36" height="101" viewBox="0 0 36 101" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path opacity="0.2" d="M16.736 101V21.224L0.176 25.112V11L24.512 0.199993H35.888V101H16.736Z" fill="currentColor"></path>
          </svg>
          <h3 class="relative text-2xl font-bold text-white">Lorem ipsum dolor sit amet consectutar</h3>
          <p class="text-gray-50 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-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-20 max-w-md text-center mx-auto">
        <span class="text-green-400 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Build &amp; Launch without problems</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-16 lg:mb-0 relative w-full md:w-1/2 lg:w-1/3 px-4">
          <svg class="absolute top-0 left-0 -mt-10 ml-4 text-green-400" width="36" height="101" viewBox="0 0 36 101" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path opacity="0.2" d="M16.736 101V21.224L0.176 25.112V11L24.512 0.199993H35.888V101H16.736Z" fill="currentColor"></path>
          </svg>
          <h3 class="relative text-2xl font-bold text-white">Lorem ipsum dolor sit amet consectutar</h3>
          <p class="text-gray-50 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>

<section x-data="{ pricing: 'Monthly' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-lg mx-auto text-center">
        <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">All the tools you need in one workspace.</h2>
        <p class="mb-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="inline-block py-1 px-1 bg-white rounded-lg">
          <button x-ref="pricing1" class="mr-1 text-sm py-2 px-4 text-gray-900 bg-gray-50 rounded-lg shadow font-bold" :class="{'text-gray-900 bg-gray-50 rounded-lg shadow': $refs.pricing1.textContent == pricing, 'text-gray-500 hover:text-gray-900': $refs.pricing1.textContent != pricing}" x-on:click="pricing = $refs.pricing1.textContent">Monthly</button>
          <button x-ref="pricing2" class="text-sm py-2 px-4 text-gray-500 hover:text-gray-900 font-bold" :class="{'text-gray-900 bg-gray-50 rounded-lg shadow': $refs.pricing2.textContent == pricing, 'text-gray-500 hover:text-gray-900': $refs.pricing2.textContent != pricing}" x-on:click="pricing = $refs.pricing2.textContent">Yearly</button>
        </div>
      </div>
      <div class="flex flex-wrap max-w-4xl mx-auto">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">

<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-20 max-w-md text-center mx-auto">
        <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-4">
        <div class="mb-16 lg:mb-0 relative w-full md:w-1/2 lg:w-1/3 px-4">
          <svg class="absolute top-0 left-0 -mt-4 ml-4 text-yellow-600" width="36" height="101" viewBox="0 0 36 101" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path opacity="0.2" d="M16.736 101V21.224L0.176 25.112V11L24.512 0.199993H35.888V101H16.736Z" fill="currentColor"></path>
          </svg>
          <h3 class="relative text-2xl font-bold text-white">Lorem ipsum dolor sit amet consectutar</h3>
          <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-8 lg:mb-16 text-center mx-auto max-w-xl">
        <span class="text-purple-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Check our awesome team members</h2>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="mb-6 w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap items-center bg-white rounded overflow-hidden">
            <img class="w-full lg:w-1/3 h-80 object-cover" src="https://images.unsplash.com/photo-1580852300654-03c803a14e24?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80" alt="">
            <div class="w-full lg:w-2/3 lg:pl-6 p-4">
              <h4 class="mb-2 text-2xl font-bold font-heading">Danny Bailey</h4>
              <p class="mb-4 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae felis at ante bibendum mollis et et mauris.</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="mb-16 max-w-2xl mx-auto text-center">
        <div class="max-w-lg mx-auto">
          <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
          <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">All the tools you need in one workspace.</h2>
          <p class="mb-8 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="flex flex-wrap justify-center">
          <label class="md:mr-4 w-full sm:w-auto flex items-center mr-8 mb-2">
            <input type="radio" name="billing" value="1">
            <span class="mx-2 font-semibold text-white">Monthly Billing</span>
            <span class="inline-flex items-center justify-center w-12 h-10 bg-green-600 text-white font-semibold rounded-lg">$59</span>

<section x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container px-4 mx-auto">
      <div class="lg:flex items-center justify-center md:space-x-8">
        <div class="mb-10 text-center lg:hidden">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="mr-6 lg:mr-0 bg-white p-4 rounded-full shadow-md text-purple-600 hover:text-purple-400 transition duration-200">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
          </button>
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="bg-white p-4 rounded-full shadow-md text-purple-600 hover:text-purple-400 transition duration-200">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>

<section x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="relative flex">
        <div class="hidden xl:absolute inset-y-0 left-0 -ml-6 xl:flex items-center">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="p-4 bg-purple-600 hover:bg-purple-700 rounded-l-xl rounded-t-xl text-white z-10">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
          </button>
        </div>
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
                <div class="inline-block w-full whitespace-normal relative overflow-hidden">

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