UI Components – Basko Library

<section class="pb-12 md:pb-0 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="pt-24 md:pb-32 md:max-w-md">
          <h2 class="font-heading mb-4 text-6xl text-white tracking-tighter">Create a free account</h2>
          <p class="mb-14 text-xl text-white tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
          <form class="flex flex-wrap -m-2" action="#">
            <div class="w-full p-2">
              <label class="block">
                <input class="p-4 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none border border-gray-600 rounded-lg focus:border-gray-400 transition duration-200" id="signUpInput2-1" type="text" placeholder="First &amp; Last Name">
              </label>
            </div>
            <div class="w-full p-2">
              <label class="block">
                <input class="p-4 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none border border-gray-600 rounded-lg focus:border-gray-400 transition duration-200" id="signUpInput2-2" type="text" placeholder="Email Address">
              </label>
            </div>
            <div class="w-full p-2">
              <label class="block">
                <input class="p-4 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none border border-gray-600 rounded-lg focus:border-gray-400 transition duration-200" id="signUpInput2-3" type="password" placeholder="Password">
              </label>
            </div>
            <div class="w-full p-2">

<section class="pb-12 md:pb-0 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="pt-24 md:pb-32 md:max-w-md">
          <h2 class="font-heading mb-4 text-6xl text-white tracking-tighter">Welcome again</h2>
          <p class="mb-14 text-xl text-white tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
          <form class="flex flex-wrap -m-2" action="#">
            <div class="w-full p-2">
              <label class="block">
                <input class="p-4 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none border border-gray-600 focus:border-gray-400 rounded-lg transition duration-200" id="signInInput2-1" type="text" placeholder="Email Address">
              </label>
            </div>
            <div class="w-full p-2">
              <label class="relative block border border-gray-600 focus-within:border-gray-400 rounded-lg transition duration-200">
                <input class="p-4 md:pr-40 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none" id="signInInput2-2" type="password" placeholder="Password">
                <a class="md:absolute md:right-4 md:top-1/2 md:transform md:-translate-y-1/2 inline-block px-4 pb-4 md:p-0 text-white hover:text-gray-200 tracking-tight transition duration-200" href="#">Forgot Password?</a>
              </label>
            </div>
            <div class="w-full p-3">
              <div class="flex items-center">
                <input class="custom-checkbox2 opacity-0 absolute h-5 w-5" type="checkbox" name="confirm" value="yes">
                <div class="mr-2 border border-gray-500 rounded border-blue-400 w-5 h-5 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500">
                  <svg class="fill-current hidden w-2.5 h-2.5 text-blue-600 pointer-events-none" version="1.1" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">

<section class="py-24 lg:pt-32 lg:pb-36 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mb-16">
      <h2 class="font-heading text-6xl text-white tracking-tighter">Flexible pricing that scales with your business.</h2>
    </div>
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 lg:w-1/3 p-6">
        <div class="mb-8 p-10 bg-indigo-500 rounded-lg transform hover:-translate-y-2 transition duration-500">
          <h4 class="mb-6 text-xl text-white font-semibold tracking-tight">Solo</h4>
          <h3 class="mb-4 text-white">
            <span class="font-heading text-6xl md:text-7xl tracking-tighter">$9</span>
            <span class="text-3xl font-semibold" style="letter-spacing: -0.5px;">/mo</span>
          </h3>
          <p class="mb-8 text-xl text-white tracking-tight">Ideal for freelancers or students.</p>
          <a class="inline-block px-5 py-4 font-semibold tracking-tight bg-white hover:bg-gray-100 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
        </div>
        <ul>
          <li class="flex flex-wrap items-center mb-5">
            <div class="mr-2 inline-block">
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.16797 5.8335L4.5013 9.16683L12.8346 0.833496" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <span class="font-medium text-gray-200">Limited Features</span>

<section class="py-9 bg-gray-700 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -m-4">
      <div class="w-auto p-4">
        <div class="flex flex-wrap items-center -m-7">
          <div class="w-auto p-7">
            <a href="#">
              <img src="basko-assets/logos/basko-logo-light.png" alt="">
            </a>
          </div>
          <div class="w-auto p-7">
            <p class="text-sm text-white tracking-tight">© Copyright 2023 Basko</p>
          </div>
        </div>
      </div>
      <div class="w-auto p-4">
        <div class="flex flex-wrap items-center -m-4">
          <div class="w-auto p-4">
            <ul class="flex flex-wrap -m-4">
              <li class="p-4"><a class="text-sm text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">About</a></li>
              <li class="p-4"><a class="text-sm text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Services</a></li>
              <li class="p-4"><a class="text-sm text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Privacy Policy</a></li>
              <li class="p-4"><a class="text-sm text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Terms &amp; Conditions</a></li>
              <li class="p-4"><a class="text-sm text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Support</a></li>

<section class="py-24 lg:py-28 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto">
      <h2 class="font-heading mb-14 text-6xl text-white tracking-tighter">Let us give you a personal tour of the product.</h2>
      <form class="flex flex-wrap -m-3" action="#">
        <div class="w-full md:w-1/2 p-3">
          <label class="block">
            <input class="px-4 py-4 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none border border-gray-600 rounded-lg focus:border-gray-400 transition duration-200" id="contactInput2-1" type="text" placeholder="First Name">
          </label>
        </div>
        <div class="w-full md:w-1/2 p-3">
          <label class="block">
            <input class="px-4 py-4 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none border border-gray-600 rounded-lg focus:border-gray-400 transition duration-200" id="contactInput2-2" type="text" placeholder="Last Name">
          </label>
        </div>
        <div class="w-full md:w-1/2 p-3">
          <label class="block">
            <input class="px-4 py-4 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none border border-gray-600 rounded-lg focus:border-gray-400 transition duration-200" id="contactInput2-3" type="text" placeholder="Email Address">
          </label>
        </div>
        <div class="w-full md:w-1/2 p-3">
          <label class="block">
            <input class="px-4 py-4 w-full text-gray-600 tracking-tight bg-transparent placeholder-gray-600 outline-none border border-gray-600 rounded-lg focus:border-gray-400 transition duration-200" id="contactInput2-4" type="text" placeholder="Phone Number">
          </label>

<section class="py-24 lg:pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl text-center mx-auto mb-24">
      <h2 class="font-heading mb-4 text-6xl tracking-tighter">Frequently Asked Questions</h2>
      <p class="text-xl text-gray-600 tracking-tight">Still have doubts? Here’s everything we think you should know.</p>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <h4 class="mb-4 font-semibold tracking-tight">What integrations do you support?</h4>
        <p class="text-gray-600 tracking-tight">Our visual designer lets you quickly and of dragi and drop down your way to customapps for both keep desktop, mobile &amp; also tab for both of it over $14,000 in additional revenue week. We can support platforms integrated with checkout, billing, and invoicing.</p>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <h4 class="mb-4 font-semibold tracking-tight">What is the waiting period for my first payout?</h4>
        <p class="text-gray-600 tracking-tight">Our visual designer lets you quickly and of dragi and drop down your way to the customapps for both keep desktop, mobile &amp; also tab for both of it over $14,000 a in additional revenue week. We can support platforms integrated with checkout, billing, and invoicing in contries such as Brazil.</p>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <h4 class="mb-4 font-semibold tracking-tight">Can I withdraw my money anytime?</h4>
        <p class="text-gray-600 tracking-tight">Yes, Stripe allows you to opt for a payout whenever you want. You can also opt for a scheduled payout every month.</p>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <h4 class="mb-4 font-semibold tracking-tight">Do you support PO box addresses?</h4>
        <p class="text-gray-600 tracking-tight">Our visual designer lets you quickly and of dragi and drop down your way to the customapps for both keep desktop, mobile &amp; also tab for both of it over $14,000 a in additional revenue week.</p>
      </div>
    </div>

<section class="py-24 lg:py-32 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl text-center mx-auto mb-20">
      <h2 class="font-heading text-6xl text-white tracking-tighter">Boost your team's productivity with Basko's collaboration tools</h2>
    </div>
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-lg">
          <div class="flex flex-wrap -m-8">
            <div class="w-full p-8">
              <div class="flex flex-wrap -m-8">
                <div class="w-24 p-8">
                  <h3 class="font-heading text-7xl md:text-7xl text-gray-600 tracking-tighter">1</h3>
                </div>
                <div class="flex-1 p-8">
                  <div class="md:max-w-md">
                    <h3 class="mb-4 text-xl text-white font-semibold tracking-tight">Secured Payments</h3>
                    <p class="text-xl text-gray-400 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full p-8">
              <div class="flex flex-wrap -m-8">

<section class="bg-black overflow-hidden">
  <div class="flex flex-wrap -m-8 lg:-m-14">
    <div class="w-full md:w-5/12 p-8 lg:p-14">
      <div class="h-full overflow-hidden">
        <img class="w-full h-full object-cover transform hover:scale-105 transition duration-500" src="basko-assets/images/cta/bg2.jpg" alt="">
      </div>
    </div>
    <div class="flex-1 md:w-1/2 p-8 lg:p-14">
      <div class="flex flex-col justify-center h-full">
        <div class="md:max-w-xl pb-16 md:py-16 px-4">
          <span class="inline-block max-w-max mb-5 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">Try some freebie</span>
          <h2 class="font-heading mb-5 text-6xl text-white tracking-tighter">Ready to take your brand to the top?</h2>
          <p class="mb-20 text-xl text-gray-300 tracking-tight">Transform your knowledge into a thriving business with the best online course platform for creators everywhere we found to be successful.</p>
          <div class="flex flex-wrap -m-1.5 mb-5">
            <div class="w-auto p-1.5">
              <input class="block w-full px-5 py-4 text-white bg-black outline-none placeholder-gray-500 border border-gray-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" id="ctaInput2-1" type="text" placeholder="Enter your email address">
            </div>
            <div class="w-auto p-1.5"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
          </div>
          <p class="text-gray-500 tracking-tight">This website uses cookies and other tracking tools to provide you with the best experience.</p>
        </div>
      </div>
    </div>
  </div>

<section class="pt-24 pb-32 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-16 max-w-xl text-center mx-auto">
      <span class="inline-block mb-6 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">300+ tools available</span>
      <h2 class="font-heading mb-4 text-6xl tracking-tighter">Integrate it with your favourite tools</h2>
      <p class="text-xl tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
  </div>
  <div class="flex flex-nowrap justify-center -m-3 mb-3">
    <div class="flex-shrink-0 p-3 max-w-xs w-full">
      <div class="bg-white hover:bg-opacity-50 rounded-lg transition duration-500">
        <div class="flex flex-col items-center p-6">
          <img class="mb-3" src="basko-assets/logos/brands/dropbox.svg" alt="">
          <p class="font-bold text-lg tracking-tight">Dropbox</p>
        </div>
      </div>
    </div>
    <div class="flex-shrink-0 p-3 max-w-xs w-full">
      <div class="bg-white hover:bg-opacity-50 rounded-lg transition duration-500">
        <div class="flex flex-col items-center p-6">
          <img class="mb-3" src="basko-assets/logos/brands/shopify.svg" alt="">
          <p class="font-bold text-lg tracking-tight">Shopify</p>
        </div>
      </div>

<section class="relative py-24 lg:pb-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="relative max-w-max mx-auto transform hover:-translate-y-1 transition duration-500">
          <div class="absolute bottom-0 left-0 p-5">
            <a class="p-5 flex items-center bg-white hover:bg-gray-100 rounded-lg transition duration-200 focus:ring-4 focus:ring-indigo-300" href="#">
              <div class="inline-block mr-4">
                <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12.5 8.86602C13.1667 8.48112 13.1667 7.51887 12.5 7.13397L2 1.0718C1.33333 0.686897 0.5 1.16802 0.5 1.93782L0.5 14.0622C0.5 14.832 1.33333 15.3131 2 14.9282L12.5 8.86602Z" fill="#171A1F"></path>
                </svg>
              </div>
              <span class="mr-2 font-semibold tracking-tight">Watch Review</span>
              <div class="inline-block mr-2">
                <svg width="5" height="6" viewBox="0 0 5 6" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="3" r="2.5" fill="#B8C1CC"></circle></svg>
              </div>
              <span class="font-semibold tracking-tight">2:36</span>
            </a>
          </div>
          <img class="rounded-2xl transition duration-500" src="basko-assets/images/testimonials/review.jpg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-lg">

<section class="py-24 lg:pb-36 bg-indigo-500 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl text-center mx-auto mb-16">
      <h2 class="font-heading text-6xl text-white tracking-tighter">Millions of customers rely on Basko</h2>
    </div>
    <div class="flex flex-wrap justify-center -m-8 mb-9">
      <div class="w-auto p-8">
        <img src="basko-assets/images/brands/logo-white6.svg" alt="">
      </div>
      <div class="w-auto p-8">
        <img src="basko-assets/images/brands/logo-white5.svg" alt="">
      </div>
      <div class="w-auto p-8">
        <img src="basko-assets/images/brands/logo-white4.svg" alt="">
      </div>
      <div class="w-auto p-8">
        <img src="basko-assets/images/brands/logo-white3.svg" alt="">
      </div>
      <div class="w-auto p-8">
        <img src="basko-assets/images/brands/logo-white2.svg" alt="">
      </div>
      <div class="w-auto p-8">
        <img src="basko-assets/images/brands/logo-white.svg" alt="">
      </div>

<section class="bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto pr-2 lg:pr-14">
            <a href="#">
              <img src="basko-assets/logos/basko-logo-dark.png" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-8">
              <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Features</a></li>
              <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Pricing</a></li>
              <li class="font-medium hover:text-gray-900 tracking-tight"><a href="#">Automation</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-8">
              <li class="font-medium hover:text-gray-900 tracking-tight"><a href="#">Login</a></li>

<section class="py-24 lg:py-32 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="flex flex-col justify-between h-full md:max-w-xs">
          <div class="mb-12">
            <h2 class="font-heading mb-4 text-6xl tracking-tighter">News &amp; Insight</h2>
            <p class="text-xl tracking-tight">Get great news and insight from our expert team.</p>
          </div>
          <a class="flex items-center font-semibold hover:text-indigo-500 tracking-tight transition duration-200" href="#">
            <span class="mr-2.5">Read All News</span>
            <div class="inline-block">
              <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.95693 7.75693L15.5566 7.75693M15.5566 7.75693L15.5566 14.3566M15.5566 7.75693L7.07132 16.2422" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <a class="group block p-6 bg-white rounded-lg transform hover:-translate-y-2 transition duration-500" href="#">
          <img class="mb-6 rounded-lg w-full" src="basko-assets/images/blog/workflow.jpg" alt="">
          <h3 class="mb-6 text-3xl font-semibold tracking-tight group-hover:underline">Preparing your team for remote work</h3>
          <p class="font-medium">

<section class="py-24 lg:py-40 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="max-w-max mx-auto">
          <img class="transform hover:-translate-y-2 transition duration-500" src="basko-assets/images/features/transaction.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <div class="flex flex-wrap -m-6">
            <div class="w-auto p-6">
              <h3 class="mb-4 text-3xl font-semibold tracking-tighter" style="letter-spacing: -0.5px;">Secured Payments</h3>
              <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
            </div>
            <div class="w-auto p-6">
              <h3 class="mb-4 text-3xl font-semibold tracking-tighter" style="letter-spacing: -0.5px;">Individual Customer Profile</h3>
              <p class="tracking-tight">Use and re-use tons of responsive sections to create the perfect layout. Sections are organised into convenientmcategories.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<section class="py-24 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading mb-20 max-w-lg text-6xl text-white tracking-tighter leading-tight">Showcase some impressive numbers.</h2>
    <div class="flex flex-wrap -m-10">
      <div class="w-full md:w-1/2 lg:w-1/4 p-10">
        <div class="inline-block">
          <h3 class="font-heading mb-3 inline-block text-6xl md:text-7xl text-white tracking-tighter">55%</h3>
          <p class="text-gray-300 tracking-tight">A percentage number that suggests an increase in performance.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-10">
        <div class="inline-block">
          <h3 class="font-heading mb-3 inline-block text-6xl md:text-7xl text-white tracking-tighter">43%</h3>
          <p class="text-gray-300 tracking-tight">A percentage number that suggests an increase in performance.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-10">
        <div class="inline-block">
          <h3 class="font-heading mb-3 inline-block text-6xl md:text-7xl text-white tracking-tighter">96%</h3>
          <p class="text-gray-300 tracking-tight">A percentage number that suggests an increase in performance.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-10">
        <div class="inline-block">

<section class="py-24 lg:pt-28 lg:pb-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mb-16">
      <h2 class="font-heading mb-5 text-6xl tracking-tighter">Open Positions</h2>
      <p class="text-xl text-gray-600 tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
    <div class="flex flex-wrap">
      <div class="w-full">
        <a class="group block py-7 bg-white border-t border-b border-gray-200 transition duration-500" href="#">
          <div class="flex flex-wrap items-center justify-between -m-2">
            <div class="w-auto p-2">
              <h3 class="text-xl font-semibold tracking-tight group-hover:text-gray-600">VP of Sales</h3>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-1.5">
                <div class="w-auto p-1.5">
                  <button class="inline-block mx-auto px-4 py-2 text-gray-900 hover:text-gray-600 tracking-tight transition duration-200" href="#">New York</button>
                </div>
                <div class="w-auto p-1.5">
                  <button class="inline-block mx-auto px-4 py-2 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Check Details</button>
                </div>
              </div>
            </div>
          </div>

<section class="py-24 lg:pt-32 lg:pb-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl text-center mx-auto">
      <h2 class="font-heading mb-16 text-6xl tracking-tighter">Common Questions</h2>
    </div>
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap pb-12">
        <div class="w-full">
          <div class="cursor-pointer relative z-50 block p-8 bg-white border border-gray-300 hover:border-gray-400 rounded-xl transition duration-200" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
            <h3 class="text-xl font-semibold tracking-tight">Can I switch plans?</h3>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="mt-6 tracking-tight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            </div>
          </div>
        </div>
        <div class="w-full -mt-3">
          <div class="cursor-pointer relative z-40 block p-8 pt-11 bg-white border border-gray-300 hover:border-gray-400 rounded-xl transition duration-200" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
            <h3 class="text-xl font-semibold tracking-tight">Is there an education discount?</h3>
            <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                <p class="mt-6 tracking-tight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            </div>
          </div>
        </div>
        <div class="w-full -mt-3">

<section class="py-24 lg:py-32 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <a class="inline-block" href="#">
          <img src="basko-assets/logos/basko-logo-light.png" alt="">
        </a>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap justify-between -m-8">
          <div class="w-auto p-8">
            <h3 class="mb-9 text-white font-semibold tracking-tight">Help</h3>
            <ul>
              <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 font-medium tracking-tight transition duration-200" href="#">Features</a></li>
              <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 font-medium tracking-tight transition duration-200" href="#">Pricing</a></li>
              <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 font-medium tracking-tight transition duration-200" href="#">Afiliate Program</a></li>
              <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 font-medium tracking-tight transition duration-200" href="#">Press Kit</a></li>
            </ul>
          </div>
          <div class="w-auto p-8">
            <h3 class="mb-9 text-white font-semibold tracking-tight">Resources</h3>
            <ul>
              <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 font-medium tracking-tight transition duration-200" href="#">Features</a></li>
              <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 font-medium tracking-tight transition duration-200" href="#">Pricing</a></li>

<section class="py-24 lg:pb-28 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap xl:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <img class="mb-6" src="basko-assets/images/brands/quote.png" alt="">
          <h2 class="mb-6 text-3xl font-semibold" style="letter-spacing: -0.5px;">Now that Basko is here, we’ve tossed out all other templates, they just can’t compete.</h2>
          <h3 class="mb-1 text-xl font-semibold tracking-tight">Joanne Francis</h3>
          <span class="text-gray-600 tracking-tight">Business Operations, Figtree</span>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap justify-center -m-5 mb-12">
          <div class="w-auto p-5">
            <img src="basko-assets/images/brands/logo-dark6.svg" alt="">
          </div>
          <div class="w-auto p-5">
            <img src="basko-assets/images/brands/logo-dark5.svg" alt="">
          </div>
          <div class="w-auto p-5">
            <img src="basko-assets/images/brands/logo-dark4.svg" alt="">
          </div>
          <div class="w-auto p-5">
            <img src="basko-assets/images/brands/logo-dark3.svg" alt="">

<section class="py-24 lg:py-32 bg-gray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-10 text-3xl font-semibold" style="letter-spacing: -0.5px;">Our performance in numbers</h2>
    <div class="flex flex-wrap -m-12">
      <div class="w-full md:w-1/2 lg:w-1/4 p-12">
        <div class="inline-block">
          <h3 class="font-heading mb-3 inline-block text-6xl text-indigo-500 tracking-tighter">97.5%</h3>
          <p class="font-medium tracking-tight">A percentage number that’s close to 100.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-12">
        <div class="inline-block">
          <h3 class="font-heading mb-3 inline-block text-6xl text-indigo-500 tracking-tighter">1.45</h3>
          <p class="font-medium tracking-tight">A number with two decimal pieces</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-12">
        <div class="inline-block">
          <h3 class="font-heading mb-3 inline-block text-6xl text-indigo-500 tracking-tighter">2x</h3>
          <p class="font-medium tracking-tight">A multiplie that suggests double.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-12">
        <div class="inline-block">