Navigation.

3 Blocks

WEB 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.


                    <div class="text-gray-700 bg-white ">
                        <div class="flex flex-col flex-wrap p-5 mx-auto border-b md:items-center md:flex-row">
                            <a href="./index.html" class="pr-2 lg:pr-8 lg:px-6 focus:outline-none">
                                <div class="inline-flex items-center">
                                    <div class="w-2 h-2 p-2 mr-2 rounded-full bg-gradient-to-tr from-cyan-400 to-lightBlue-500">
                                    </div>
                                    <h2
                                        class="font-semibold tracking-tighter text-gray-500 transition duration-1000 ease-in-out transform text-bold lg:mr-8">
                                        Wicked Blocks
                                    </h2>
                                </div>
                            </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-2 ml-auto font-semibold text-white transition duration-500 ease-in-out transform bg-black rounded-lg hover:bg-gray-900 focus:ring focus:outline-none">Button
                            </button>
                        </div>
                    </div>
                    <div class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-gray-300 border-dashed h-96 rounded-xl">
                            <p class="mt-20 italic tracking-tighter text-gray-500 text-md title-font">
                              --  Content goes here --
                            </p>
                    </div>
                                                

wickedtemplates

Spring Offer! 30% discount on all products. Use the Code wicked30

Tired of designing?

Don't lose precious days designing the landing page and testing a site. Instead, integrate one with your favourite framework.


                <div class="text-gray-700 bg-white border-t border-b ">
                    <div class="flex flex-col flex-wrap p-5 mx-auto md:items-center md:flex-row">
                        <a href="./index.html" class="pr-2 lg:pr-8 lg:px-6 focus:outline-none">
                            <div class="inline-flex items-center">
                                <div class="w-2 h-2 p-2 mr-2 rounded-full bg-gradient-to-tr from-cyan-400 to-lightBlue-500">
                                </div>
                                <h2
                                    class="font-semibold tracking-tighter text-gray-500 transition duration-1000 ease-in-out transform text-bold lg:mr-8">
                                    Wicked Blocks
                                </h2>
                            </div>
                        </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="items-center px-8 py-2 ml-auto font-semibold text-white transition duration-500 ease-in-out transform bg-black rounded-lg hover:bg-gray-900 focus:ring focus:outline-none">Button</button>
                            <button
                                class="items-center px-8 py-2 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>
                </div>
                <div
                    class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-gray-300 border-dashed h-96 rounded-xl">
                    <p class="mt-20 italic tracking-tighter text-gray-500 text-md title-font">
                        -- Content goes here --
                    </p>
                </div>
                                    

                    <div class="text-gray-700 bg-white ">
                        <div class="flex flex-col flex-wrap p-5 mx-auto border-b md:items-center md:flex-row">
                            <a href="./index.html" class="pr-2 lg:pr-8 lg:px-6 focus:outline-none">
                                <div class="inline-flex items-center">
                                    <div class="w-2 h-2 p-2 mr-2 rounded-full bg-gradient-to-tr from-cyan-400 to-lightBlue-500">
                                    </div>
                                    <h2
                                        class="font-semibold tracking-tighter text-gray-500 transition duration-1000 ease-in-out transform text-bold lg:mr-8">
                                        Wicked Blocks
                                    </h2>
                                </div>
                            </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-2 font-semibold text-white transition duration-500 ease-in-out transform bg-black rounded-lg hover:bg-gray-900 focus:ring focus:outline-none">Button
                            </button>
                        </div>
                    </div>
                    <div
                        class="container w-full p-20 m-4 mx-auto my-16 text-center bg-white border-2 border-gray-300 border-dashed h-96 rounded-xl">
                        <p class="mt-20 italic tracking-tighter text-gray-500 text-md title-font">
                            -- Content goes here --
                        </p>
                    </div>