Tailwind Components in Bendis library

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative py-8 px-4 xl:px-10 bg-blue-800">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <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:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-8 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block py-3 px-8 text-sm text-white hover:text-blue-50 uppercase font-semibold border-2 border-white" href="#">Sign up</a></div>
    </div>
  </nav>
  <div class="relative py-32 text-center bg-cover overflow-hidden" style="background-image: url('bendis-assets/images/red-image.png');">
    <div class="absolute top-0 bottom-0 -left-1/4 -right-1/4 flex items-center justify-center">
      <h2 class="stroke opacity-75">BE BOLD</h2>
    </div>
    <div class="relative max-w-4xl mx-auto px-4">
      <span class="text-lg text-white font-semibold uppercase">Develop your skill</span>
      <h2 class="mt-8 mb-8 text-white text-4xl lg:text-6xl font-bold uppercase">Take care of your performance every day.</h2>
      <a class="inline-block w-full md:w-auto px-8 py-5 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Get started free</a>
    </div>
  </div>
  <div class="container px-4 py-10 mx-auto">
    <div class="flex flex-wrap items-center justify-center -mx-2 -mb-12">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
        <img class="mx-auto h-6" src="bendis-assets/logos/slack.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
        <img class="mx-auto h-6" src="bendis-assets/logos/dropbox.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
        <img class="mx-auto h-6" src="bendis-assets/logos/spotify.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
        <img class="mx-auto h-6" src="bendis-assets/logos/stripe.svg" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-2 mb-12">
        <img class="mx-auto h-6" src="bendis-assets/logos/netflix.svg" alt="">
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section class="relative pb-40 bg-blue-800 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative py-8 px-4 lg:px-10 z-10">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
      </button>
    </div>
  </nav>
  <div class="absolute top-0 bottom-0 -left-1/4 -right-1/4 flex items-center justify-center">
    <h2 class="stroke opacity-75">BE BOLD</h2>
  </div>
  <img class="hidden lg:block absolute bottom-0 right-0 lg:w-3/5 h-screen -mr-28 object-cover clip-path-left" src="bendis-assets/images/red-image.png" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="max-w-4xl pt-20">
      <p class="max-w-sm text-lg text-white">Take care to develop resources continually and integrity them with previous projects.</p>
      <h2 class="mt-8 mb-8 text-5xl lg:text-7xl text-white font-bold">Take care of your performance every day</h2>
      <div class="flex flex-wrap lg:flex-nowrap max-w-md">
        <input class="mb-2 lg:mb-0 w-full lg:w-2/3 py-4 pl-4 text-sm border" type="text" placeholder="Type your e-mail">
        <button class="w-full lg:w-auto py-5 px-8 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400">Get&nbsp;started&nbsp;free</button>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section class="relative" x-data="{ mobileNavOpen: false }">
  <nav class="relative py-8 px-4 xl:px-10 bg-blue-800">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <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:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-8 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block py-3 px-8 text-sm text-white hover:text-blue-50 uppercase font-semibold border-2 border-white" href="#">Sign up</a></div>
    </div>
  </nav>
  <div class="relative py-24 bg-cover overflow-hidden" style="background-image: url('bendis-assets/images/red-image.png');">
    <div class="absolute top-0 bottom-0 -left-1/4 -right-1/4 flex items-center justify-center">
      <h2 class="stroke opacity-75">BE BOLD</h2>
    </div>
    <div class="relative max-w-4xl mb-20 mx-auto px-4 text-center">
      <span class="text-lg text-white font-semibold tracking-widest uppercase">Develop your skill</span>
      <h2 class="mt-8 mb-8 text-white text-4xl lg:text-6xl font-bold uppercase">Take care of your performance every day.</h2>
      <a class="inline-block w-full md:w-auto px-8 py-5 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Get started free</a>
    </div>
    <div class="max-w-5xl px-4 mx-auto">
      <div class="flex flex-wrap -mx-5">
        <div class="w-full md:w-1/3 px-5 mb-8 md:mb-0">
          <div class="flex">
            <div class="mr-8">
              <svg class="text-yellow-500" width="29" height="29" viewBox="0 0 29 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.3377 0L0 14.1465L14.3377 28.293L28.6753 14.1465L14.3377 0ZM3.37903 14.1465L14.3377 3.33397L18.9723 7.90683L17.2826 9.57399L14.3377 6.66901L6.75913 14.1465L9.70301 17.0522L8.01332 18.7193L3.37903 14.1465ZM18.5382 14.1465L14.3377 18.2921L10.1382 14.1465L14.3377 10.003L18.5382 14.1465ZM9.70301 20.3865L11.3927 18.7193L14.3377 21.624L21.9173 14.1465L18.9723 11.2408L20.662 9.57364L25.2963 14.1465L14.3377 24.959L9.70301 20.3865Z"></path>
              </svg>
            </div>
            <div>
              <h3 class="text-lg text-white font-bold uppercase">Quick review</h3>
              <p class="text-base text-white">We make sure you get feedback the same day</p>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-5 mb-8 md:mb-0">
          <div class="flex">
            <div class="mr-8">
              <svg class="text-yellow-500" width="29" height="29" viewBox="0 0 29 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.3377 0L0 14.1465L14.3377 28.293L28.6753 14.1465L14.3377 0ZM3.37903 14.1465L14.3377 3.33397L18.9723 7.90683L17.2826 9.57399L14.3377 6.66901L6.75913 14.1465L9.70301 17.0522L8.01332 18.7193L3.37903 14.1465ZM18.5382 14.1465L14.3377 18.2921L10.1382 14.1465L14.3377 10.003L18.5382 14.1465ZM9.70301 20.3865L11.3927 18.7193L14.3377 21.624L21.9173 14.1465L18.9723 11.2408L20.662 9.57364L25.2963 14.1465L14.3377 24.959L9.70301 20.3865Z"></path>
              </svg>
            </div>
            <div>
              <h3 class="text-lg text-white font-bold uppercase">Easy changes</h3>
              <p class="text-base text-white">Options settings for customers conveience</p>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-5">
          <div class="flex">
            <div class="mr-8">
              <svg class="text-yellow-500" width="29" height="29" viewBox="0 0 29 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.3377 0L0 14.1465L14.3377 28.293L28.6753 14.1465L14.3377 0ZM3.37903 14.1465L14.3377 3.33397L18.9723 7.90683L17.2826 9.57399L14.3377 6.66901L6.75913 14.1465L9.70301 17.0522L8.01332 18.7193L3.37903 14.1465ZM18.5382 14.1465L14.3377 18.2921L10.1382 14.1465L14.3377 10.003L18.5382 14.1465ZM9.70301 20.3865L11.3927 18.7193L14.3377 21.624L21.9173 14.1465L18.9723 11.2408L20.662 9.57364L25.2963 14.1465L14.3377 24.959L9.70301 20.3865Z"></path>
              </svg>
            </div>
            <div>
              <h3 class="text-lg text-white font-bold uppercase">Place storage</h3>
              <p class="text-base text-white">Store projects in easily accessible catalogs</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section class="relative pb-20 bg-blue-800 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative py-8 px-4 xl:px-10 bg-blue-800">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <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:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-8 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block py-3 px-8 text-sm text-white hover:text-blue-50 uppercase font-semibold border-2 border-white" href="#">Sign up</a></div>
    </div>
  </nav>
  <div class="relative pt-12 md:pt-0">
    <div class="absolute top-0 bottom-0 -left-1/4 -right-1/4 flex items-center justify-center">
      <h2 class="stroke opacity-75">BE BOLD</h2>
    </div>
    <div class="container px-4 mx-auto">
      <div class="relative flex flex-wrap items-center -mx-4">
        <div class="relative z-10 w-full md:w-1/2 px-4 lg:py-32 mb-6 md:mb-0">
          <div class="flex flex-wrap lg:flex-nowrap">
            <div class="mb-6 lg:mb-0 lg:mt-32 lg:-mr-10">
              <p class="lg:transform lg:rotate-90 tracking-widest text-lg text-white uppercase">Develop&nbsp;your&nbsp;kill</p>
            </div>
            <div>
              <h2 class="mb-8 text-4xl lg:text-6xl text-white font-bold">Take care of your&nbsp;performance every day.</h2>
              <a class="inline-block w-full md:w-auto mb-2 md:mb-0 py-5 px-8 mr-6 text-center text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Get started free</a><a class="inline-block w-full md:w-auto py-5 px-8 text-center text-sm text-white font-bold uppercase border border-white hover:border-gray-50 transition duration-200" href="#">Request demo</a>
            </div>
          </div>
        </div>
        <div class="hidden md:block absolute top-0 right-0 w-full md:w-1/2 mr-10 px-4">
          <img class="w-full h-80 lg:h-128 object-cover" src="bendis-assets/images/red-image.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section class="relative pb-20 bg-blue-800 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative py-8 px-4 xl:px-10 bg-blue-800">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <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:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-8 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block py-3 px-8 text-sm text-white hover:text-blue-50 uppercase font-semibold border-2 border-white" href="#">Sign up</a></div>
    </div>
  </nav>
  <div class="relative pt-12 md:pt-0">
    <span class="absolute top-0 left-0">
      <svg width="381" height="597" viewBox="0 0 381 597" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.1">
          <path d="M82.101 582.819C82.243 582.819 82.385 582.819 82.527 582.678L323.918 440.872L324.06 440.731L324.202 440.589L380.858 355.789L381 355.648V355.506V355.364V355.222V355.08L324.202 99.8309C324.202 99.6891 324.06 99.5473 323.918 99.4055C323.776 99.4055 323.634 99.2637 323.492 99.2637H323.35L194.561 135.282C194.135 135.424 193.993 135.849 194.135 136.133C194.277 136.558 194.561 136.7 194.845 136.7H194.987L322.924 100.824L379.296 354.088L221.398 294.246L129.527 163.927C129.385 163.643 129.101 163.643 128.959 163.643C128.817 163.643 128.675 163.643 128.533 163.785C128.249 164.069 128.107 164.494 128.391 164.778L219.126 293.395L64.0677 234.688L60.8018 174.279L153.95 148.186C154.234 148.186 154.376 147.903 154.376 147.903C154.376 147.761 154.518 147.619 154.376 147.336C154.234 146.91 153.95 146.768 153.666 146.768H153.524L60.6598 172.719L54.5541 59.8418L103.968 130.035C104.11 130.319 104.394 130.319 104.536 130.319C104.678 130.319 104.82 130.319 104.962 130.177C105.246 129.894 105.388 129.468 105.104 129.185L54.2701 57.0057C54.1281 56.8639 53.9861 56.7221 53.7021 56.7221C53.5601 56.7221 53.5601 56.7221 53.4181 56.7221C53.1341 56.8639 52.9921 57.1475 52.9921 57.4311L59.2399 173.144L-31.4948 198.527L-31.7787 198.669H-31.9207L-32.0627 198.811L-32.2047 198.953L-145.801 440.022C-145.943 440.305 -145.943 440.447 -145.801 440.731C-145.659 440.872 -145.517 441.014 -145.233 441.014H14.0856C14.5116 441.014 14.7955 440.731 14.7955 440.305C14.7955 439.88 14.5116 439.596 14.0856 439.596H-143.955L-31.0688 200.087L62.6478 235.538L71.1674 394.077C71.1674 394.502 71.4514 394.786 71.8774 394.786C72.3034 394.786 72.5874 394.36 72.5874 394.077L64.0677 236.248L220.546 295.522L322.072 439.596H75.0013L74.8593 436.618C74.8593 436.193 74.5753 435.909 74.1493 435.909C73.7234 435.909 73.4394 436.335 73.4394 436.618L73.5814 439.596H56.684C56.258 439.596 55.974 439.88 55.974 440.305C55.974 440.731 56.258 441.014 56.684 441.014H73.7234L81.3911 582.11C81.3911 582.394 81.5331 582.536 81.8171 582.678C81.959 582.819 81.959 582.819 82.101 582.819ZM82.811 580.976L75.2853 441.014H320.936L82.811 580.976ZM379.154 355.506L323.492 439.029L222.96 296.373L379.154 355.506ZM62.5058 234.12L-29.2228 199.378L59.3819 174.562L62.5058 234.12Z" fill="white"></path>
          <path d="M209.896 58.1401C225.942 58.1401 239.005 45.0941 239.005 29.0701C239.005 13.0461 225.942 0 209.896 0C193.851 0 180.788 13.0461 180.788 29.0701C180.788 45.0941 193.851 58.1401 209.896 58.1401ZM209.896 1.41805C225.232 1.41805 237.585 13.7551 237.585 29.0701C237.585 44.385 225.232 56.7221 209.896 56.7221C194.561 56.7221 182.207 44.385 182.207 29.0701C182.207 13.7551 194.703 1.41805 209.896 1.41805Z" fill="white"></path>
          <path d="M25.3032 398.473C25.4452 398.473 25.7292 398.331 25.8712 398.189C26.0132 398.047 26.0132 397.905 26.0132 397.764C26.0132 397.622 25.8712 397.338 25.7292 397.196C25.5872 397.055 25.4452 397.055 25.3032 397.055C25.1612 397.055 24.8773 397.055 24.7353 397.196C24.5933 397.338 24.4513 397.48 24.4513 397.764C24.4513 397.905 24.5933 398.189 24.5933 398.189C24.8773 398.331 25.1612 398.473 25.3032 398.473Z" fill="white"></path>
          <path d="M25.3032 355.931C25.4452 355.931 25.7292 355.789 25.8712 355.648C26.0132 355.506 26.0132 355.364 26.0132 355.222C26.0132 355.08 25.8712 354.797 25.7292 354.655C25.5872 354.513 25.4452 354.513 25.3032 354.513C25.1612 354.513 24.8773 354.513 24.7353 354.655C24.5933 354.797 24.4513 354.938 24.4513 355.222C24.4513 355.364 24.5933 355.648 24.5933 355.648C25.0193 355.789 25.1612 355.931 25.3032 355.931Z" fill="white"></path>
          <path d="M25.3032 313.39C25.4452 313.39 25.7292 313.248 25.7292 313.106C25.8712 312.964 26.0132 312.822 26.0132 312.681C26.0132 312.539 25.8712 312.255 25.7292 312.113C25.5872 311.972 25.4452 311.971 25.3032 311.971C25.1612 311.971 24.8773 311.972 24.7353 312.113C24.5933 312.255 24.4513 312.397 24.4513 312.681C24.4513 312.822 24.5933 313.106 24.5933 313.106C24.8773 313.248 25.1612 313.39 25.3032 313.39Z" fill="white"></path>
        </g>
      </svg>
    </span>
    <div class="container px-4 mx-auto">
      <div class="relative flex flex-wrap items-center -mx-4">
        <div class="relative z-10 w-full md:w-1/2 px-4 lg:py-32 mb-6 md:mb-0">
          <div class="flex flex-wrap lg:flex-nowrap">
            <div class="mb-6 lg:mb-0 lg:mt-32 lg:-mr-10">
              <p class="lg:transform lg:rotate-90 tracking-widest text-lg text-white uppercase">Develop&nbsp;your&nbsp;kill</p>
            </div>
            <div>
              <h2 class="mb-8 text-4xl lg:text-6xl text-white font-bold">Take care of your&nbsp;performance every day.</h2>
              <a class="inline-block w-full md:w-auto mb-2 md:mb-0 py-5 px-8 mr-6 text-center text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Get started free</a><a class="inline-block w-full md:w-auto py-5 px-8 text-center text-sm text-white font-bold uppercase border border-white hover:border-gray-50 transition duration-200" href="#">Request demo</a>
            </div>
          </div>
        </div>
        <div class="hidden md:block absolute top-0 right-0 w-full md:w-1/2 mr-10 px-4">
          <img class="w-full h-80 lg:h-128 object-cover" src="bendis-assets/images/red-image.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section class="relative bg-blue-800 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative z-10 py-8 px-4 xl:px-10">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <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:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-8 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block py-3 px-8 text-sm text-white hover:text-blue-50 uppercase font-semibold border-2 border-white" href="#">Sign up</a></div>
    </div>
  </nav>
  <div class="relative pt-12 pb-32 md:pb-32 bg-blue-800">
    <div class="absolute top-0 bottom-0 -left-1/4 -right-1/4 flex items-center justify-center">
      <h2 class="stroke opacity-75">BE BOLD</h2>
    </div>
    <div class="relative container px-4 mx-auto text-center">
      <div class="relative max-w-4xl mx-auto mt-20">
        <div class="relative z-10 mb-20">
          <span class="text-lg text-white font-semibold tracking-widest uppercase">Develop your skill</span>
          <h2 class="mt-8 mb-8 text-white text-4xl lg:text-6xl font-bold uppercase">Take care of your performance every day.</h2>
          <a class="inline-block w-full md:w-auto mb-2 md:mb-0 py-5 px-8 mr-6 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Get started free</a><a class="inline-block w-full md:w-auto py-5 px-8 text-sm text-white font-bold uppercase border border-white hover:border-gray-50 transition duration-200" href="#">Request demo</a>
        </div>
        <a class="relative z-10 flex justify-center items-center text-center text-white hover:text-blue-100" href="#">
          <span>Watch</span>
          <span class="px-2">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22.2769 16.6154L12.1231 22.4615C11.9015 22.72 11.5138 22.7569 11.2554 22.5354C11.0523 22.3692 10.9846 22.0923 11.0769 21.8462V10.1538C10.9538 9.83385 11.1138 9.48308 11.4338 9.36C11.68 9.26769 11.9569 9.33539 12.1231 9.53846L22.2769 15.3846C22.6154 15.5385 22.7631 15.9446 22.6092 16.2831C22.5415 16.4308 22.4246 16.5477 22.2769 16.6154ZM32 16C32 24.8369 24.8369 32 16 32C7.16308 32 0 24.8369 0 16C0 7.16308 7.16308 0 16 0C24.8369 0 32 7.16308 32 16ZM29.5385 16C29.5385 8.52308 23.4769 2.46154 16 2.46154C8.52308 2.46154 2.46154 8.52308 2.46154 16C2.46154 23.4769 8.52308 29.5385 16 29.5385C23.4769 29.5385 29.5385 23.4769 29.5385 16Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>demo</span>
        </a>
        <img class="hidden lg:block absolute inset-0 ml-16 -mt-60 h-screen w-full mx-auto object-cover clip-path-both" src="bendis-assets/images/red-image.png" alt="">
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section class="md:pb-24 lg:pb-64 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <nav class="relative py-8 px-4 xl:px-10 bg-blue-800">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <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:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-8 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block py-3 px-8 text-sm text-white hover:text-blue-50 uppercase font-semibold border-2 border-white" href="#">Sign up</a></div>
    </div>
  </nav>
  <div class="pt-12 pb-32 md:pb-32 bg-blue-800">
    <div class="container px-4 mx-auto text-center">
      <div class="relative max-w-4xl mx-auto mt-20">
        <div class="relative z-10 mb-20">
          <span class="text-lg text-white font-semibold uppercase">Develop your skill</span>
          <h2 class="mt-8 mb-8 text-white text-4xl lg:text-6xl font-bold uppercase">Take care of your performance every day.</h2>
          <a class="inline-block w-full md:w-auto mb-2 md:mb-0 py-5 px-8 mr-6 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Get started free</a><a class="inline-block w-full md:w-auto py-5 px-8 text-sm text-white font-bold uppercase border border-white hover:border-gray-50 transition duration-200" href="#">Request demo</a>
        </div>
        <a class="relative z-10 flex justify-center items-center text-center text-white hover:text-blue-100" href="#">
          <span>Watch</span>
          <span class="px-2">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22.2769 16.6154L12.1231 22.4615C11.9015 22.72 11.5138 22.7569 11.2554 22.5354C11.0523 22.3692 10.9846 22.0923 11.0769 21.8462V10.1538C10.9538 9.83385 11.1138 9.48308 11.4338 9.36C11.68 9.26769 11.9569 9.33539 12.1231 9.53846L22.2769 15.3846C22.6154 15.5385 22.7631 15.9446 22.6092 16.2831C22.5415 16.4308 22.4246 16.5477 22.2769 16.6154ZM32 16C32 24.8369 24.8369 32 16 32C7.16308 32 0 24.8369 0 16C0 7.16308 7.16308 0 16 0C24.8369 0 32 7.16308 32 16ZM29.5385 16C29.5385 8.52308 23.4769 2.46154 16 2.46154C8.52308 2.46154 2.46154 8.52308 2.46154 16C2.46154 23.4769 8.52308 29.5385 16 29.5385C23.4769 29.5385 29.5385 23.4769 29.5385 16Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>demo</span>
        </a>
        <img class="absolute inset-0 h-80 lg:h-144 w-80 lg:w-144 mx-auto object-cover transform rotate-45" src="bendis-assets/images/red-image.png" alt="">
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-16 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="my-5 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-20">
      <div class="w-full lg:w-2/3 px-4 mb-20">
        <div class="relative flex h-96 mb-8 overflow-hidden">
          <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
        </div>
        <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Quick problem-solving contact</h2>
        <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        <a class="text-sm uppercase font-bold text-blue-800 hover:underline" href="#">
          <span>Read more</span>
          <span class="inline-block ml-2">
            <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
            </svg>
          </span>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
          </div>
          <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Donec nec cursus nulla, quis aliquet ipsum</h2>
          <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1530389912609-9a007b3c38a4?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
          </div>
          <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Fusce at condimentum diam</h2>
          <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
          </div>
          <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">Curabitur tortor erat, blandit sed tellus sed</h2>
          <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20">
        <a class="hover:underline" href="#">
          <div class="relative flex h-96 mb-8 overflow-hidden">
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080464185-b0ebf9ede5cb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 -mr-1 text-xs font-semibold text-gray-500 bg-blue-50 clip-path-left-small">10 JUN 2021 | 19:40</span>
          </div>
          <h2 class="mb-4 text-2xl font-semibold font-heading text-blue-800">In suscipit tellus convallis scelerisque consequat</h2>
          <p class="mb-3 text-base text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </a>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 bg-blue-800" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-16 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-8 mb-6 text-4xl font-bold font-heading text-white">Take quick action that increases your brand's regular profit.</h2>
      <p class="mb-8 text-xl text-gray-50">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="max-w-max mx-auto flex flex-row">
        <button x-ref="tab1" x-on:click="tab = $refs.tab1.textContent" class="px-8 py-2 leading-8 bg-white font-semibold text-blue-800" :class="{ 'bg-white font-semibold text-blue-800': tab == $refs.tab1.textContent, 'bg-blue-900 text-blue-100 hover:text-blue-200': tab != $refs.tab1.textContent }">Active demo</button>
        <button x-ref="tab2" x-on:click="tab = $refs.tab2.textContent" class="px-8 py-2 leading-8 bg-blue-900 text-blue-100 hover:text-blue-200" :class="{ 'bg-white font-semibold text-blue-800': tab == $refs.tab2.textContent, 'bg-blue-900 text-blue-100 hover:text-blue-200': tab != $refs.tab2.textContent }">Normal Tab</button>
      </div>
    </div>
    <div class="flex flex-wrap items-center -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-900 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-700 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Starter</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$34</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-white uppercase font-bold leading-normal border-2 border-white hover:bg-blue-800 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-700 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-900 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Pro</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$65</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-900 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-700 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Premium</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$99</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-white uppercase font-bold leading-normal border-2 border-white hover:bg-blue-800 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="p-16 bg-white">
      <div class="flex flex-wrap items-center -mx-10 -mb-10">
        <div class="w-full md:w-1/2 lg:w-1/4 px-10 mb-10 text-center">
          <span>
            <svg class="mx-auto mb-6 text-blue-800 h-8 w-8" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M16 -0.0533447L0 15.7333L16 31.52L32 15.7333L16 -0.0533447ZM3.7708 15.7333L16 3.66718L21.172 8.77022L19.2864 10.6307L16 7.38888L7.5428 15.7333L10.828 18.9759L8.9424 20.8364L3.7708 15.7333ZM20.6876 15.7333L16 20.3596L11.3136 15.7333L16 11.1094L20.6876 15.7333ZM10.828 22.6968L12.7136 20.8364L16 24.0778L24.4584 15.7333L21.172 12.4907L23.0576 10.6303L28.2292 15.7333L16 27.7995L10.828 22.6968Z"></path>
            </svg>
          </span>
          <h3 class="mb-3 text-3xl font-bold font-heading text-blue-800">42 732</h3>
          <p class="text-sm uppercase text-gray-500">Dolor sit amet consectutar</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-10 mb-10 text-center">
          <span>
            <svg class="mx-auto mb-6 text-blue-800 h-8 w-8" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.3332 0V2.64111C24.0732 3.30415 29.3332 8.93644 29.3332 15.7867C29.3332 22.6357 24.0732 28.2676 17.3332 28.9306V31.5733C25.5456 30.9016 32 24.0952 32 15.7867C32 7.47696 25.5456 0.673301 17.3332 0Z"></path>
              <path d="M14.6668 28.9306C7.9296 28.2676 2.6668 22.6357 2.6668 15.7867C2.6668 8.93683 7.9296 3.30415 14.6668 2.64111V0C6.456 0.673301 0 7.47696 0 15.7867C0 24.0952 6.456 30.9016 14.6668 31.5733V28.9306Z"></path>
              <path d="M8.12 14.4712C8.7552 10.7389 12.0364 7.89333 16 7.89333C19.9636 7.89333 23.2448 10.7389 23.88 14.4712H26.574C25.918 9.28098 21.4404 5.26208 16 5.26208C10.5624 5.26208 6.0832 9.28098 5.4256 14.4712H8.12Z"></path>
              <path d="M23.88 17.1021C23.2448 20.8329 19.9636 23.68 16 23.68C12.0364 23.68 8.75519 20.8329 8.11999 17.1021H5.42599C6.08319 22.2923 10.5624 26.3112 16 26.3112C21.4404 26.3112 25.918 22.2923 26.5744 17.1021H23.88Z"></path>
              <path d="M16 10.5246C13.0548 10.5246 10.6668 12.8807 10.6668 15.7867C10.6668 18.6926 13.0548 21.0488 16 21.0488C18.9464 21.0488 21.3332 18.6926 21.3332 15.7867C21.3332 12.8807 18.9464 10.5246 16 10.5246ZM16 18.4179C14.5272 18.4179 13.3332 17.2398 13.3332 15.7867C13.3332 14.3335 14.5272 13.1554 16 13.1554C17.474 13.1554 18.6668 14.3335 18.6668 15.7867C18.6668 17.2398 17.474 18.4179 16 18.4179Z"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-3xl font-bold font-heading text-blue-800">176 441</h3>
          <p class="text-sm uppercase text-gray-500">Dolor sit amet consectutar</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-10 mb-10 text-center">
          <span>
            <svg class="mx-auto mb-6 text-blue-800 h-8 w-8" viewBox="0 0 30 31" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 0.404449H0.333336V15.2667C0.333336 23.4743 6.90034 30.1289 15 30.1289H29.6667V15.2667C29.6667 7.05901 23.0997 0.404449 15 0.404449ZM27.2221 27.6517H15C8.26104 27.6517 2.7779 22.0955 2.7779 15.2667V2.88161H15C21.739 2.88161 27.2221 8.43822 27.2221 15.2667V27.6517Z"></path>
              <path d="M15 5.3584C9.60011 5.3584 5.22211 9.79477 5.22211 15.2667C5.22211 20.7386 9.60011 25.1749 15 25.1749C20.3999 25.1749 24.7779 20.7386 24.7779 15.2667C24.7779 9.79477 20.3999 5.3584 15 5.3584ZM15 22.6978C10.9491 22.6978 7.66668 19.3705 7.66668 15.2667C7.66668 11.1628 10.9491 7.83556 15 7.83556C19.0498 7.83556 22.3333 11.1628 22.3333 15.2667C22.3333 19.3705 19.0498 22.6978 15 22.6978Z"></path>
              <path d="M15 10.3127C12.3002 10.3127 10.1112 12.5309 10.1112 15.2667C10.1112 18.0024 12.3002 20.2206 15 20.2206C17.6998 20.2206 19.8888 18.0024 19.8888 15.2667C19.8888 12.5309 17.6998 10.3127 15 10.3127ZM15 17.7438C13.6499 17.7438 12.5554 16.6347 12.5554 15.2667C12.5554 13.8986 13.6499 12.7895 15 12.7895C16.3501 12.7895 17.4446 13.8986 17.4446 15.2667C17.4446 16.6347 16.3501 17.7438 15 17.7438Z"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-3xl font-bold font-heading text-blue-800">78 211</h3>
          <p class="text-sm uppercase text-gray-500">Dolor sit amet consectutar</p>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-10 mb-10 text-center">
          <span>
            <svg class="mx-auto mb-6 text-blue-800 h-8 w-8" viewBox="0 0 29 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M27.5394 1.16466C25.5171 -0.955363 20.1089 1.11443 14.3336 5.83846C8.55651 1.11443 3.14832 -0.954263 1.12707 1.16466C-0.896976 3.28468 1.07912 8.9492 5.58677 15.0002C1.08017 21.0515 -0.896976 26.7171 1.12707 28.8357C3.14937 30.9553 8.55896 28.8848 14.334 24.1619C20.1089 28.8848 25.5175 30.9553 27.5398 28.8357C29.5638 26.7157 27.5867 21.0501 23.0783 15.0002C27.5877 8.9492 29.5638 3.28358 27.5394 1.16466ZM25.2585 2.77649C25.6862 2.77649 25.8671 2.86962 25.8899 2.89346C26.0075 3.01629 26.3116 4.40336 24.8493 7.59439C24.0562 9.32539 22.9338 11.1818 21.5667 13.062C20.7606 12.0852 19.8951 11.1088 18.9718 10.1419C18.0499 9.17763 17.1175 8.27051 16.1869 7.42646C20.0302 4.36413 23.4077 2.77649 25.2585 2.77649ZM20.0746 14.9994C19.2199 16.0507 18.3036 17.1015 17.3205 18.1314C16.3178 19.1834 15.3171 20.1404 14.3347 21.0145C13.3309 20.1206 12.3281 19.1607 11.3457 18.1314C10.3415 17.0802 9.42696 16.0316 8.59256 15.0031C9.44586 13.9501 10.3611 12.9011 11.3432 11.8715C12.3484 10.8199 13.3487 9.86035 14.3312 8.98623C15.3364 9.88161 16.3395 10.8415 17.3212 11.8704C18.3257 12.9223 19.2406 13.9691 20.0746 14.9994ZM2.66532 3.55454C2.66532 3.10832 2.75422 2.91729 2.77662 2.89346C2.89282 2.77173 4.21722 2.45163 7.26396 3.98463C8.91631 4.81548 10.687 5.99136 12.4832 7.42243C11.5508 8.26758 10.6166 9.17469 9.69366 10.1416C8.77281 11.1074 7.90691 12.0841 7.10261 13.0594C4.18082 9.03133 2.66532 5.49307 2.66532 3.55454ZM3.40802 27.2242C2.98067 27.2242 2.79867 27.13 2.77662 27.1076C2.65937 26.9844 2.35487 25.5974 3.81822 22.4063C4.61132 20.6757 5.73272 18.8193 7.09981 16.9391C7.90656 17.9155 8.77246 18.8934 9.69541 19.8602C10.6163 20.8264 11.5483 21.732 12.4807 22.5761C8.63596 25.6366 5.25847 27.2242 3.40802 27.2242ZM26.0015 26.4458C26.0015 26.8928 25.9116 27.0834 25.8899 27.1062C25.7726 27.2294 24.4486 27.5491 21.4025 26.0161C19.7516 25.1852 17.9796 24.0094 16.1848 22.5772C17.1158 21.7328 18.0492 20.826 18.9707 19.8599C19.893 18.8941 20.7585 17.9177 21.5646 16.9413C24.486 20.969 26.0015 24.5058 26.0015 26.4458Z"></path>
            </svg>
          </span>
          <h3 class="mb-4 text-3xl font-bold font-heading text-blue-800">4 764 571</h3>
          <p class="text-sm uppercase text-gray-500">Dolor sit amet consectutar</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-blue-50" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-8">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">New feature</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="max-w-max mb-6 md:mb-14 mx-auto text-center flex flex-wrap justify-around flex-row">
      <button x-ref="tab1" x-on:click="tab = $refs.tab1.textContent" class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 leading-8 bg-blue-800 text-white font-semibold" :class="{ 'bg-blue-800 text-white font-semibold': tab == $refs.tab1.textContent, 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium': tab != $refs.tab1.textContent }">Normal Tab 1</button>
      <button x-ref="tab2" x-on:click="tab = $refs.tab2.textContent" class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 leading-8 bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium" :class="{ 'bg-blue-800 text-white font-semibold': tab == $refs.tab2.textContent, 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium': tab != $refs.tab2.textContent }">Normal tab 2</button>
      <button x-ref="tab3" x-on:click="tab = $refs.tab3.textContent" class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 leading-8 bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium" :class="{ 'bg-blue-800 text-white font-semibold': tab == $refs.tab3.textContent, 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium': tab != $refs.tab3.textContent }">Normal Tab 3</button>
      <button x-ref="tab4" x-on:click="tab = $refs.tab4.textContent" class="inline-block w-full md:w-auto py-2 px-8 leading-8 bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium" :class="{ 'bg-blue-800 text-white font-semibold': tab == $refs.tab4.textContent, 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium': tab != $refs.tab4.textContent }">Normal Tab 4</button>
    </div>
    <div class="max-w-3xl mx-auto">
      <ul>
        <li class="px-10 py-8 bg-white" :xclass="{ 'bg-blue-100': accordion, 'bg-white': !accordion }" x-data="{ accordion: false }">
          <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700" :class="{ 'text-blue-800 hover:text-blue-700': !accordion, 'text-blue-500': accordion }" x-on:click="accordion = !accordion">
            <span class="font-heading" :xclass="{ 'text-base': !accordion, 'text-lg font-semibold': accordion }">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0 w-4 h-4" :class="{ 'text-blue-500': !accordion, 'text-blue-800': accordion }" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </li>
        <li class="px-10 py-8 bg-white" :class="{ 'bg-blue-100': accordion, 'bg-white': !accordion }" x-data="{ accordion: false }">
            <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700" :class="{ 'text-blue-800 hover:text-blue-700': !accordion, 'text-blue-500': accordion }" x-on:click="accordion = !accordion">
              <span class="font-heading" :class="{ 'text-base': !accordion, 'text-lg font-semibold': accordion }">Donec sed leo sit amet ante ornare laoreet in quis est?</span>
              <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                  <svg class="flex-shrink-0 w-4 h-4" :class="{ 'text-blue-500': !accordion, 'text-blue-800': accordion }" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
                  </svg>
              </span>
            </button>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
            </div>
          </li>
          <li class="px-10 py-8 bg-white" :class="{ 'bg-blue-100': accordion, 'bg-white': !accordion }" x-data="{ accordion: false }">
            <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700" :class="{ 'text-blue-800 hover:text-blue-700': !accordion, 'text-blue-500': accordion }" x-on:click="accordion = !accordion">
              <span class="font-heading" :class="{ 'text-base': !accordion, 'text-lg font-semibold': accordion }">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
              <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                  <svg class="flex-shrink-0 w-4 h-4" :class="{ 'text-blue-500': !accordion, 'text-blue-800': accordion }" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
                  </svg>
              </span>
            </button>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
            </div>
          </li>
          <li class="px-10 py-8 bg-white" :class="{ 'bg-blue-100': accordion, 'bg-white': !accordion }" x-data="{ accordion: false }">
            <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700" :class="{ 'text-blue-800 hover:text-blue-700': !accordion, 'text-blue-500': accordion }" x-on:click="accordion = !accordion">
              <span class="font-heading" :class="{ 'text-base': !accordion, 'text-lg font-semibold': accordion }">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
              <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                  <svg class="flex-shrink-0 w-4 h-4" :class="{ 'text-blue-500': !accordion, 'text-blue-800': accordion }" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
                  </svg>
              </span>
            </button>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
            </div>
          </li>
          <li class="px-10 py-8 bg-white" :class="{ 'bg-blue-100': accordion, 'bg-white': !accordion }" x-data="{ accordion: false }">
            <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700" :class="{ 'text-blue-800 hover:text-blue-700': !accordion, 'text-blue-500': accordion }" x-on:click="accordion = !accordion">
              <span class="font-heading" :class="{ 'text-base': !accordion, 'text-lg font-semibold': accordion }">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
              <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                  <svg class="flex-shrink-0 w-4 h-4" :class="{ 'text-blue-500': !accordion, 'text-blue-800': accordion }" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
                  </svg>
              </span>
            </button>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="mt-4 pr-8 text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
            </div>
          </li>
      </ul>
    </div>
  </div>
</section>

<section class="py-8 px-4 lg:px-10 bg-blue-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="flex justify-between items-center">
      <a class="text-xl text-white font-semibold" href="#">
        <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
          <svg class="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <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:w-auto lg:space-x-10">
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
        <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
      </ul>
      <div class="hidden lg:block"><a class="inline-block px-4 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block px-4 text-white hover:text-blue-50 font-semibold" href="#">Sign up</a></div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-2 py-4 text-center text-blue-800 font-semibold" href="#">Sign in</a><a class="block py-4 text-center text-blue-800 leading-normal uppercase border-2 border-blue-800 hover:bg-blue-50 font-semibold" href="#">Sign Up</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-blue-400">
          <span>© 2021 All rights reserved © Wireframes Corporation 2021</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<div class="fixed bottom-0 inset-x-0 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto mb-8">
    <div class="py-10 px-16 bg-blue-900">
      <h3 class="mb-2 text-2xl font-bold text-white">Cookie Policy</h3>
      <p class="mb-4 text-sm text-blue-200 leading-loose">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>
      <a x-on:click.prevent="open=false" class="inline-block px-8 py-5 mr-2 text-sm uppercase bg-yellow-500 hover:bg-yellow-400 text-blue-900 font-bold border-2 border-transparent" href="#">Accept</a>
      <a x-on:click.prevent="open=false" class="inline-block px-8 py-5 text-sm uppercase leading-normal bg-transparent text-white font-bold border-2 border-white hover:text-blue-100" href="#">Decline</a>
    </div>
  </div>
</div>

<section class="relative py-24 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto text-center">
      <span class="text-blue-400 font-semibold uppercase tracking-widest">New feature</span>
      <h2 class="mt-8 mb-6 text-4xl lg:text-5xl font-bold text-blue-800">Take quick action that increases your brand's regular profit.</h2>
      <p class="max-w-3xl mx-auto mb-10 text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <a class="inline-block w-full md:w-auto mb-4 md:mr-6 py-5 px-8 text-sm font-bold uppercase border-2 border-transparent bg-yellow-500 hover:bg-yellow-400 text-blue-800 transition duration-200" href="#">Activate Demo</a><a class="inline-block w-full md:w-auto mb-2 py-5 px-8 text-sm text-blue-800 font-bold uppercase border-2 border-blue-800 hover:border-blue-700" href="#">Share with friends</a>
    </div>
  </div>
</section>

<section class="pb-24">
  <div class="h-64 lg:h-144">
    <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
  </div>
  <div class="relative container px-4 mx-auto -mt-24">
    <div class="max-w-5xl px-4 pt-12 lg:pt-20 mx-auto bg-white">
      <div class="max-w-2xl mb-12 mx-auto text-center">
        <div class="flex items-center justify-center mb-6 text-xs text-blue-500 font-semibold uppercase">
          <a href="#">Home</a>
          <span class="inline-block mx-2">
            <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
            </svg>
          </span>
          <a href="#">Blog</a>
          <span class="inline-block mx-2">
            <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
            </svg>
          </span>
          <a href="#">Article</a>
        </div>
        <h2 class="mb-6 text-5xl text-blue-800 font-bold font-heading">Lorem ipsum dolor sit amet consectutar</h2>
        <div class="flex items-center justify-center">
          <div class="mr-6">
            <img class="w-14 h-14 object-cover" src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <div class="text-left">
            <h3 class="mb-2 text-lg text-gray-500 font-semibold font-heading">Sara Sampton</h3>
            <p class="text-blue-500 text-xs">10 Jun 2021 | 19:40</p>
          </div>
        </div>
      </div>
      <div class="max-w-2xl mx-auto -mb-6">
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque eveniet est laborum exercitationem!</p>
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur aperiam ipsum vel facilis, quibusdam velit. Et, ipsam repellat? Possimus id exercitationem aut voluptatum cumque, nemo quaerat officiis accusamus.</p>
        <p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor illo ipsa magni dolore doloribus? Velit laboriosam est nostrum ducimus, amet enim sed quidem excepturi?</p>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-blue-800">
  <div class="container px-4 mx-auto">
    <div class="bg-blue-50 p-8 lg:px-16 lg:py-20">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-3/5 px-4 mb-6 md:mb-0">
          <h3 class="mb-2 text-2xl font-bold font-heading text-blue-800">Sign up to our newsletter</h3>
          <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="w-full md:w-2/5 px-4">
          <form action="#">
            <div class="flex flex-wrap lg:flex-nowrap">
              <input class="w-full mb-4 lg:mb-0 py-5 pl-4 bg-white text-sm text-gray-500 bg-transparent border border-blue-300" type="text" placeholder="Type your e-mail">
              <button class="w-full lg:w-auto py-5 px-6 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign&nbsp;up</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-blue-800">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-5 mb-12 md:mb-20">
      <div class="w-full lg:w-1/3 px-5 mb-12 lg:mb-0">
        <a class="inline-block mb-6 text-white text-lg font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
        </a>
        <p class="mb-6 max-w-sm text-base text-blue-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="inline-flex items-center w-12 h-12 mr-4 bg-blue-900" href="#">
            <svg class="mx-auto text-yellow-500 h-4 w-4" viewBox="0 0 10 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63482 17.7272V9.766H9.35818L9.76676 6.66243H6.63482V4.68126C6.63482 3.78299 6.88809 3.17083 8.20285 3.17083L9.877 3.17015V0.394215C9.58748 0.357312 8.59366 0.272705 7.43696 0.272705C5.02158 0.272705 3.36797 1.71878 3.36797 4.37389V6.66243H0.636353V9.766H3.36797V17.7272H6.63482Z"></path>
            </svg>
          </a>
          <a class="inline-flex items-center w-12 h-12 mr-4 bg-blue-900" href="#">
            <svg class="mx-auto text-yellow-500 h-4 w-4" viewBox="0 0 19 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8182 2.14598C18.1356 2.44844 17.4032 2.65356 16.6337 2.74513C17.4194 2.27462 18.0209 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.207 0.363647 13.1118 0.363647C11.0108 0.363647 9.30725 2.06719 9.30725 4.16707C9.30725 4.46489 9.34086 4.75577 9.40577 5.03392C6.24437 4.87513 3.44107 3.3605 1.56486 1.05895C1.23689 1.61986 1.05031 2.27344 1.05031 2.9711C1.05031 4.29107 1.72246 5.45574 2.74228 6.13713C2.1188 6.11628 1.5324 5.94477 1.01904 5.65968V5.70719C1.01904 7.5498 2.33089 9.08762 4.07034 9.43762C3.75164 9.52337 3.41558 9.57089 3.06792 9.57089C2.82225 9.57089 2.58468 9.54656 2.35174 9.50019C2.83613 11.0125 4.24071 12.1123 5.90486 12.1424C4.60343 13.1623 2.96246 13.7683 1.18013 13.7683C0.873039 13.7683 0.570554 13.7498 0.272736 13.7162C1.95658 14.7974 3.95564 15.4279 6.10419 15.4279C13.1026 15.4279 16.9281 9.63116 16.9281 4.60398L16.9153 4.11147C17.6628 3.57834 18.3094 2.90853 18.8182 2.14598Z"></path>
            </svg>
          </a>
          <a class="inline-flex items-center w-12 h-12 mr-4 bg-blue-900" href="#">
            <svg class="mx-auto text-yellow-500 h-4 w-4" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 0C4.0275 0 0 4.13211 0 9.22838C0 13.3065 2.5785 16.7648 6.15375 17.9841C6.60375 18.0709 6.76875 17.7853 6.76875 17.5403C6.76875 17.3212 6.76125 16.7405 6.7575 15.9712C4.254 16.5277 3.726 14.7332 3.726 14.7332C3.3165 13.6681 2.72475 13.3832 2.72475 13.3832C1.9095 12.8111 2.78775 12.8229 2.78775 12.8229C3.6915 12.887 4.16625 13.7737 4.16625 13.7737C4.96875 15.1847 6.273 14.777 6.7875 14.5414C6.8685 13.9443 7.10025 13.5381 7.3575 13.3073C5.35875 13.0764 3.258 12.2829 3.258 8.74709C3.258 7.73988 3.60675 6.91659 4.18425 6.27095C4.083 6.03774 3.77925 5.0994 4.263 3.82846C4.263 3.82846 5.01675 3.58116 6.738 4.77462C7.458 4.56958 8.223 4.46785 8.988 4.46315C9.753 4.46785 10.518 4.56958 11.238 4.77462C12.948 3.58116 13.7017 3.82846 13.7017 3.82846C14.1855 5.0994 13.8818 6.03774 13.7917 6.27095C14.3655 6.91659 14.7142 7.73988 14.7142 8.74709C14.7142 12.2923 12.6105 13.0725 10.608 13.2995C10.923 13.5765 11.2155 14.1423 11.2155 15.0071C11.2155 16.242 11.2043 17.2344 11.2043 17.5341C11.2043 17.7759 11.3617 18.0647 11.823 17.9723C15.4237 16.7609 18 13.3002 18 9.22838C18 4.13211 13.9703 0 9 0Z"></path>
            </svg>
          </a>
          <a class="inline-flex items-center w-12 h-12 mr-4 bg-blue-900" href="#">
            <svg class="mx-auto text-yellow-500 h-4 w-4" viewBox="0 0 10 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63482 17.7272V9.766H9.35818L9.76676 6.66243H6.63482V4.68126C6.63482 3.78299 6.88809 3.17083 8.20285 3.17083L9.877 3.17015V0.394215C9.58748 0.357312 8.59366 0.272705 7.43696 0.272705C5.02158 0.272705 3.36797 1.71878 3.36797 4.37389V6.66243H0.636353V9.766H3.36797V17.7272H6.63482Z"></path>
            </svg>
          </a>
          <a class="inline-flex items-center w-12 h-12 bg-blue-900" href="#">
            <svg class="mx-auto text-yellow-500 h-4 w-4" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-5">
        <div class="flex flex-wrap justify-between -mx-4">
          <div class="w-1/2 lg:w-1/4 px-4 mb-8 lg:mb-0">
            <h3 class="mb-4 text-base font-bold text-blue-300">Company</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">About Us</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Careers</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Press</a></li>
              <li><a class="text-white hover:text-blue-200" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4 mb-8 lg:mb-0">
            <h3 class="mb-4 text-base font-bold text-blue-300">Pages</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Login</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Register</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Add list</a></li>
              <li><a class="text-white hover:text-blue-200" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4 mb-8 lg:mb-0">
            <h3 class="mb-4 text-base font-bold text-blue-300">Legal</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Terms</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">About Us</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Team</a></li>
              <li><a class="text-white hover:text-blue-200" href="#">Privacy</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4">
            <h3 class="mb-4 text-base font-bold text-blue-300">Resources</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Blog</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Service</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Product</a></li>
              <li><a class="text-white hover:text-blue-200" href="#">Pricing</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <p class="text-center text-sm text-blue-300 pt-8 px-4 border-t border-blue-500">All rights reserved © Wireframes Corporation 2021</p>
  </div>
</section>

<section class="py-24 bg-blue-800">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-px">
      <div class="w-full lg:w-1/2 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/2 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1553949345-eb786bb3f7ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1552844657-1d8b11fad02e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1003&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1593776805861-74972b600999?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-px">
        <img class="w-full h-72 object-cover" src="https://images.unsplash.com/photo-1551043077-b55224769403?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

<section class="relative pt-24 pb-24 lg:pb-32 bg-blue-50 overflow-hidden">
  <div class="absolute inset-0 mt-10">
    <svg class="mx-auto" width="798" height="798" viewBox="0 0 798 798" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.15">
        <path d="M797.81 796.481L698.701 697.372C729.839 655.792 748.256 604.148 748.256 548.328C748.256 442.384 681.803 351.629 588.58 315.365L797.81 1.51892C798 1.13919 798 0.759458 797.81 0.569593C797.81 0.189864 797.43 0 797.051 0H0.949322C0.569593 0 0.189864 0.189864 0.189864 0.569593C0.189864 0.949322 0 1.13919 0.189864 1.51892L178.852 269.607L0.189864 448.08C0 448.27 0 448.46 0 448.839C0 449.219 0 449.409 0.189864 449.599C0.379729 449.789 0.569593 449.789 0.949322 449.789C1.32905 449.789 1.51892 449.789 1.70878 449.599L179.991 271.316L281.949 424.347C260.874 460.801 248.722 503.141 248.722 548.328C248.722 685.98 360.742 798 498.584 798C579.656 798 651.994 759.078 697.562 698.891L796.291 797.62C796.481 797.81 796.671 797.81 797.051 797.81C797.43 797.81 797.62 797.81 797.81 797.62C798 797.43 798 797.241 798 796.861C798 796.481 798 796.671 797.81 796.481ZM181.32 269.797L250.431 200.687C250.621 200.497 250.621 200.307 250.621 199.927C250.621 199.547 250.621 199.358 250.431 199.168C250.051 198.788 249.482 198.788 249.102 199.168L180.181 268.089L2.6581 1.89864H795.342L586.871 314.605C559.341 304.163 529.722 298.467 498.774 298.467C406.879 298.467 326.567 348.211 283.088 422.258L181.32 269.797ZM585.732 316.314L398.905 596.364L284.037 424.157C326.946 350.3 407.069 300.555 498.394 300.555C529.152 300.365 558.581 306.061 585.732 316.314ZM498.584 796.101C361.882 796.101 250.621 684.841 250.621 548.328C250.621 503.9 262.393 462.13 283.088 425.866L398.146 598.453C398.335 598.642 398.525 598.832 398.905 598.832C399.285 598.832 399.475 598.642 399.665 598.453L587.44 317.074C680.284 352.958 746.357 443.143 746.357 548.518C746.357 603.769 728.13 655.032 697.372 696.233L598.642 597.503C598.263 597.124 597.693 597.124 597.313 597.503C597.123 597.693 597.123 597.883 597.123 598.263C597.123 598.642 597.123 598.832 597.313 599.022L696.233 697.941C651.045 757.369 579.276 796.101 498.584 796.101Z" fill="#A0CDFA"></path>
        <path d="M175.055 572.251H0.949322C0.379729 572.251 0 572.631 0 573.201V747.306C0 747.876 0.379729 748.255 0.949322 748.255H175.055C175.625 748.255 176.004 747.876 176.004 747.306V573.201C176.004 572.631 175.625 572.251 175.055 572.251ZM174.106 746.357H1.89864V574.15H174.106V746.357Z" fill="#A0CDFA"></path>
        <path d="M460.612 225.749C460.801 225.939 460.991 225.939 461.181 225.939C461.371 225.939 461.561 225.939 461.751 225.749L573.771 151.132C573.961 150.942 574.15 150.752 574.15 150.373C574.15 149.993 573.961 149.803 573.771 149.613L461.751 74.9964C461.371 74.8065 460.991 74.8065 460.612 74.9964L348.592 149.613C348.402 149.803 348.212 149.993 348.212 150.373C348.212 150.752 348.402 150.942 348.592 151.132L460.612 225.749ZM461.181 76.7052L571.492 150.183L461.181 223.66L350.87 150.183L461.181 76.7052Z" fill="#A0CDFA"></path>
      </g>
    </svg>
  </div>
  <div class="container px-5 mx-auto">
    <div class="max-w-3xl mx-auto mb-14 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-blue-800">Take quick action that increases your brand's regular profit.</h2>
      <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="flex flex-wrap -mx-8 -mb-8 lg:-mb-20">
      <div class="w-full lg:w-1/2 px-8 mb-8 lg:mb-20">
        <div class="relative p-6 lg:p-12 bg-white">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/3 px-4 mb-8 md:mb-0">
              <h3 class="mb-2 text-3xl font-semibold font-heading text-blue-800">Peter Prada</h3>
              <p class="mb-2 text-sm uppercase text-blue-500">CEO &amp; Founder</p>
              <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
            <div class="w-full md:w-1/3 px-4">
              <img class="lg:absolute top-0 right-0 lg:mt-8 -mr-8 w-full md:w-64 h-64 clip-path-left object-cover" src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=801&amp;q=80" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-8 mb-8 lg:mb-20">
        <div class="relative p-6 lg:p-12 bg-white">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/3 px-4 mb-8 md:mb-0">
              <h3 class="mb-2 text-3xl font-semibold font-heading text-blue-800">Tom Clarks</h3>
              <p class="mb-2 text-sm uppercase text-blue-500">General Director</p>
              <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
            <div class="w-full md:w-1/3 px-4">
              <img class="lg:absolute top-0 right-0 lg:mt-8 -mr-8 w-full md:w-64 h-64 clip-path-left object-cover" src="https://images.unsplash.com/photo-1607952529909-f8f14aff612d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-8 mb-8 lg:mb-20">
        <div class="relative p-6 lg:p-12 bg-white">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/3 px-4 mb-8 md:mb-0">
              <h3 class="mb-2 text-3xl font-semibold font-heading text-blue-800">Kathy Ramsey</h3>
              <p class="mb-2 text-sm uppercase text-blue-500">Product Manager</p>
              <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
            <div class="w-full md:w-1/3 px-4">
              <img class="lg:absolute top-0 right-0 lg:mt-8 -mr-8 w-full md:w-64 h-64 clip-path-left object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-8 mb-8 lg:mb-20">
        <div class="relative p-6 lg:p-12 bg-white">
          <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full md:w-2/3 px-4 mb-8 md:mb-0">
              <h3 class="mb-2 text-3xl font-semibold font-heading text-blue-800">Jack Bean</h3>
              <p class="mb-2 text-sm uppercase text-blue-500">Webdeveloper</p>
              <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
            </div>
            <div class="w-full md:w-1/3 px-4">
              <img class="lg:absolute top-0 right-0 lg:mt-8 -mr-8 w-full md:w-64 h-64 clip-path-left object-cover" src="https://images.unsplash.com/photo-1569779213435-ba3167dde7cc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="py-4">
          <img class="h-6 mx-auto" src="bendis-assets/logos/stripe-color.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>