<!-- Component Start -->

<div class="flex justify-center w-screen h-screen px- text-gray-00">

    <div class="flex w-full max-w-screen-lg">
4
        <div class="flex flex-col w-4 py-4 pr-3">

            <a class="px-3 py-2 mt-2 text-lg font-medium rounded-sm hover:bg-gray-300" href="#">Home</a>
6
            <a class="px-3 py-2 mt-2 text-lg font-medium rounded-sm hover:bg-gray-300" href="#">Discover</a>
7
            <a class="px-3 py-2 mt-2 text-lg font-medium rounded-sm hover:bg-gray-300" href="#">Notifications</a>

            <a class="px-3 py-2 mt-2 text-lg font-medium rounded-sm hover:bg-gray-300" href="#">Inbox</a>

            <a class="px-3 py-2 mt-2 text-lg font-medium rounded-sm hover:bg-gray-300" href="#">Saved Posts</a>

            <a class="px-3 py-2 mt-2 text-lg font-medium rounded-sm hover:bg-gray-300" href="#">Groups</a>

            <a class="px-3 py-2 mt-2 text-lg font-medium rounded-sm hover:bg-gray-300" href="#">Profile</a>

            <a class="flex px-3 py-2 mt-2 mt-auto text-lg rounded-sm font-medium hover:bg-gray-200" href="#">

                <span class="flex-shrink-0 w-10 h-10 bg-gray-400 rounded-full"></span>

                <div class="flex flex-col ml-2">

                    <span class="mt-1 text-sm font-semibold leading-none">Username</span>

                    <span class="mt-1 text-xs leading-none">@username</span>

                </div>

            </a>

        </div>