Simple note taking UI with tailwind

index.html

<div class="flex">
<nav class="bg-gray-100 w-10 flex-shrink-0 border-r border-gray-200 min-h-screen py-3 px-1.5 align">
  <a href="javascript:;" class="block">
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6">
      <path d="M6 6C6 5.44772 6.44772 5 7 5H17C17.5523 5 18 5.44772 18 6C18 6.55228 17.5523 7 17 7H7C6.44771 7 6 6.55228 6 6Z" fill="currentColor"/>
      <path d="M6 10C6 9.44771 6.44772 9 7 9H17C17.5523 9 18 9.44771 18 10C18 10.5523 17.5523 11 17 11H7C6.44771 11 6 10.5523 6 10Z" fill="currentColor"/>
      <path d="M7 13C6.44772 13 6 13.4477 6 14C6 14.5523 6.44771 15 7 15H17C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13H7Z" fill="currentColor"/>
      <path d="M6 18C6 17.4477 6.44772 17 7 17H11C11.5523 17 12 17.4477 12 18C12 18.5523 11.5523 19 11 19H7C6.44772 19 6 18.5523 6 18Z" fill="currentColor"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.34315 3.34315 1 5 1H19C20.6569 1 22 2.34315 22 4V20C22 21.6569 20.6569 23 19 23H5C3.34315 23 2 21.6569 2 20V4ZM5 3H19C19.5523 3 20 3.44771 20 4V20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V4C4 3.44772 4.44771 3 5 3Z" fill="currentColor"/>
    </svg>
  </a>
  <a href="javascript:;" class="block mt-4">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
    </svg>
  </a>
</nav>
<nav class="bg-gray-50 w-52 flex-shrink-0 border-r border-gray-200 p-2">
  <div class="flex justify-between">
    <h4 class="text-lg">All Notes</h4>
    <a href="javascript:;" class="text-lg">+</a>
  </div>

  <div class="mt-3">
    <input type="text" class="border border-gray-300 focus:outline-none rounded p-1 focus:border-gray-700" placeholder="Note name">
    <div class="mt-1">
      <button class="bg-gray-700 text-gray-100 rounded py-1 px-2 font-bold">Save</button>
      <button class="bg-gray-50 text-gray-700 rounded py-1 px-2 font-bold">Cancel</button>
    </div>
  </div>

  <div class="mt-3">
    <div class="flex justify-between mb-1">
      <a href="javascript:;" class="inline align-middle">
        <span>Note 1</span>
      </a>
    </div>

    <div class="flex justify-between">
      <a href="javascript:;" class="inline align-middle">
        <span>Note 1</span>
      </a>
    </div>
  </div>

</nav>
<main class="bg-white flex-grow px-5 py-3">

  <h1 class="text-5xl mb-3">Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis iste laboriosam ab itaque fuga, blanditiis doloribus id modi ex, nulla dolores, temporibus provident. Reprehenderit enim corporis blanditiis officia numquam repellat. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius voluptatum natus quidem necessitatibus nisi, rerum ducimus nulla eum nesciunt, fugiat repellat aliquam. Quis omnis voluptatibus quia atque inventore odio! Mollitia!</p>
    <br>
    <br>
    <code class="my-3">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam culpa eveniet exercitationem sequi suscipit soluta? Iste consectetur architecto ratione fuga, accusantium impedit aspernatur itaque sint inventore, maiores modi labore blanditiis.
    </code>
  
  <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</main>
</div>