Elegant Navigation Header - Copy this Html, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="dv"-dir="rtl">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Javiyani-Inspired-Header</title>-<script-src="https://cdn.tailwindcss.com"></script>-<style>-body-{-font-family:-'Noto-Nastaliq-Urdu',-serif;-}-</style>-</head>-<body-class="bg-gray-100-text-gray-900">-<!-Header->-<header-class="bg-teal-500-text-white-py-4">-<div-class="container-mx-auto-flex-items-center-justify-between">-<!-Social-Icons->-<div-class="flex-items-center-space-x-4-space-x-reverse">-<a-href="#"-aria-label="Facebook"-class="hover:text-gray-200">📷</a>-<a-href="#"-class="hover:text-gray-200">Facebook</a>-<a-href="#"-class="hover:text-gray-200">Instagram</a>-</div>-<!-Logo->-<div-class="text-center">-<a-href="/"-class="text-4xl-font-bold">Logo</a>-</div>-<!-Search-Icon->-<div-class="flex-items-center-space-x-4-space-x-reverse">-<button-class="text-white-focus:outline-none-hover:text-gray-200"-aria-label="Search">🔍</button>-</div>-</div>-</header>-<!-Centered-Transparent-Navbar->-<nav-class="bg-transparent-text-white-py-2">-<div-class="container-mx-auto-flex-justify-center-items-center-px-4">-<ul-class="flex-space-x-8-space-x-reverse">-<li><a-href="#"-class="hover:text-teal-400">Home</a></li>-<li><a-href="#"-class="hover:text-teal-400">News</a></li>-<li><a-href="#"-class="hover:text-teal-400">Sports</a></li>-<li><a-href="#"-class="hover:text-teal-400">Contact</a></li>-</ul>-</div>-</nav>-</body>-</html>-include-all-reactjs-and-all-functions
