<header class="cm-text-body body-font sticky top-0 z-50 bg-gradient-to-r from-white to-secondary"> <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"> <a class="flex title-font font-medium items-center cm-lgt-txt mb-4 md:mb-0" href="/"> <img src="/assets/logo.png" class="h-8"> <span class="ml-3 text-xl">{{ site.title }}</span> </a> <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center"> <a class="mr-5 hover:cm-lgt-txt" href="/">Home</a> <a class="mr-5 hover:cm-lgt-txt" href="{{ site.plugin-link }}">Plugins</a> <a class="mr-5 hover:cm-lgt-txt" href="{{ site.doc-link }}">Docs</a> </nav> <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center rounded border-2 border-primary"> <a class="ml-2 mr-2 hover:cm-lgt-txt" href="#hobby">for <strong>hobby</strong></a> <a class="mr-2 hover:cm-lgt-txt" href="#business">for <strong>business</strong></a> <a class="mr-2 hover:cm-lgt-txt" href="#edu">for <strong>edu</strong></a> </nav> <button href="{{site.demo-link}}" class="inline-flex items-center bg-gray-100 ml-2 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"> Open demo </button> </div> </header>