UI Components – Cronos Library

<section x-data="{ mobileNavOpen: false }" class="bg-no-repeat bg-center bg-cover bg-green-500" style="background-image: url('cronos-assets/elements/squares-background.svg');">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">About</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Services</a></li>
                    <li class="text-sm text-green-50 hover:text-green-100"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

<section x-data="{ mobileNavOpen: false }" class="bg-gradient-to-b from-white to-yellow-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

<section x-data="{ mobileNavOpen: false }" class="relative bg-no-repeat bg-cover" style="background-image: url('https://images.unsplash.com/photo-1529260830199-42c24126f198?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80');">
    <div class="absolute inset-0 opacity-80 bg-black"></div>
    <div class="relative z-10">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between py-5 -px-4 relative">
              <div class="w-auto">
                <div class="flex flex-wrap items-center">
                  <div class="w-auto mr-14">
                    <a href="#">
                      <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                    </a>
                  </div>
                </div>
              </div>
              <div class="absolute left-1/2 transform -translate-x-1/2">
                  <div class="flex flex-wrap items-center">
                    <div class="w-auto hidden lg:block">
                      <ul class="flex items-center">
                        <li class="mr-9 text-sm text-white hover:text-opacity-80"><a href="#">About</a></li>
                        <li class="mr-9 text-sm text-white hover:text-opacity-80"><a href="#">Company</a></li>
                        <li class="mr-9 text-sm text-white hover:text-opacity-80"><a href="#">Services</a></li>
                        <li class="text-sm text-white hover:text-opacity-80"><a href="#">Testimonials</a></li>
                      </ul>
                    </div>

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

<section x-data="{ mobileNavOpen: false }" class="bg-white">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    <li class="text-sm hover:text-gray-700"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-50 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="w-auto">
              <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">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="black"></path>
                  </svg>
              </button>
          </div>
        </div>
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
          <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
          <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
            <div class="flex flex-wrap h-full">

<section x-data="{ mobileNavOpen: false }" class="bg-green-500 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
              <ul class="hidden lg:flex items-center">
                <li class="mr-6"><a class="text-sm text-white hover:text-opacity-80" href="#">About</a></li>
                <li class="mr-6"><a class="text-sm text-white hover:text-opacity-80" href="#">Company</a></li>
                <li class="mr-6"><a class="text-sm text-white hover:text-opacity-80" href="#">Services</a></li>
                <li><a class="text-sm text-white hover:text-opacity-80" href="#">Testimonials</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto">
                <div class="hidden lg:block">
                    <div class="inline-block">
                        <a class="px-6 py-3 text-sm font-bold text-white hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-green-600 text-sm text-green-50 font-bold hover:bg-green-700 focus:ring focus:ring-green-300 transition duration-200" href="#">Sign Up</a>
                    </div>

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-50 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
              <ul class="hidden lg:flex items-center">
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">About</a></li>
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">Company</a></li>
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">Services</a></li>
                <li><a class="text-sm hover:text-gray-700" href="#">Testimonials</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto">
                <div class="hidden lg:block">
                    <div class="inline-block">
                        <a class="px-6 py-3 text-sm font-bold hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 hover:bg-yellow-400 focus:ring focus:ring-yellow-200 text-black text-sm font-bold transition duration-200" href="#">Sign Up</a>
                    </div>

<section x-data="{ mobileNavOpen: false }" class="bg-green-500 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="w-auto">
              <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">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="white"></path>
                  </svg>
              </button>
          </div>
        </div>
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
          <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
          <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
            <div class="flex flex-wrap h-full">

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="w-auto">
              <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">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
                  </svg>
              </button>
          </div>
        </div>
        <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
          <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
          <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
            <div class="flex flex-wrap h-full">

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100 lg:mb-32 pb-20 lg:pb-10">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                </a>
              </div>
              <ul class="hidden lg:flex items-center">
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">About</a></li>
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">Company</a></li>
                <li class="mr-6"><a class="text-sm hover:text-gray-700" href="#">Services</a></li>
                <li><a class="text-sm hover:text-gray-700" href="#">Testimonials</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto">
                <div class="hidden lg:block">
                    <div class="inline-block">
                        <a class="px-6 py-3 text-sm font-bold hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 hover:bg-yellow-400 focus:ring focus:ring-yellow-200 text-black text-sm font-bold transition duration-200" href="#">Sign Up</a>
                    </div>

<section x-data="{ mobileNavOpen: false }" class="bg-no-repeat bg-center bg-cover bg-green-500" style="background-image: url('cronos-assets/elements/squares-background.svg');">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">About</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Services</a></li>
                    <li class="text-sm text-green-50 hover:text-green-100"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

<section x-data="{ mobileNavOpen: false }" class="bg-no-repeat bg-center bg-cover bg-green-500" style="background-image: url('cronos-assets/elements/sign-background.svg');">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-5 -px-4 relative">
          <div class="w-auto">
            <div class="flex flex-wrap items-center">
              <div class="w-auto mr-14">
                <a href="#">
                  <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
              </div>
            </div>
          </div>
          <div class="absolute left-1/2 transform -translate-x-1/2">
              <div class="flex flex-wrap items-center">
                <div class="w-auto hidden lg:block">
                  <ul class="flex items-center">
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">About</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Company</a></li>
                    <li class="mr-9 text-sm text-green-50 hover:text-green-100"><a href="#">Services</a></li>
                    <li class="text-sm text-green-50 hover:text-green-100"><a href="#">Testimonials</a></li>
                  </ul>
                </div>
              </div>
          </div>

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-50 relative">
    <img class="absolute hidden lg:block top-0 right-0 object-cover" src="cronos-assets/elements/sign-background-light.svg" alt="">
    <div class="absolute top-0 bottom-0 left-0 bg-white w-1/3 hidden lg:block"></div>
    <div class="container mx-auto px-4 relative z-50">
        <div class="flex items-center justify-between py-5 -px-4">
            <div class="w-auto">
                <div class="flex flex-wrap items-center">
                <div class="w-auto mr-14">
                    <a href="#">
                    <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                    </a>
                </div>
                </div>
            </div>
            <div class="w-auto">
                <div class="hidden lg:flex flex-wrap items-center">
                    <ul class="flex items-center mr-16">
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                        <li class="text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    </ul>
                    <div class="flex items-center">
                        <a class="px-6 py-3 text-sm font-bold text-yellow-900 hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 text-sm text-yellow-900 font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" href="#">Sign Up</a>

<section x-data="{ mobileNavOpen: false }" class="bg-gray-100 relative">
    <img class="absolute hidden lg:block top-0 right-0 object-cover" src="cronos-assets/elements/sign-background-light.svg" alt="">
    <div class="absolute top-0 bottom-0 left-0 bg-white w-1/3 hidden lg:block"></div>
    <div class="container mx-auto px-4 relative z-50">
        <div class="flex items-center justify-between py-5 -px-4">
            <div class="w-auto">
                <div class="flex flex-wrap items-center">
                <div class="w-auto mr-14">
                    <a href="#">
                    <img src="cronos-assets/logos/cronos-logo.svg" alt="">
                    </a>
                </div>
                </div>
            </div>
            <div class="w-auto">
                <div class="hidden lg:flex flex-wrap items-center">
                    <ul class="flex items-center mr-16">
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">About</a></li>
                        <li class="mr-9 text-sm hover:text-gray-700"><a href="#">Company</a></li>
                        <li class="text-sm hover:text-gray-700"><a href="#">Services</a></li>
                    </ul>
                    <div class="flex items-center">
                        <a class="px-6 py-3 text-sm font-bold text-yellow-900 hover:underline mr-2" href="#">Sign In</a>
                        <a class="px-6 py-3 bg-yellow-500 text-sm text-yellow-900 font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" href="#">Sign Up</a>

<section class="py-20" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
    <div class="container mx-auto px-4">
        <div class="flex justify-center mb-6">
            <div class="bg-yellow-100 px-2 py-1 text-xs font-bold inline-block">Lorem ipsum</div>
        </div>
        <h1 class="font-heading text-center text-4xl lg:text-5xl font-bold max-w-md lg:max-w-xl mx-auto mb-4">Lorem ipsum dolor sit amet consectutar</h1>
        <p class="text-gray-600 text-center max-w-xl mx-auto mb-6">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="flex flex-wrap justify-center mb-12">
            <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="w-full md:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab1.textContent, 'text-gray-500': tab != $refs.tab1.textContent}" href="#">Monthly</a>
            <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="w-full md:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab2.textContent, 'text-gray-500': tab != $refs.tab2.textContent}" href="#">Yearly</a>
        </div>
        <div class="flex flex-wrap items-center -m-4">
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gray-50 p-6">
                    <p class="text-center text-xl font-bold mb-4">Starter</p>
                    <h2 :class="{'hidden': tab == $refs.tab2.textContent}" class="font-heading text-green-500 text-center text-5xl font-bold mb-6">$34,99</h2>
                    <h2 :class="{'hidden': tab == $refs.tab1.textContent}" class="font-heading text-green-500 text-center text-5xl font-bold mb-6">$419,99</h2>
                    <ul class="mb-6">
                        <li class="flex gap-2 items-center mb-3">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>

<nav class="py-8">
    <div class="container mx-auto px-4">
        <div class="flex justify-center">
            <a class="inline-block" href="#">
              <img class="h-8" src="cronos-assets/logos/cronos-logo.svg" alt="alt">
            </a>
        </div>
    </div>
</nav>

<section class="py-20" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
    <div class="container mx-auto px-4">
        <div class="flex justify-center mb-6">
            <div class="bg-yellow-100 inline-block px-2 py-1 text-xs font-bold">Lorem ipsum</div>
        </div>
        <h1 class="font-heading text-4xl lg:text-5xl text-center mx-auto mb-8 font-bold max-w-md lg:max-w-xl">Lorem ipsum dolor sit amet consectutar</h1>
        <p class="text-gray-600 max-w-lg mx-auto text-center mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="flex flex-wrap justify-center mb-16">
            <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="w-full sm:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab1.textContent, 'text-gray-500': tab != $refs.tab1.textContent}" href="#">General</a>
            <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="w-full sm:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab2.textContent, 'text-gray-500': tab != $refs.tab2.textContent}" href="#">Payments</a>
            <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="w-full sm:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab3.textContent, 'text-gray-500': tab != $refs.tab3.textContent}" href="#">Returns</a>
            <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="w-full sm:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab4.textContent, 'text-gray-500': tab != $refs.tab4.textContent}" href="#">Refunds</a>
        </div>
        <div class="max-w-3xl mx-auto">
            <ul>
                <li class="mb-8 px-6 pb-8 border-b border-gray-100" x-data="{ accordion: false }">
                    <a x-on:click.prevent="accordion = !accordion" class="flex justify-between items-center w-full" href="#">
                      <h6 class="text-gray-600 text-xl font-bold">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h6>
                      <span class="transform" :class="{'rotate-180': accordion}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.1746 10.1204C15.3843 9.94067 15.6999 9.96495 15.8796 10.1746C16.0593 10.3843 16.0351 10.6999 15.8254 10.8796L12.3254 13.8796C12.1382 14.0401 11.8619 14.0401 11.6746 13.8796L8.17461 10.8796C7.96495 10.6999 7.94067 10.3843 8.12038 10.1746C8.30009 9.96495 8.61574 9.94067 8.8254 10.1204L12 12.8415L15.1746 10.1204Z" fill="#001410"></path>
                        </svg>
                      </span>
                    </a>

<section class="py-20 bg-black">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4 pb-20 mb-6 border-b border-gray-800">
            <div class="w-full lg:w-1/4 p-4">
                <a class="inline-block" href="#">
                    <img src="cronos-assets/logos/cronos-logo-white.svg" alt="">
                </a>
            </div>
            <div class="w-full lg:w-3/4 p-4">
                <div class="flex flex-wrap -m-4">
                    <div class="w-full md:w-1/2 lg:w-1/4 p-4">
                        <p class="text-white font-bold mb-6">Product</p>
                        <ul>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">Careers</a></li>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">About Us</a></li>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">Insights</a></li>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">PCI Compliance</a></li>
                            <li class="mb-3"><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">Interfratlons</a></li>
                            <li><a class="text-gray-400 hover:text-gray-300 text-sm transition duration-200" href="#">Pricing</a></li>
                        </ul>
                    </div>
                    <div class="w-full md:w-1/2 lg:w-1/4 p-4">
                        <p class="text-white font-bold mb-6">For Developers</p>
                        <ul>