<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<div class="w-full h-screen bg-gray-800">
<div class="w-64 sm:w-1/2 md:w-64 h-full bg-gray-900 shadow sm:shadow-md md:shadow-lg lg:shadow-xl xl:shadow-2xl border border-gray-900">
<!--LOGO start-->
<img src="https://via.placeholder.com/400x400"
alt="alt placeholder" class="w-10 h-10 mx-auto mb-5 rounded-full">
<!--LOGO end-->
<!--NAV start-->
<ul class="text-gray-700">
<li class="block cursor-pointer p-2 hover:bg-gray-800 hover:text-gray-300">
<a class="" href="#">
<i class="w-8 fas fa-search p-2 bg-gray-800 rounded-full mx-2"></i>
Search
</a>
</li>
<li class="block cursor-pointer p-2 hover:bg-gray-800 hover:text-gray-300">
<a class="" href="#">
<span class="w-8 mb-5 relative">
<i class="w-8 fas fa-file-alt p-2 bg-gray-800 rounded-full mx-2"></i>
<span class="absolute right-0 top-0 -mt-2 text-xs bg-yellow-500 text-black font-medium px-2 rounded-full">3</span>
</span>
Pages
</a>
</li>
<li class="block cursor-pointer p-2 hover:bg-gray-800 hover:text-gray-300">
<a class="" href="#">
<i class="w-8 fas fa-paper-plane p-2 bg-gray-800 rounded-full mx-2"></i>
Posts
</a>
</li>
<li class="block cursor-pointer p-2 hover:bg-gray-800 hover:text-gray-300">
<a class="" href="#">
<i class="w-8 fas fa-search p-2 bg-gray-800 rounded-full mx-2"></i>
Users
</a>
</li>
<li class="block cursor-pointer p-2 hover:bg-gray-800 hover:text-gray-300">
<a class="" href="#">
<i class="w-8 fas fa-search p-2 bg-gray-800 rounded-full mx-2"></i>
Users
</a>
</li>
</ul>
<!--NAV end-->
</div>
</div>
This Pen doesn't use any external JavaScript resources.