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