Full Page Header Hacktoberfest - Tailwind Component
A full page header by Hacktoberfest, it is made with Tailwind CSS.
navbar
Loading component...
127 lines
<header class="text-gray-600 body-font">
<div class="flex flex-wrap py-5 flex-col md:flex-row items-center shadow-md">
<nav class="md:ml-auto md:mr-auto sm:flex flex-wrap items-center text-base justify-center hidden">
<span class="mr-5 hover:text-gray-900 font-semibold cursor-pointer">Home</span>
<span class="mr-5 hover:text-gray-900 font-semibold cursor-pointer">Resources</span>
<span class="mr-5 hover:text-gray-900 font-semibold cursor-pointer">
<button id="dropdownDefault" data-dropdown-toggle="dropdown"
class="text-center inline-flex items-center font-semibold" type="button">Dropdown button <svg
class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg></button>
<div id="dropdown" class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">All
Events</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Event
Oragnize Kit</a>
</li>
</ul>
</div>
</span>
<span class="mr-5 hover:text-gray-900 font-semibold cursor-pointer">Giving</span>
<span class="mr-5 hover:text-gray-900 font-semibold cursor-pointer">FAQ</span>
<span class="mr-5 hover:text-gray-900 font-semibold cursor-pointer">Advisory Council</span>
</nav>
<div class="sm:hidden flex w-full justify-end ">
<button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar"
class="text-gray-700 pl-3 pr-4 py-2 focus:outline-none md:hover:text-blue-700 md:p-0 font-medium flex items-center ">
<img src="https://hacktoberfest.digitalocean.com/_nuxt/img/logo-hf-icon.6b4a329.svg" alt="hacktoberfest"
class="w-10">
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<div id="dropdownNavbar"
class="hidden bg-white text-base z-10 list-none divide-y divide-gray-100 rounded shadow my-4 w-44">
<ul class="py-1" aria-labelledby="dropdownLargeButton">
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Home</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Resources</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">All Events</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Event Oragnize Kit</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Giving</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">FAQ</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Advisory Councilt</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mt-24 px-12 flex flex-col items-center">
<img src="https://hacktoberfest.digitalocean.com/_nuxt/img/logo-hacktoberfest-full.f42e3b1.svg"
alt="logo-hacktoberfest-full" class="w-4/6">
<div class="pt-8 mx-4 sm:mx-8 md:mx-auto">
<h1 class="focus:outline-none text-2xl text-center text-gray-800 font-bold pt-4">Presented by</h1>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-10 sm:px-0 px-8 items-center my-8">
<div
class="flex justify-center items-center inset-0 transform hover:scale-75 transition duration-300 contrast-75 hover:contrast-100 drop-shadow-xl">
<img class="focus:outline-none"
src="https://hacktoberfest.digitalocean.com/_nuxt/img/logo-digitalocean-gr.f6faef2.svg"
alt="logo-digitalocean-gr" role="img" />
</div>
<div
class="flex justify-center items-center inset-0 transform hover:scale-75 transition duration-300 contrast-75 hover:contrast-100 drop-shadow-xl ">
<img class="focus:outline-none"
src="https://hacktoberfest.digitalocean.com/_nuxt/img/logo-appwrite-gr.1161116.svg" alt="logo-appwrite-gr"
role="img" />
</div>
<div
class="flex justify-center items-center inset-0 transform hover:scale-75 transition duration-300 contrast-75 hover:contrast-100 drop-shadow-xl">
<img class="focus:outline-none "
src="https://hacktoberfest.digitalocean.com/_nuxt/img/logo-intel-gr.a510816.svg" alt="logo-intel-gr"
role="img" />
</div>
<div
class="flex justify-center items-center inset-0 transform hover:scale-75 transition duration-300 contrast-75 hover:contrast-100 drop-shadow-xl">
<img class="focus:outline-none "
src="https://hacktoberfest.digitalocean.com/_nuxt/img/logo-deepsource-gr.37aa9bc.svg"
alt="logo-deepsource-gr" role="img" />
</div>
</div>
<div class="">
<h1 class="uppercase font-semibold text-center text-gray-700 text-2xl mt-24">DONATE TO SUPPORT OPEN-SOURCE
PROJECTS</h1>
<p class="text-center font-medium mt-4 text-gray-500 md:mx-24 text-lg">Supporting open-source projects and the
folks who run them is what Hacktoberfest is all about. Besides ticking off pull requests and flexing our
coding muscles, we can support the projects we believe in—or even rely on—by giving them the resources they
need to stay online.
<br><br>
Open source projects are always in need of financial support in order to develop new features, cover expenses,
and continue their regular activities, and you’ll be able to explore and donate to open source projects right
from the Hacktoberfest website.
<br><br>
Remember, open-source projects of all sizes are in need of funding, so we encourage donations to a variety of
projects.</p>
</div>
</div>
</div>
</header>
<div class="py-12"></div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
font-family: 'Space Mono', monospace;
}
</style>
<script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>