Abdullah AL TEKREETI
<body class="font-sans leading-normal tracking-normal"> <nav class="fixed right-0 top-0 h-full flex flex-col items-center py-4 space-y-4"> <div class="relative group"> <a href="#" class="flex items-center justify-center w-12 h-12 bg-yellow-200 rounded-full hover:bg-yellow-300"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M13 5v6h6m-6 0H7m6 0v6m0 0H7m6 0h6" /> </svg> </a> <div class="absolute right-14 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-white shadow-lg rounded p-2"> <span class="text-gray-700">Home</span> </div> </div> <div class="relative group"> <a href="#" class="flex items-center justify-center w-12 h-12 bg-yellow-200 rounded-full hover:bg-yellow-300"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A1.5 1.5 0 016.5 17h11a1.5 1.5 0 011.379.804l1.5 2.5A1.5 1.5 0 0119.5 22h-15a1.5 1.5 0 01-1.379-2.196l1.5-2.5zM12 14a5 5 0 100-10 5 5 0 000 10z" /> </svg> </a> <div class="absolute right-14 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-white shadow-lg rounded p-2"> <span class="text-gray-700">User</span> </div> </div> <div class="relative group"> <a href="#" class="flex items-center justify-center w-12 h-12 bg-yellow-200 rounded-full hover:bg-yellow-300"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l-2-2m0 0l-2-2m2 2h12m-6-6l2-2m0 0l2-2m-2 2H4m6-6l2-2m0 0l2-2m-2 2H4" /> </svg> </a> <div class="absolute right-14 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-white shadow-lg rounded p-2"> <span class="text-gray-700">Search</span> </div> </div> <div class="relative group"> <a href="#" class="flex items-center justify-center w-12 h-12 bg-yellow-200 rounded-full hover:bg-yellow-300"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </a> <div class="absolute right-14 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-white shadow-lg rounded p-2"> <span class="text-gray-700">Check</span> </div> </div> <div class="relative group"> <a href="#" class="flex items-center justify-center w-12 h-12 bg-yellow-200 rounded-full hover:bg-yellow-300"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> </svg> </a> <div class="absolute right-14 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-white shadow-lg rounded p-2"> <span class="text-gray-700">Settings</span> </div> </div> </nav> </body>