render mock ui with tailwind

index.html

<div class="flex flex-row">
  <div class="bg-light-blue-900 h-screen flex flex-col justify-between">
    <div class="border-b border-gray-400">
      <div class="flex flex-row space-x-3 m-4 pr-14">
        <img class="w-7" src="https://dashboard.render.com/static/media/logo-redesign-02-icon.42687791.svg" />
        <p class="text-white text-3xl font-norma">render</p>
      </div>
    </div>

    <div class="flex flex-col space-y-3 ml-4 flex-auto mt-8">
      <p class="text-gray-200 font-light text-lg">Services</p>
      <p class="text-gray-200 font-light text-lg">Database</p>
      <p class="text-gray-200 font-light text-lg">YAML</p>
      <p class="text-gray-200 font-light text-lg">Env Groups</p>
    </div>

    <div class="flex flex-col space-y-3 flex-auto">
      <div class="border-b border-gray-400"></div>
      <div class="ml-4">
        <p class="text-gray-200 font-normal text-lg">Resouce</p>
        <p class="text-gray-200 font-light ml-2 text-lg">Docs</p>
        <p class="text-gray-200 font-light ml-2 text-lg">Community</p>
      </div>
    </div>

    <div class="ml-4 mb-5 text-gray-400">
      <div class="flex flex-row space-x-3 py-1 cursor-pointer hover:bg-gray-500 py-2 rounded-md mr-6 pl-6">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
        </svg>
        <p class="text-sm">Feedback</p>
      </div>

      <div class="flex flex-row space-x-3 cursor-pointer hover:bg-gray-500 py-2 rounded-md mr-6 pl-6">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
        <p class="text-sm pl-0">Invite a friend</p>
      </div>
    </div>
  </div>
  <div class="flex-auto bg-gray-50">
    <div class="h-16 m-1 border-b border-gray-400">
      <div class="flex flex-row justify-end mr-6">
        <div>
          <p>Amin</p>
        </div>
      </div>
    </div>

    <div class="m-2 mx-6">
      <div class="bg-red-200 p-3 rounded-lg">
        <p>Trial Expired</p>
      </div>
      <p>STATIC</p>
      <div class="flex flex-row justify-between">
        <div>Hello</div>
        <div class="bg-blue-500 hover:bg-blue-600 cursor-pointer p-2 px-4 rounded-lg flex flex-row items-center">
          <p class="text-white pr-2 font-thin">Manual Deploy</p>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </div>
      </div>

      <div class="flex flex-row space-x-7 overflow-x-auto text-gray-500 font-normal text-base mx-auto pb-5">
        <p>Events</p>
        <p>Environemnts</p>
        <p>Redirects/Rewrites</p>
        <p>Headers</p>
        <p>PRs</p>
        <p>Sharing</p>
        <p>Metrics</p>
        <p>Settings</p>
      </div>
      <div class="">
    <nav class="flex flex-col sm:flex-row mb-5">
        <button class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
           Events
        </button><button class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium border-gray-200">
            Environemnts
        </button><button class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium border-gray-200">
        Redirects/Rewrites
        </button><button class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none border-b-2 font-medium border-gray-200">
          Headers
        </button>
    </nav>
</div>

      <div class="flex flex-col bg-white">
        <div class="flex flex-row space-x-4 items-center border-gray-200 border p-5 rounded-t-sm">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-cyan-800" viewBox="0 0 20 20" fill="currentColor">
            <path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z" />
          </svg>
          <div>
            <p class="font-light text-sm">
              <span class="text-light-blue-800 font-normal"> Deploy </span>
              live for fe705b4: Merge branch 'master' of https://github.com/mock-ui/tailwindcss-google-searchpage
            </p>
            <p class="font-light text-xs pt-1">April 7, 2021 at 7:36 PM</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>