Setting seperator clip path ( polygon ) responsive - html

I'm pretty new to clip paths with css, but what im trying to do it make a clip path separator for 2 background colors. I tried to look up if someone already did something similar but i didn't find it. I'm using Tailwindcss and just regulair CSS with HTML
This is how far I got so far :
Codepen
Code:
<div class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 w-full ">
<div class="grid grid-cols-1 md:grid-cols-3 ">
<div class="py-12 px-4">
<h3 class="text-2xl text-white font-bold">Lorum ipsum</h3>
<p class="text-white mt-4">Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum</p>
</div>
<div class="py-12 px-4 z-10 flex items-center">
<ul class="mx-auto space-y-4 text-white text-xl">
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
</ul>
</div>
<div class="py-12 px-4 z-10 flex items-center">
<ul class=" mx-auto space-y-4 text-white text-xl">
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Lorum ipsum
</li>
</ul>
</div>
</div>
</div>
<div class=" hidden md:flex absolute h-full w-3/5 top-0 right-0 bg-yellow-300 " style="clip-path: polygon(0 100%, 100% 100%, 100% 0, 5% 0%); -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 5% 0%);"></div>
My problem now is thats its not responsive. You can see the text overlapping once you go down in screen resolution.
Can someone give me a bit of directions on where to go from here? I'm not sure if I'm going the right direction or if my code needs to change completely.
This is the result im trying to achieve


The problem is that the aspect ratio of the whole changes with different viewports/devices so the % measurements needed to maintain the same angle of slope change and would require some calculation (e.g. in JS) to maintain.
One alternative is to use a feature in CSS where it will maintain a slope. That is linear-gradient.
This snippet introduces two new classes. bgSlope paints a background with a slope and bgDual ensures that the yellow color extends right across the parent element, however much the overall width compared to the centered content.
Of course, there will have to be some alteration when the viewport gets so narrow that the second two columns move beneath, otherwise you'll get a funny angle, but I don't know what you want to do anyway with the coloring on a narrow device.
<html>
<head>
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<style>
.bgSlope {
background-image: linear-gradient(-60deg, rgba(252, 211, 77) 62.5%, transparent 62.5% 100%);
}
.bgDual {
background-image: linear-gradient(to right, rgba(209, 213, 219) 0 70%, rgba(252, 211, 77) 70% 100%);
}
</style>
</head>
<body>
<div class="w-full relative bgDual">
<div class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 w-full ">
<div class="grid grid-cols-1 md:grid-cols-3 bgSlope">
<div class="py-12 px-4">
<h3 class="text-2xl text-white font-bold">Lorum ipsum</h3>
<p class="text-white mt-4">Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum</p>
</div>
<div class="py-12 px-4 z-10 flex items-center">
<ul class="mx-auto space-y-4 text-white text-xl">
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
</ul>
</div>
<div class="py-12 px-4 z-10 flex items-center">
<ul class=" mx-auto space-y-4 text-white text-xl">
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
<li class="flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> Lorum ipsum
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

Related

How do i get my sticky navbar to work using tailwind css?

I am working on a website using tailwindcss. But for some reason the navbar wont work when using the "sticky" class. I tried using the "fixed" class instead, but that did not work with the banner. I have also tried to use:
nav {
position: -webkit-sticky;
position: sticky;
}
but it has been usuccessful. I have also used some other css and javascript to style the searchbar how i want it.
How can i get the navbar to always stick?
Here is the code for the nav and the banner:
<div>
<div>
<nav class="sticky w-full md:flex md:justify-between md:items-center md:flex-wrap px-10 md:px-48 bg-gray-200 py-2"> <!--Navigation-->
<div class="flex md:flex justify-between md:items-center"> <!--Title och Burger button-->
<h1 class="text-xl text-emerald-600">
Logo
</h1>
<div class="px-4 mt-1 justify-end cursor-pointer md:hidden" id="burger">
<svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
</div>
<ul class="md:flex md:flex-1 hidden md:justify-around" id="menu">
<li class="text-">
Home
</li>
<li class="">
About
</li>
<li class="">
Products
</li>
</ul>
<div class="input-container"> <!--Searchbar-->
<input id="in" type="search" placeholder="Search for product" class="border-gray-black rounded-md p-0 input-search-field pl-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hero" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<button class="md:pr-5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<div class=""> <!--Login/Signup-->
Log in
Sign up
</div>
</nav>
</div>
<div class="relative w-full container"> <!--Banner-->
<img src="img/Banner.png" alt="">
<button class="btn px-4 py-3 bg-blue-600 rounded-md hover:bg-blue-700 transition ease-in-out">Check our products</button>
</div>
<main class="">
</main>
</div>
The css code i used for the searchbar:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: -webkit-sticky;
position: sticky;
}
.input-search-field::-webkit-search-cancel-button {
-webkit-appearance: none;
border-radius: 20px;
}
.input-search-field[type="search"] {
position: relative;
}
.input-container {
display: flex;
align-items: center;
position: relative;
}
.hero {
width: 15px;
position: absolute;
left: 150px;
cursor: pointer;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Javascript:
var result = document.querySelector('.hero').addEventListener('click', myfunction)
function myfunction() {
var input = document.querySelector('#in').value="";
}
console.log(result);
const burger = document.querySelector('#burger');
const menu = document.querySelector('#menu');
burger.addEventListener('click', () => {
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
} else {
menu.classList.add('hidden');
}
})

You have to give position sticky to div not in nav and also use top:0px;
HTML Code
<div class="sti">
<nav class="sticky w-full md:flex md:justify-between md:items-center md:flex-wrap px-10 md:px-48 bg-gray-200 py-2"> <!--Navigation-->
<div class="flex md:flex justify-between md:items-center"> <!--Title och Burger button-->
<h1 class="text-xl text-emerald-600">
Logo
</h1>
<div class="px-4 mt-1 justify-end cursor-pointer md:hidden" id="burger">
<svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
</div>
<ul class="md:flex md:flex-1 hidden md:justify-around" id="menu">
<li class="text-">
Home
</li>
<li class="">
About
</li>
<li class="">
Products
</li>
</ul>
<div class="input-container"> <!--Searchbar-->
<input id="in" type="search" placeholder="Search for product" class="border-gray-black rounded-md p-0 input-search-field pl-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hero" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<button class="md:pr-5">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<div class=""> <!--Login/Signup-->
Log in
Sign up
</div>
</nav>
</div>
CSS Code
.sti {
position: -webkit-sticky;
position: sticky;
top: 0px;
}

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);">

How to make scrollable sidebar fixed?

I came across the BetterDev sidebar in which, If we add content to it, the sidebar also scrolls. Is there a way to make that sidebar fixed and not scrollable? I tried sticky, corrected with top-0 and left-0, but it didn't work.
<div class="relative min-h-screen md:flex">
<!-- mobile menu bar -->
<div class="bg-gray-800 text-gray-100 flex justify-between md:hidden">
<!-- logo -->
Better Dev
<!-- mobile menu button -->
<button class="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- sidebar -->
<div class="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
<!-- logo -->
<a href="#" class="text-white flex items-center space-x-2 px-4">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
<span class="text-2xl font-extrabold">Better Dev</span>
</a>
<!-- nav -->
<nav>
<a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Home
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
About
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Features
</a>
<a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
Pricing
</a>
</nav>
</div>
<!-- content -->
<div class="flex-1 p-10 text-2xl font-bold">
content goes here
</div>
</div>
Codepen Link of the above code

position:fixed;
left:0px;
a example could be: https://www.w3schools.com/howto/howto_css_fixed_menu.asp
shows a navbar in top but as you can see:
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
All you need to change is from top to left!
if it doesn't works, it could be the body position type, but in that i cannot help u bud.

Tailwind flex-row-reverse doesn't display spacing properly

I'm trying to get two versions of the navbar - one LTR and the other is RTL.
For that I am adding flex-row-reverse to the two necessary divs, but the space between the logo and the search bar disappears.
This is the LTR navbar without flex-row-reverse:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav
class="bg-gray-900 text-white px-4 py-3 flex items-center justify-between"
>
<div class="flex items-center space-x-4">
<a href="#" class="text-white hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</a>
<div class="lg:block relative">
<input
type="text"
class="rounded bg-gray-700 placeholder-white w-72 px-3 py-1"
placeholder="Search or jump to..."
/>
<div class="absolute top-0 right-0 flex items-center h-full">
<div
class="
border border-gray-600
rounded
text-xs text-gray-400
px-2
mr-2
"
>
/
</div>
</div>
</div>
</div>
</nav>
And this is the broken RTL version with no spacing between the logo and the search bar (when using flex-row-reverse):
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav
class="bg-gray-900 text-white px-4 py-3 flex flex-row-reverse items-center justify-between"
>
<div class="flex flex-row-reverse items-center space-x-4">
<a href="#" class="text-white hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</a>
<div class="lg:block relative">
<input
type="text"
class="rounded bg-gray-700 placeholder-white w-72 px-3 py-1"
placeholder="Search or jump to..."
/>
<div class="absolute top-0 right-0 flex items-center h-full">
<div
class="
border border-gray-600
rounded
text-xs text-gray-400
px-2
mr-2
"
>
/
</div>
</div>
</div>
</div>
</nav>

According to tailwind documentation, reference link
If your elements are in reverse order (using say flex-row-reverse or
flex-col-reverse), use the space-x-reverse or space-y-reverse
utilities to ensure the space is added to the correct side of each
element.
So just add the class space-x-reverse in your code like this: Demo
<div class="flex flex-row-reverse items-center space-x-4 space-x-reverse">

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>