I am working with leaflet and when I click on the map, the map is bigger with the Chrome browser I don't know why.
Here is my code :
import "./styles.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
const App = () => {
return (
<>
<div className="App overflow-hidden">
<nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
<div className="container flex flex-wrap justify-between items-center mx-auto">
<a href="https://flowbite.com/" className="flex items-center">
<img
src="https://flowbite.com/docs/images/logo.svg"
className="mr-3 h-6 sm:h-9"
alt="Flowbite Logo"
/>
<span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
Flowbite
</span>
</a>
<button
data-collapse-toggle="navbar-default"
type="button"
className="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className="w-6 h-6"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd"
></path>
</svg>
</button>
<div
className="hidden w-full md:block md:w-auto"
id="navbar-default"
>
<ul className="flex flex-col p-4 mt-4 bg-gray-50 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
aria-current="page"
>
Home
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
About
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Services
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Pricing
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
<div
className="flex-wrap sm:flex-nowrap
items-start container flex justify-between items-center mx-auto px-2 sm:px-4 py-2.5"
>
<select
id="countries"
className="block ml-4 mr-4 mb-2 sm:mb-0 py-2 pr-4 pl-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
<select
id="countries"
className="block ml-4 mr-4 py-2 pr-4 pl-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>
<div style={{ height: "60vh" }}>
<MapContainer
className="m-10"
center={[51.505, -0.09]}
zoom={13}
scrollWheelZoom={true}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
</div>
</>
);
};
export default App;
I thought it was a problem with the property overflow so I decided to comment that line but I get the same behaviour.
You can see the full project :
The full project
Could you help me please ?
Thank you very much !
I got it to work when I remove the class overflow-hidden in the first div.
I am new to Django and ran into this issue.
so basically I am making an app where I have to display rooms on the main home page.
The rooms are generated dynamically and are stored in the database that are fetched for the home page like this (in the views.py)
def home(request):
return render(request, 'base/index.html', {'rooms':rooms})
then the index.html will display the data in the form of cards using jinja for loop, something like this, just ignore the classes and all that, they are just dummy images, here I am using tailwind-css for styling
{% for room in rooms %}
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
</div>
{% endfor %}
I am using tailwindcss for styling, and the display grid doesn't seem to work with this, I have added grid-cols-4 for large screens, which means 4 columns of 1 fr so that 4 divs can be placed in 1 line, but only 1 is being placed and rest just goes to different line. (red borders are for troubleshooting)
In my understanding, the css applied is not able to detect the dynamically generated set of data, and consider only 1 card.
How to fix this and make 3-4 dynamically generated grid items to be in one row?
I think you made a mistake while calling a loop. I don't know how Django works but you should call the loop after the first div. So some pseudo-code can be like this
<div class="grid grid-cols-1 md:grid-cols-3 border-4 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<!-- call loop here or use something like "map function" equivalent in django-->
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
.
.
.
</div>
<!-- call ends here -->
</div>
Below I am adding the tailwindcss code , since I can’t apply loop here so I just copy-paste the 4 cards code repetitively
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-1 md:grid-cols-3 border-4 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<!-- call loop here or use something like "map function" equivalent in django-->
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
</div>
Maybe the problem with the position where you put loop, change your code like this to make loop work inside the grid
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
{% for room in rooms %}
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
{% endfor %}
</div>
There is a "header" on this list that I need locked. Below them is a user list that can scroll but the div's above need to stay fixed. I cannot figure out what I am doing wrong and its driving me mad.
Bonus points if you can figure out why the 5 small buttons are not spaced properly cause I cant figure that out either. All of this is done in tailwind. I know there is a lot of code but it seemed easier to give a real world set as opposed to all the JavaScript to create that code. I have also included an image to show you the issue
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<aside class="hidden w-80 bg-gray-100 shadow-2xl border-l border-gray-200 dark:border-gray-800 overflow-y-auto lg:block">
<div>
<div class="sm:hidden">
<label for="userlists" class="sr-only">Select a tab</label>
<select id="userlists" name="userlists" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-800">
<option>All</option>
<option>Watching</option>
</select>
</div>
<!--User List Filter -->
<div class="hidden sm:block">
<nav class="relative z-0 shadow flex divide-x divide-gray-200 dark:divide-gray-800" aria-label="UserLists">
<a href="#" class="text-gray-900 dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10" aria-current="page">
<span>All</span>
<span aria-hidden="true" class="bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
<a href="#" class="text-gray-500 hover:text-gray-700 hover:dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10">
<span>Watching</span>
<span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
</nav>
</div>
<div class="justify-evenly">
<span class="relative z-0 inline-flex shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</button>
</span>
</div>
</div>
<!--User List Users -->
<ul class="flex-1 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto dark:bg-gray-900">
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-gray-300 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RKMAdmin</p>
<p class="text-sm text-gray-500 truncate">New York City, USA</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-3" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
</ul>
</aside>
Use sticky top-0 bg-white z-10 on parent.
Second issue is, you're not using the space-evenly together with flex. Move it next to the inline-flex container.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<aside class="max-h-60 w-80 bg-gray-100 shadow-2xl border-l border-gray-200 dark:border-gray-800 overflow-y-auto lg:block">
<div class="sticky top-0 bg-white z-10">
<div>
<label for="userlists" class="sr-only">Select a tab</label>
<select id="userlists" name="userlists" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-800">
<option>All</option>
<option>Watching</option>
</select>
</div>
<!--User List Filter -->
<div class="sm:block">
<nav class="relative z-0 shadow flex divide-x divide-gray-200 dark:divide-gray-800" aria-label="UserLists">
<a href="#" class="text-gray-900 dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10" aria-current="page">
<span>All</span>
<span aria-hidden="true" class="bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
<a href="#" class="text-gray-500 hover:text-gray-700 hover:dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10">
<span>Watching</span>
<span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
</nav>
</div>
<div>
<span class="relative z-0 inline-flex justify-evenly w-full shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</button>
</span>
</div>
</div>
<!--User List Users -->
<ul class="flex-1 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto dark:bg-gray-900">
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-gray-300 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RKMAdmin</p>
<p class="text-sm text-gray-500 truncate">New York City, USA</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-3" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
</ul>
</aside>