Why does my button look different on iOS? - html

Top: How it looks on iOS Chrome
Bottom: How it looks on PC Chrome
I've referenced this post, and added appearance: none; inline to my button.
Full Tailwind styling of the element:
<button class="sm:max-w-30 relative inline-flex h-9 w-full min-w-[130px] items-center justify-start rounded-md border border-slate-400 bg-transparent py-2 px-4 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2" style="appearance: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
搜索文章
</button>

Related

Creating tooltip inside a flex scrollable element

I've been struggling for hours with this problem, basically i am making an navbar using tailwind, and every element in the sidebar should have a tooltip the toolstips works but when i scroll the div the tooltip does not follow the content correctly. I tried change a lot of things but without sucess, maybe you guys css experts can help me ;)
The content not following the selected button
How it should be...
Here the code so far:
<div className="w-screen h-screen m-0 p-0">
<div className="flex flex-row w-full h-full">
{/* Sidenav MD */}
<div className="flex flex-col w-[80px] h-full flex-none bg-white items-center justify-between">
<div className="w-full flex flex-col space-y-2 p-2 items-center overflow-y-auto">
<div className="flex flex-none justify-center items-center w-10 h-10 bg-black rounded-md">
<span className="text-lg text-white">X</span>
</div>
<div className="group flex flex-row items-center">
<div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div className="group flex flex-row items-center">
<div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
<path fillRule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clipRule="evenodd" />
</svg>
</div>
<span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Notifications</span>
</div>
<div className="group flex flex-row items-center">
<div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
<path fillRule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clipRule="evenodd" />
</svg>
</div>
<span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Today</span>
</div>
<div className="group flex flex-row items-center">
<div className="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7 flex-none">
<path fillRule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clipRule="evenodd" />
</svg>
</div>
<span className="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Upcoming</span>
</div>
<div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
<path fillRule="evenodd" d="M19.5 21a3 3 0 003-3V9a3 3 0 00-3-3h-5.379a.75.75 0 01-.53-.22L11.47 3.66A2.25 2.25 0 009.879 3H4.5a3 3 0 00-3 3v12a3 3 0 003 3h15zm-6.75-10.5a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V10.5z" clipRule="evenodd" />
</svg>
</div>
<div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
<path fillRule="evenodd" d="M7.502 6h7.128A3.375 3.375 0 0118 9.375v9.375a3 3 0 003-3V6.108c0-1.505-1.125-2.811-2.664-2.94a48.972 48.972 0 00-.673-.05A3 3 0 0015 1.5h-1.5a3 3 0 00-2.663 1.618c-.225.015-.45.032-.673.05C8.662 3.295 7.554 4.542 7.502 6zM13.5 3A1.5 1.5 0 0012 4.5h4.5A1.5 1.5 0 0015 3h-1.5z" clipRule="evenodd" />
<path fillRule="evenodd" d="M3 9.375C3 8.339 3.84 7.5 4.875 7.5h9.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V9.375zm9.586 4.594a.75.75 0 00-1.172-.938l-2.476 3.096-.908-.907a.75.75 0 00-1.06 1.06l1.5 1.5a.75.75 0 001.116-.062l3-3.75z" clipRule="evenodd" />
</svg>
</div>
<div className="flex flex-none items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
<path fillRule="evenodd" d="M5.478 5.559A1.5 1.5 0 016.912 4.5H9A.75.75 0 009 3H6.912a3 3 0 00-2.868 2.118l-2.411 7.838a3 3 0 00-.133.882V18a3 3 0 003 3h15a3 3 0 003-3v-4.162c0-.299-.045-.596-.133-.882l-2.412-7.838A3 3 0 0017.088 3H15a.75.75 0 000 1.5h2.088a1.5 1.5 0 011.434 1.059l2.213 7.191H17.89a3 3 0 00-2.684 1.658l-.256.513a1.5 1.5 0 01-1.342.829h-3.218a1.5 1.5 0 01-1.342-.83l-.256-.512a3 3 0 00-2.684-1.658H3.265l2.213-7.191z" clipRule="evenodd" />
<path fillRule="evenodd" d="M12 2.25a.75.75 0 01.75.75v6.44l1.72-1.72a.75.75 0 111.06 1.06l-3 3a.75.75 0 01-1.06 0l-3-3a.75.75 0 011.06-1.06l1.72 1.72V3a.75.75 0 01.75-.75z" clipRule="evenodd" />
</svg>
</div>
</div>
<div className="flex flex-col space-y-2 p-2 items-center">
<div
onClick={() => {
currentTheme == "dark" ? setTheme("light") : setTheme("dark");
}}
className="flex items-center justify-center w-10 h-10 bg-gray-600 text-white rounded-md cursor-pointer hover:bg-gray-50 hover:text-black"
>
{currentTheme == "light" ? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
<path fillRule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clipRule="evenodd" />
</svg>
)}
</div>
</div>
</div>
</div>
</div>

It's just missing a position: relative; on the parent divs :
<div class="group flex flex-row items-center relative">
...
</div>
<div class="h-32 overflow-x-scroll">
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
<div class="group flex flex-row items-center relative">
<div class="flex items-center justify-center flex-none w-10 h-10 bg-gray-600 text-white rounded-md hover:bg-gray-50 hover:text-black cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-7 h-7 flex-none">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<span class="hidden group-hover:block absolute px-2 py-1 leading-tight ml-12 bg-black rigth-0 text-white rounded-md z-50">Create</span>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>

file upload not show up the dialog in html

I have built a file upload in html but clicking the html element doesn't show up the upload dialog, have no idea why is it?
<div class="flex flex-col my-1">
<div tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</div>
</div>

You can associate a label with an input elsewhere in the code, by assigning an id to the input tag, and referencing that id in the for attribute of the label. Or you can wrap an input tag with the label element, and it will do the same
For eg:
<input id="fileUpload" style="display:none">
...
...
Some Code
...
...
<label for="fileUpload">Upload File</label>
In your case, you can opt for the second option. Instead of wrapping the hidden input element in a div element wrap it in a label element. That will allow you to trigger the input inside the label when any point in the label is clicked.
<div class="flex flex-col my-1">
<!-- Changed this from div to label. Also added a style of cursor:pointer -->
<label tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4" style="cursor:pointer">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</label>
</div>

How to align the circles in a single line?

I am trying to make add the circles using the Tailwind Grid system. For the 5 option, it works fine but if I add 1 more circle the style collapse. I want to add a new Circle on the start name as None. How can I fix the styling?
Here is the Output:
https://play.tailwindcss.com/sgDu7UoViA
Should be like this:
Code:
.svg {
fill: currentColor;
height: auto;
max-width: 66vmin;
transform-origin: center;
width: 135px;
}
<div class="bg-gray-200 p-4 mt-2 text-black items-center flex grid grid-cols-5 gap-x-4 gap-y-8 sm:grid-cols-5 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5 "> None </span>
<label class="rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<span aria-hidden="true" class="mt-6 cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full" alt="">
</span>
<input type="radio" name="botanicals" data-id="botanicals" class="sr-only">
</label>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5 "> Rosehip Oil </span>
<label data-id="Rosehip Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute rosehip_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full" alt="">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Rosehip Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Marula Oil </span>
<label data-id="Marula Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute hidden hidden marula_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Marula Oil" data-id="default_oil" value="Marula Oil_10" class="sr-only">
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Marula Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Argan Oil </span>
<label data-id="Argan Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute hidden argan_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Argan Oil" data-id="default_oil" value="Argan Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Argan Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Jajoba Oil </span>
<label data-id="Jajoba Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute Jajoba_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style="transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Jajoba Oil" data-id="default_oil" value="Jajoba Oil_10" class="sr-only">
<div class="oil_label_checked_icon absolute inset-x-0 top-0 transform translate-y-px hidden">
<div class="flex justify-center transform -translate-y-1/2">
<svg class=" h-6 w-6 text-green-600 ml-10 mt-20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
</div>
</label>
<div class="info_icon oil_info_icon absolute z-9 bottom-0" data-id="Jajoba Oil">
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black -mt-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class="absolute text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</div>
<div class="relative h-full flex justify-center items-center">
<span class="absolute top-0 text-xs sm:text-sm font-medium text-black text-center mb-5"> Almond Oil </span>
<label data-id="Almond Oil" class="p-0.5 rounded-full flex flex-col items-center justify-center focus:outline-none ring-pink-500">
<svg class="svg absolute Almond_recommended_svg" viewBox="0 0 100 100" width="100" height="100" style="z-index: -1;" >
<defs>
<path id="circle"
d="
M 50, 50
m -37, 0
a 37,37 0 1,1 74,0
a 37,37 0 1,1 -74,0"/>
</defs>
<text font-size="11" style=" transform: rotate(-55deg); transform-origin: center;">
<textPath xlink:href="#circle" class="text-black versailles ">
Recommendation based on your skin goals
</textPath>
</text>
</svg>
<span aria-hidden="true" class="mt-16 oil_label cursor-pointer h-24 w-24 border-opacity-10 rounded-full z-9">
<img src="https://selection-app.netlify.app/assets/thumbnails/Rosehip.png" class="rounded-full">
</span>
<input type="radio" name="default_oil" data-title="Almond Oil" data-id="default_oil" value="Almond Oil_10" class="sr-only">
<div class="info_icon oil_info_icon z-9" data-id="Almond Oil">
<div class="flex justify-center transform -translate-y-4 ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black mt-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<span class=" text-xs sm:text-sm font-medium text-black bottom-0 mt-2"> Smooth </span>
</label>
</div>
</div>

Change your code to this. Then let me know.
#media (max-width: 639px) {
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
<div class="bg-gray-200 p-4 mt-2 text-black items-center grid grid-cols-6 gap-x-4 gap-y-8 sm:grid-cols-6 sm:gap-x-6 lg:grid-cols-6 xl:gap-x-8" style="background-color: rgba(255,255,255,.08);">

Tailwind css popup shows underneath icon

I am building a data-table using tailwindcss the functionality works fine but I have a small issue that the sorting icon (asc, desc) is appearing on top of the action popup:
HTML code for bulk action:
<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute mt-2 origin-top-right right-0 rounded-md shadow-lg w-56">
<div class="rounded-md bg-white shadow-xs" style="
z-index: 100;
">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2" wire:click="exportSelected" role="menuitem">
<svg class="inline-block w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
<span>Export</span>
</button>
<button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center space-x-2" wire:click="showDeleteModal()" role="menuitem">
<svg class="inline-block w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
<span>Delete</span>
</button>
</div>
</div>
</div>
The status html code:
<button wire:click="sortBy('status')" class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">
<span>Status</span>
<span class="relative flex items-center">
<svg class="w-3 h-3 group-hover:opacity-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
</svg>
<svg class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</span>
</button>
I tried to use z-index but didn't work.
Please advice,

This sure does appear to be a z-index issue. When you inspect using the browser dev console look for z-index declarations on the icon and the menu.
Try adding class z-0 (Tailwind z-index) to this line:
<button wire:click="sortBy('status')" class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">
After adding z-0:
<button wire:click="sortBy('status')" class="z-0 flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline">
You can also try adding z-50 to the menu like this (way at the end):
<div x-show="open" x-description="Dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute mt-2 origin-top-right right-0 rounded-md shadow-lg w-56 z-50">

How to add heading section before sidebar with tailwind css

I am using Tailwind CSS and creating an HTML component for the first time and I found one admin template and now I want to add Heading Section before the sidebar which can be visible every time and the sidebar start after Heading Section.
I am not able to achieve with HTML so can someone help me with this HTML.
HTML:
openSidebar = (flag) => {
let sidebar = document.getElementById("sidebar");
flag ? sidebar.classList.add("hidden") : sidebar.classList.remove("hidden");
};
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div style="min-height: 1100px">
<div onclick="openSidebar(false)" class="flex items-center justify-center rounded-r-md bg-gray-800 text-gray-300 ml-0 cursor-pointer absolute inset-0 mt-10 m-auto w-8 h-8">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="9 6 15 12 9 18" />
</svg>
</div>
<div id="sidebar" class="overflow-y-scroll lg:overflow-y-auto fixed lg:sticky h-screen lg:h-auto z-40 top-0 bg-gray-900 pt-10 w-64 lg:w-72">
<div class="px-8">
<div class="flex items-center justify-between">
<div class="w-32">
<img class="w-full" src="https://cdn.tuk.dev/assets/components/todos/logo.png" alt="quicklist logo" />
</div>
<div onclick="openSidebar(true)" class="text-gray-700 ml-8 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<polyline points="15 6 9 12 15 18"></polyline>
</svg>
</div>
</div>
<ul class="my-10 flex flex-wrap">
<li class="w-1/2 flex justify-start mb-6">
<a href="javascript:void(0)" class="bg-gray-700 rounded-md text-gray-300 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-kanban" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="4" x2="20" y2="4"></line>
<rect x="4" y="8" width="6" height="12" rx="2"></rect>
<rect x="14" y="8" width="6" height="6" rx="2"></rect>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">kanban</p>
</a>
</li>
<li class="w-1/2 flex justify-end mb-6">
<a href="javascript:void(0)" class="bg-transparent rounded-md text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-inbox" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
<path d="M4 13h3l3 3h4l3 -3h3"></path>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">inbox</p>
</a>
</li>
<li class="w-1/2 flex justify-start mb-6">
<a href="javascript:void(0)" class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notebook" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"></path>
<line x1="13" y1="8" x2="15" y2="8"></line>
<line x1="13" y1="12" x2="15" y2="12"></line>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">notebook</p>
</a>
</li>
<li class="w-1/2 flex justify-end mb-6">
<a href="javascript:void(0)" class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-event" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">calendar</p>
</a>
</li>
<li class="w-1/2 flex justify-start">
<a href="javascript:void(0)" class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z"></path>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">important</p>
</a>
</li>
<li class="w-1/2 flex justify-end">
<a href="javascript:void(0)" class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-stack" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<polyline points="12 4 4 8 12 12 20 8 12 4"></polyline>
<polyline points="4 12 12 16 20 12"></polyline>
<polyline points="4 16 12 20 20 16"></polyline>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">projects</p>
</a>
</li>
</ul>
<div class="flex items-center justify-between text-gray-600">
<h4 class="uppercase font-semibold">List</h4>
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-plus" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<ul class="text-gray-600 mt-8">
<li class="mb-5">Grocery Items</li>
<li class="mb-5">Family</li>
<li>Friends</li>
</ul>
<div class="my-20">
<div class="flex items-center justify-between text-gray-600">
<h4 class="uppercase font-semibold">Labels</h4>
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-plus" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<ul class="text-gray-600 mt-8">
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-indigo-600"></span>
Work Related
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-yellow-600"></span>
Family
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-green-500"></span>
Friends
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-purple-600"></span>
Grocery
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-blue-600"></span>
Utilities
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-pink-600"></span>
Rental
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-red-600"></span>
Maintenance
</li>
</ul>
</div>
</div>
<div class="px-8 py-4 w-full border-t border-gray-800 flex items-center text-gray-600 uppercase text-xs">
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-trash" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="7" x2="20" y2="7"></line>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
</svg>
<p class="cursor-pointer pl-2">trash</p>
</div>
</div>
</div>

Is this what you want?
<div class="w-full bg-gray-300">
<h1 class="text-7xl text-white text-center">HEADING AREA</h1>
</div>
<div style="min-height: 1100px">
<div onclick="openSidebar(false)"
class="flex items-center justify-center rounded-r-md bg-gray-800 text-gray-300 ml-0 cursor-pointer absolute inset-0 mt-10 m-auto w-8 h-8">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="28" height="28"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="9 6 15 12 9 18" />
</svg>
</div>
<div id="sidebar"
class="overflow-y-scroll lg:overflow-y-auto fixed lg:sticky h-screen lg:h-auto z-40 top-0 bg-gray-900 pt-10 w-64 lg:w-72">
<div class="px-8">
<div class="flex items-center justify-between">
<div class="w-32">
<img class="w-full" src="https://cdn.tuk.dev/assets/components/todos/logo.png" alt="quicklist logo" />
</div>
<div onclick="openSidebar(true)" class="text-gray-700 ml-8 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="32"
height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<polyline points="15 6 9 12 15 18"></polyline>
</svg>
</div>
</div>
<ul class="my-10 flex flex-wrap">
<li class="w-1/2 flex justify-start mb-6">
<a href="javascript:void(0)"
class="bg-gray-700 rounded-md text-gray-300 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-kanban" width="28"
height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="4" x2="20" y2="4"></line>
<rect x="4" y="8" width="6" height="12" rx="2"></rect>
<rect x="14" y="8" width="6" height="6" rx="2"></rect>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">kanban</p>
</a>
</li>
<li class="w-1/2 flex justify-end mb-6">
<a href="javascript:void(0)"
class="bg-transparent rounded-md text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-inbox" width="20" height="20"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
<path d="M4 13h3l3 3h4l3 -3h3"></path>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">inbox</p>
</a>
</li>
<li class="w-1/2 flex justify-start mb-6">
<a href="javascript:void(0)"
class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-notebook" width="20"
height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"></path>
<line x1="13" y1="8" x2="15" y2="8"></line>
<line x1="13" y1="12" x2="15" y2="12"></line>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">notebook</p>
</a>
</li>
<li class="w-1/2 flex justify-end mb-6">
<a href="javascript:void(0)"
class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-event" width="20"
height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">calendar</p>
</a>
</li>
<li class="w-1/2 flex justify-start">
<a href="javascript:void(0)"
class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="20" height="20"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path
d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z">
</path>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">important</p>
</a>
</li>
<li class="w-1/2 flex justify-end">
<a href="javascript:void(0)"
class="rounded-md bg-transparent text-gray-600 flex flex-col justify-center items-center w-20 h-20 p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-stack" width="20" height="20"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<polyline points="12 4 4 8 12 12 20 8 12 4"></polyline>
<polyline points="4 12 12 16 20 12"></polyline>
<polyline points="4 16 12 20 20 16"></polyline>
</svg>
<p class="mt-1 uppercase font-semibold text-xs">projects</p>
</a>
</li>
</ul>
<div class="flex items-center justify-between text-gray-600">
<h4 class="uppercase font-semibold">List</h4>
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-plus" width="20"
height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<ul class="text-gray-600 mt-8">
<li class="mb-5">Grocery Items</li>
<li class="mb-5">Family</li>
<li>Friends</li>
</ul>
<div class="my-20">
<div class="flex items-center justify-between text-gray-600">
<h4 class="uppercase font-semibold">Labels</h4>
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-plus" width="20"
height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</div>
<ul class="text-gray-600 mt-8">
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-indigo-600"></span>
Work Related
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-yellow-600"></span>
Family
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-green-500"></span>
Friends
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-purple-600"></span>
Grocery
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-blue-600"></span>
Utilities
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-pink-600"></span>
Rental
</li>
<li class="mb-5 flex items-center">
<span class="mr-2 w-2 h-2 rounded-full bg-red-600"></span>
Maintenance
</li>
</ul>
</div>
</div>
<div class="px-8 py-4 w-full border-t border-gray-800 flex items-center text-gray-600 uppercase text-xs">
<svg xmlns="http://www.w3.org/2000/svg" class="cursor-pointer icon icon-tabler icon-tabler-trash" width="18"
height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="7" x2="20" y2="7"></line>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
</svg>
<p class="cursor-pointer pl-2">trash</p>
</div>
</div>
</div>