WickedBlocks ©

Navigation.

8 Blocks

Improved User Experience ,an easy to use navigation system on your website makes using your website a more enjoyable experience. Therefore, visitors will be more likely to spend more time on your website and they are more likely to revisit your website.

1 

        <header class="text-gray-700 bg-white border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <a class="flex items-center w-40 mb-4 font-medium text-gray-900 title-font md:mb-0">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
                <nav class="flex flex-wrap items-center justify-center text-base md:ml-auto md:mr-auto">
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Pricing</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Contact</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Services</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Now</a>
                </nav>
                <button
                    class="items-center px-8 py-3 mt-4 font-semibold text-blue-700 transition duration-500 ease-in-out transform bg-white border rounded-lg lg:inline-flex lg:mt-px hover:border-blue-800 hover:bg-blue-700 hover:text-white focus:ring focus:outline-none">Button
                </button>
            </div>
        </header>
        <div class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-dashed border-blueGray-300 h-96 rounded-xl">
                <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                  --  Content goes here --
                </p>
        </div>

WICKEDTEMPLATES
"Free & premium Well designed landing pages to integrate with your next project."

Have a look to Wicked Templates.
2 

        <header class="text-gray-700 bg-white border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <a class="flex items-center w-40 mb-4 font-medium text-gray-900 title-font md:mb-0">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
                <nav class="flex flex-wrap items-center justify-center text-base ">
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 lg:ml-24 hover:text-gray-800">Pricing</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Contact</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Services</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Now</a>
                </nav>
                <div class="flex ml-auto">
                    <button
                        class="inline-flex px-8 py-3 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Button</button>
                    <button
                        class="items-center px-8 py-3 mt-4 ml-5 font-semibold text-black transition duration-500 ease-in-out transform bg-white border rounded-lg lg:inline-flex lg:mt-px hover:border-black0 hover:bg-black hover:text-white focus:ring focus:outline-none">Button
                        <svg class="hidden lg:block" fill="none" stroke="currentColor" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
                            <path d="M5 12h14M12 5l7 7-7 7"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </header>
        <div
            class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-dashed border-blueGray-300 h-96 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
3 

        <header class="text-gray-700 bg-white border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <nav class="flex flex-wrap items-center justify-center text-base ">
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Pricing</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Contact</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Services</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Now</a>
                </nav>
                <a class="flex items-center w-40 mx-auto mb-4 font-medium text-gray-900 title-font md:mb-0">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
                <button
                    class="items-center px-8 py-3 mt-4 font-semibold text-blue-700 transition duration-500 ease-in-out transform bg-white border rounded-lg lg:inline-flex lg:ml-auto lg:mt-px hover:border-blue-700 hover:bg-blue-700 hover:text-white focus:ring focus:outline-none">Button
                </button>
            </div>
        </header>
        <div
            class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-dashed border-blueGray-300 h-96 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
4 

        <header class="text-gray-700 bg-white border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <a class="flex items-center w-40 mb-4 font-medium text-gray-900 title-font md:mb-0">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
                <nav class="flex flex-wrap items-center justify-center text-base md:ml-auto ">
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Pricing</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Contact</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Services</a>
                    <a href="#" class="mr-5 text-sm font-semibold text-gray-600 hover:text-gray-800">Now</a>
                </nav>
                <button
                    class="items-center px-8 py-3 mt-4 font-semibold text-blue-700 transition duration-500 ease-in-out transform bg-white border rounded-lg lg:inline-flex lg:mt-px hover:border-blue-800 hover:bg-blue-700 hover:text-white focus:ring focus:outline-none">Button
                </button>
            </div>
        </header>
        <div
            class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-dashed border-blueGray-300 h-96 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
5 

        <header class="text-gray-700 bg-white border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <a class="flex items-center w-40 mb-4 font-medium text-gray-900 title-font md:mb-0">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
                <button
                    class="items-center px-8 py-3 mt-4 ml-auto font-semibold text-blue-700 transition duration-500 ease-in-out transform bg-white border rounded-lg lg:inline-flex lg:mt-px hover:border-blue-800 hover:bg-blue-700 hover:text-white focus:ring focus:outline-none">Button
                </button>
            </div>
        </header>
        <div
            class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-dashed border-blueGray-300 h-96 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
6 

        <header class="text-gray-700 bg-white border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <a class="flex items-center w-40 mb-4 font-medium text-gray-900 title-font md:mb-0">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
            <div class="flex items-end ml-auto w-2/2 ">
                <div class="relative w-1/2 mr-4 text-left ">
                    <input type="text" id="hero-field" name="hero-field"
                        class="flex-grow w-full px-4 py-2 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
                </div>
                <button
                    class="flex items-center px-4 py-2 mt-auto font-semibold text-white transition duration-500 ease-in-out transform rounded-lg l bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Action
                </button>
            </div>
            </div>
        </header>
        <div
            class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-dashed border-blueGray-300 h-96 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
7 

        <header class="text-gray-700 bg-white border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <a class="flex items-center w-40 mb-4 font-medium text-gray-900 title-font md:mb-0">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
                <nav class="flex flex-wrap items-center justify-center ml-4 text-base">
                    <a href="#"
                        class="mr-5 text-sm font-semibold text-gray-700 rounded-xl hover:text-gray-800">Dashboard</a>
                    <a href="#"
                        class="mr-5 text-sm font-semibold text-gray-700 rounded-xl hover:text-gray-800">Projects</a>
                    <a href="#"
                        class="mr-5 text-sm font-semibold text-gray-700 rounded-xl hover:text-gray-800">Setting</a>
                    <a href="#"
                        class="mr-5 text-sm font-semibold text-gray-700 rounded-xl hover:text-gray-800">Account</a>
                </nav>
                <button
                    class="p-1 ml-auto text-gray-400 bg-gray-800 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
                <button
                    class="flex ml-3 text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
                    id="user-menu" aria-haspopup="true">
                    <span class="sr-only">Open user menu</span>
                        <img class="w-8 h-8 rounded-full "
                            src="https://res.cloudinary.com/the-unicorns-feed/image/upload/v1606463246/avatars/mke2_wnzylr.png" alt="">
                </button>
            </div>
        </header>
        <div
            class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-dashed border-blueGray-300 h-96 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>
8 

        <header class="text-gray-700 bg-white border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <a class="flex items-center w-40 mb-4 font-medium text-gray-900 title-font md:mb-0">
                    <img src="../badges/WhitePink.svg" alt="">
                </a>
                <div class="flex items-center mx-auto lg:pl-20">
                    <div class="relative w-full mr-4 text-left ">
                        <input type="text" id="hero-field" name="hero-field"
                            class="flex-grow w-full px-4 py-2 mr-4 text-base text-blue-700 bg-gray-100 border-transparent rounded-lg focus:border-gray-500 focus:bg-white focus:ring-0">
                    </div>
                    <button
                        class="flex items-center px-4 py-2 mt-auto font-semibold text-white transition duration-500 ease-in-out transform rounded-lg l bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:ring focus:outline-none">Action
                    </button>
                </div>
                <button class="p-1 ml-auto text-gray-400 bg-gray-800 rounded-full hover:text-white focus:outline-none focus:ring ">
                    <span class="sr-only">View notifications</span>
                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
                <button
                    class="flex ml-3 text-sm bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
                    id="user-menu" aria-haspopup="true">
                    <span class="sr-only">Open user menu</span>
                    <img class="w-8 h-8 border border-white rounded-full"
                        src="https://res.cloudinary.com/the-unicorns-feed/image/upload/v1606463246/avatars/mke2_wnzylr.png"
                        alt="">
                </button>
            </div>
        </header>
        <header class="text-gray-700 border-t border-b body-font">
            <div class="container flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row ">
                <nav class="flex flex-wrap items-center justify-center ml-4 text-base">
                    <a href="#" class="mr-5 text-sm text-gray-700 rounded-xl hover:text-gray-800">Dashboard</a>
                    <a href="#" class="mr-5 text-sm text-gray-700 rounded-xl hover:text-gray-800">Projects</a>
                    <a href="#" class="mr-5 text-sm text-gray-700 rounded-xl hover:text-gray-800">Setting</a>
                    <a href="#" class="mr-5 text-sm text-gray-700 rounded-xl hover:text-gray-800">Account</a>
                    <a href="#" class="mr-5 text-sm text-gray-700 rounded-xl hover:text-gray-800">Team</a>
                    <a href="#" class="mr-5 text-sm text-gray-700 rounded-xl hover:text-gray-800">Code</a>
                    <a href="#" class="mr-5 text-sm text-gray-700 rounded-xl hover:text-gray-800">Preferences</a>
                    <a href="#" class="mr-5 text-sm text-gray-700 rounded-xl hover:text-gray-800">Profile</a>
                </nav>
            </div>
        </header>
        <div
            class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-dashed border-blueGray-300 h-96 rounded-xl">
            <p class="mt-20 italic tracking-tighter text-md text-blueGray-500 title-font">
                -- Content goes here --
            </p>
        </div>