Header block for use with homepage of websites and landing pages.

Dependencies

  • Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - Header 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="header-2">

        <nav class="bg-white py-2 md:py-4">
            <div class="container px-4 mx-auto md:flex md:items-center">

                <div class="flex justify-between items-center">
                    <a href="#" class="font-bold text-xl text-indigo-600">FWR</a>
                    <button class="border border-solid border-gray-600 px-3 py-1 rounded text-gray-600 opacity-50 hover:opacity-75 md:hidden" id="navbar-toggle">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>

                <div class="hidden md:flex flex-col md:flex-row md:ml-auto mt-3 md:mt-0" id="navbar-collapse">
                    <a href="#" class="p-2 lg:px-4 md:mx-2 text-white rounded bg-indigo-600">Home</a>
                    <a href="#" class="p-2 lg:px-4 md:mx-2 text-gray-600 rounded hover:bg-gray-200 hover:text-gray-700 transition-colors duration-300">About</a>
                    <a href="#" class="p-2 lg:px-4 md:mx-2 text-gray-600 rounded hover:bg-gray-200 hover:text-gray-700 transition-colors duration-300">Features</a>
                    <a href="#" class="p-2 lg:px-4 md:mx-2 text-gray-600 rounded hover:bg-gray-200 hover:text-gray-700 transition-colors duration-300">Pricing</a>
                    <a href="#" class="p-2 lg:px-4 md:mx-2 text-gray-600 rounded hover:bg-gray-200 hover:text-gray-700 transition-colors duration-300">Contact</a>
                    <a href="#" class="p-2 lg:px-4 md:mx-2 text-indigo-600 text-center border border-transparent rounded hover:bg-indigo-100 hover:text-indigo-700 transition-colors duration-300">Login</a>
                    <a href="#" class="p-2 lg:px-4 md:mx-2 text-indigo-600 text-center border border-solid border-indigo-600 rounded hover:bg-indigo-600 hover:text-white transition-colors duration-300 mt-1 md:mt-0 md:ml-1">Signup</a>
                </div>
            </div>
        </nav>

        <div class="bg-indigo-100 py-6 md:py-12">
            <div class="container px-4 mx-auto">

                <div class="text-center max-w-2xl mx-auto">
                    <h1 class="text-3xl md:text-4xl font-medium mb-2">Get the header you needed for your awesome website.</h1>
                    <button class="bg-indigo-600 text-white py-2 px-6 rounded-full text-xl mt-6">Get Started</button>
                    <div class="mt-4">
                        <img src="//assets.free-website-resources.com/img/imac-bg.png" alt="mockup" class="d-block max-w-full">
                    </div>
                </div>

                <div class="md:flex md:flex-wrap md:-mx-4 mt-6 md:mt-12">

                    <div class="md:w-1/3 md:px-4 xl:px-6 mt-8 md:mt-0 text-center">
                        <span class="w-20 border-t-2 border-solid border-indigo-200 inline-block mb-3"></span>
                        <h5 class="text-xl font-medium uppercase mb-4">Fresh Design</h5>
                        <p class="text-gray-600">FWR blocks bring in an air of fresh design with their creative layouts and blocks, which are easily customizable</p>
                    </div>

                    <div class="md:w-1/3 md:px-4 xl:px-6 mt-8 md:mt-0 text-center">
                        <span class="w-20 border-t-2 border-solid border-indigo-200 inline-block mb-3"></span>
                        <h5 class="text-xl font-medium uppercase mb-4">Clean Code</h5>
                        <p class="text-gray-600">FWR blocks are the cleanest pieces of HTML blocks, which are built with utmost care to quality and usability.</p>
                    </div>

                    <div class="md:w-1/3 md:px-4 xl:px-6 mt-8 md:mt-0 text-center">
                        <span class="w-20 border-t-2 border-solid border-indigo-200 inline-block mb-3"></span>
                        <h5 class="text-xl font-medium uppercase mb-4">Perfect Tool</h5>
                        <p class="text-gray-600">FWR blocks is a perfect tool for designers, developers and agencies looking to create stunning websites in no time.</p>
                    </div>

                </div>

            </div>
        </div>

    </div>
    <!-- /.header-2 -->

    <!-- Scripts -->
    <script>
        let toggleBtn = document.querySelector("#navbar-toggle");
        let collapse = document.querySelector("#navbar-collapse");

        toggleBtn.onclick = () => {
            collapse.classList.toggle("hidden");
            collapse.classList.toggle("flex");
        };
    </script>
</body>
</html>

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvaGVhZGVyL2hlYWRlci0y