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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.