convert this html and css to html with tailwind CSS classes, make sure it's literally the same styles and provide the complete code:

<style>
:root {
--main-color: #000;
--white: white;
--black: black;
--primary-color: #18242e;
--blue: rgb(0, 98, 255);
--blue-simple: rgb(225, 232, 255);
--green: rgb(127, 255, 127);
--gray-1: #111;
--gray-2: #222;
--gray-3: #333;
--gray-4: #444;
--gray-5: #555;
--gray-6: #666;
--gray-7: #777;
--gray-8: #888;
--gray-9: #999;
--light-1: hsl(0, 0%, 70%);
--light-1-5: hsl(0, 0%, 75%);
--light-2: hsl(0, 0%, 80%);
--light-2-5: hsl(0, 0%, 85%);
--light-3: hsl(0, 0%, 90%);
--light-3-5: hsl(0, 0%, 95%);
--yellow: rgba(255, 255, 75, 0.5);
}    /*! CSS Used from: http://127.0.0.1:8080/css/global.css */
*,::after,::before{transition:all 0.1s;box-sizing:border-box;}
b{font-weight:bold;}
hr{box-sizing:content-box;height:0;overflow:visible;width:100%;border-color:var(--light-2-5);border-style:solid;border-width:0.01px;}
a{background-color:transparent;}
img{border-style:none;max-width:100%;}
button,input,select{font-family:inherit;font-size:100%;margin:0;}
button,input{overflow:visible;}
button,select{text-transform:capitalize;}
button,[type="submit"]{-webkit-appearance:button;}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}
#loader{width:100vw;height:100vh;background-color:var(--light-3-5);z-index:1000000;position:fixed;top:0;left:0;}
.loader-span{width:80px;height:80px;border-top-width:0.75rem;border-color:var(--gray-8);border-style:solid;border-radius:50%;top:50%;left:50%;position:absolute;transform:translate(-50%, -50%);animation:ease-in-out loader infinite 1s alternate;}
body ::-webkit-scrollbar{width:9px;height:9px;}
body ::-webkit-scrollbar-thumb{background-color:var(--light-1);border-radius:10px;}
body ::-webkit-scrollbar-thumb:hover{background-color:var(--gray-9);}
body ::-webkit-scrollbar-thumb:active{background-color:var(--gray-8);}
body ::-webkit-scrollbar-corner{background-color:transparent;}
a{text-decoration:none;text-underline-offset:2px;color:inherit;cursor:pointer;}
[onclick]{cursor:pointer;}
span[onclick]:hover{opacity:0.9;}
span[onclick]:active{opacity:0.8;}
button{cursor:pointer;}
option{background-color:var(--light-3-5);color:var(--gray-1);}
img{vertical-align:middle;}
button{border:none;background-color:transparent;}
select{background:url("http://127.0.0.1:8080/icons/drop-down.svg") no-repeat calc(100% - 10px);-moz-appearance:none!important;-o-appearance:none!important;-webkit-appearance:none!important;appearance:none!important;padding-right:28px!important;padding-left:8px!important;}
select,input[type="search"]{border-radius:6px;width:100%;padding:12px;background-color:var(--light-3-5);}
input:focus{outline-color:rgb(0, 0, 0)!important;border-color:rgb(0, 0, 0)!important;}
a:hover{text-decoration:underline;}
a[href="#"]:hover{text-decoration:none!important;}
.border-bottom{border-width:0px 0 2px 0;border-color:var(--gray-6);border-style:solid;border-radius:4px;}
fw{right:-22px;position:absolute;}
a fw{right:30px;}
img,fw,ri{user-select:none;}
fw,ri{pointer-events:none;}
a:hover fw{right:20px;}
ri{margin:0 0 0 8px;}
a:hover ri{margin:0 0 0 16px;}
[src*="/icons/"]:not([src*="drop-down.svg"]){min-width:1.25rem;min-height:1.25rem;pointer-events:none;}
[src*="drop-down.svg"]{width:0.88rem;}
.invert{filter:invert(1)!important;}
.seller{background-color:var(--light-2-5);padding:16px;border-radius:25%;width:72px!important;height:auto!important;margin-right:8px;}
body > div{flex:1;}
header{z-index:9;width:100%;position:sticky;top:-55px;}
.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;color:var(--white);padding:8px;background-color:var(--main-color);transition:top 0.25s;}
.header > div:first-child{margin:0;white-space:nowrap;align-items:baseline;}
.location-header{z-index:100;display:flex;justify-content:space-evenly;cursor:pointer;flex:0 1 100px;margin:0 0 0 6px;}
.location-header a{display:block;background-color:var(--light-3);border-bottom:solid 2px var(--light-1);margin:1px;padding:8px;border-radius:4px;color:initial;}
.location-header a:hover{background-color:var(--light-2-5);text-decoration:none;}
.header-hamburger{display:flex;align-items:center;height:0;}
.header-hamburger a ~ span{margin:0 8px 0;font-size:3.5rem;cursor:pointer;}
.hamburger-menu{font-weight:bold;overflow-x:hidden;overflow-y:auto;display:none;position:fixed;color:var(--gray-1);background-color:var(--light-3-5);height:100vh;z-index:100;right:0;top:0;padding:16px;animation:ease-in-out right 0.4s;box-shadow:0 0 42px 16px rgba(0, 0, 0, 0.5);will-change:scroll-position;}
.hamburger-menu > a:not(.btn):hover{background-color:var(--light-3);border-radius:4px;}
.hamburger-menu > a:not(.btn):active{background-color:var(--light-2-5);}
.hamburger-menu .listen-seller{margin:8px 0 24px 0;flex-wrap:initial;}
.hamburger-menu .listen-seller a{padding:0;}
.hamburger-menu a{display:flex;align-items:center;text-decoration:none;padding:8px;}
.hamburger-menu img{width:1.6rem;height:1.6rem;margin:0 12px 0 0;}
.hamburger-menu a:last-child{margin-top:8px;color:var(--blue);}
.location-header > div{user-select:none;position:relative;}
.search-top{display:flex;align-items:center;justify-content:space-evenly;width:100%;margin:6px 0 0;padding:4px;background-color:var(--gray-3);border-radius:8px;}
.selectCategory{min-width:76px;max-width:27.5vw;width:42px;color:var(--white);padding:8px 0;outline:none;border:none;background-color:inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-header{height:42px;box-shadow:inset 0 0 1px 1px var(--black);border-radius:8px!important;font-size:1.2rem;}
.search-result{display:none;padding:4px;background-color:var(--light-3-5);position:absolute;top:15px;text-indent:4px;border-radius:4px;box-shadow:0px 50vh 10px 50vh rgba(0, 0, 0, 0.5);width:100%;top:42px;z-index:1;}
.search-header-res{flex:1 100%;position:relative;}
div.header-map{animation:ease-in-out open-down 0.4s;height:240px;width:186px;transform:translate(-27.5%, 7.5%);overflow-x:hidden;cursor:default;box-shadow:0px 4px 6px 0px rgba(0, 0, 0, 0.25);background-color:var(--light-3-5);position:absolute;padding:8px;border-radius:8px;display:none;z-index:99;top:20px;}
span.header-map{top:20px;right:2px;position:absolute;display:none;border-width:10px;border-color:transparent transparent var(--light-3-5) transparent;border-style:solid;}
.my-chat{position:relative;}
@media only screen and (min-width: 768px){
header{top:0;}
.search-top{margin:0 16px;flex:1 0;order:2;}
.header-hamburger{order:3;}
}
@media only screen and (min-width: 992px){
.header{gap:16px;padding-left:32px;padding-right:32px;}
.search-top{margin:0;}
.header-hamburger{order:4;}
.hamburger-menu{font-size:1.1rem;width:24%;max-width:460px;}
.sign-in-header{display:none!important;}
.location-header{margin:0 0 0 8px;}
}
.sign-in-header{display:none;}
@media only screen and (min-width: 308px){
.sign-in-header{display:flex;align-items:center;text-decoration:none;}
}
@media only screen and (max-width: 992px){
body ::-webkit-scrollbar{width:4px;height:4px;}
}
.listen-seller{margin:24px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.listen-seller a{color:var(--blue);font-weight:bold;}
.none{display:none;}
.flex{display:flex!important;}
/*! CSS Used from: http://127.0.0.1:8080/css/nav-comp.css */
nav{z-index:6;display:flex;background-color:var(--gray-2);color:var(--white);font-size:0.95rem;justify-content:space-evenly;position:relative;padding:8px;transition:top 0.25s;position:sticky;}
.nav-links{font-weight:normal;animation:ease-in-out top 0.4s;z-index:100;display:none;position:absolute;width:100%;top:100%;box-shadow:0px 4px 6px 0px rgba(0, 0, 0, 0.25);line-height:1.5;left:0;background-color:var(--gray-3);padding:8px 24px;gap:8px;flex-wrap:wrap;}
.nav-links>div{flex:1;white-space:nowrap;border:1px solid var(--gray-6);border-radius:8px;padding:8px 16px 8px;}
.nav-links :not(:nth-of-type(1)) a:last-child{padding-top:4px;border-top:2px solid var(--gray-6);}
.nav-links div div{line-height:2;margin:0 16px;padding-top:4px;}
.nav-links a{display:block;}
.nav-links > div> a{font-weight:bold;font-size:1rem;}
.jobs{display:flex;justify-content:flex-end;}
.jobs a:not(:first-child){display:block;padding:8px;}
.jobs a:not(:first-child):hover{background-color:var(--gray-3);border-radius:4px;}
.jobs>div{margin-top:16px;box-shadow:0px 4px 6px 0px rgba(0, 0, 0, 0.25);padding:8px 4px 4px;border-radius:8px;}
nav .click-show{display:none;position:absolute;}
nav .parent-click:hover .click-show{display:block;}
nav .parent-click .click-show a{text-decoration:none;display:block;padding:8px;}
nav .parent-click .click-show a:hover{background-color:var(--gray-3);border-radius:4px;}
nav .parent-click .click-show{background-color:var(--gray-2);border-width:0px 0 2px 0;border-color:var(--gray-6);border-style:solid;z-index:103;padding:4px;padding-top:8px;border-radius:8px;box-shadow:0px 4px 6px 0px rgba(0, 0, 0, 0.25);}
nav div{padding:0 8px;}
.parent-click div a:first-child,.nav-links div div a:first-child{display:none!important;}
#nav{text-align:center;}
#nav a:not(#nav>div >a){text-align:initial;}
</style>
<div><div id="loader" class="none">
<div class="loader-span"></div>
</div>
<header class="header">
<div class="flex">
<a href="/">
<img alt="Home" width="46" src="/images/android-chrome-192x192.png">
</a>
<div title="Pick a Spot" onclick="toggle('.header-map','block');" class="location-header">
<div>
<img alt="" width="24" class="invert" src="/icons/location-ico.svg">
<span>Egypt</span>
<img alt="" src="/icons/drop-down.svg">
<span class="header-map block"></span>
<div class="header-map block">
<a id="cairo" href="/ads/?location=cairo">Cairo<fw>❭</fw></a>
</div>
</div>
</div>
</div>
<div onmouseleave="remove('.hamburger-menu', 'block');add('.hamburger-menu', 'none')" class="header-hamburger">
<a onclick="toggle('.log', 'flex')" href="#" class="sign-in-header none">
<span>Sign In ›</span>
<img alt="" data-src="/icons/pngkey.com-user-png-729670.svg" class="invert" width="36">
</a>
<span onclick="toggle('.hamburger-menu', 'block')">≡</span>
<form method="POST" class="hamburger-menu">
<div class="listen-seller">
<img alt="" data-src="/icons/pngkey.com-user-png-729670.svg" class="seller">
<div>
<b>Welcome<span id="welName"></span>.</b>
<a href="/mysettings/">My Settings<ri>❭</ri></a>
</div>
</div>
<hr>
<a href="/sell">
<img alt="" data-src="/icons/camera.svg">
Sell Now
</a>
<a href="/myfavorites">
<img alt="" data-src="/icons/heart.svg">
My Favorites
</a>
<a href="/mysearches">
<img alt="" data-src="/icons/search.svg">
My Searches
</a>
<a href="/myads">
<img alt="" data-src="/icons/rectangle-list.svg">
My Ads
</a>
<a href="/chat" class="my-chat">
<img alt="" data-src="/icons/chat-square-dots.svg">
My Chats
</a>
<a href="/help">
<img alt="" data-src="/icons/info-circle.svg">
Help
</a>
<hr>
<a id="lang" href="?lang=%7B%7B-lang%27-%3D%3D%3D-%27ar%27-%3F-%27en%27-%3A-%27ar%27-%3F%3E"><img data-src="/icons/globe.svg" alt="Language"><b>{{ lang') === 'AR' ? 'EN' : 'AR' ?&gt;</b></a>
<hr>
<!--?= $logIn ?-->
</form>
</div>
<div class="search-top">
<select title="Pick a Category" class="selectCategory">
<option value="all">All</option>
<option value="vehicles">Vehicles</option>
<option value="properties">Properties</option>
<option value="mobiles-tablets">Phones &amp; Tablets</option>
<option value="electronics-appliances">
Electronics &amp; Appliances
</option>
<option value="furniture-decor">Furniture &amp; Home Decor</option>
<option value="business-industrial-agriculture">
Business, Industrial &amp; Farming
</option>
<option value="books-sports-hobbies">Books, Sports &amp; Hobbies</option>
<option value="pets-accessories">Pets &amp; Accessories</option>
<option value="kids-babies">Kids &amp; Babies</option>
<option value="fashion-beauty">Phones &amp; Tablets</option>
<option value="services">Services</option>
<option value="jobs">Jobs</option>
</select>
<div class="search-header-res">
<input type="search" name="search" placeholder="Looking for something?" autocomplete="off" class="search-header">
<div class="search-result trend-result"></div>
</div>
<button type="submit" id="search" title="Search">
<img width="32" class="invert" alt="Search" style="max-width: 28px" src="/icons/search.svg">
</button>
</div>
<!--?= $error ?-->
<!--?= $signIn ?-->
<!--?= $sell ?-->
</header>
<nav id="nav" style="top: 65px;">
<div onclick="toggle('.nav-links', 'flex');">
<a>☰ More</a>
</div>
<div class="parent-click">
<a href="/ads/?category=vehicles">Vehicles</a>
<div class="click-show">
<a href="/ads/?category=vehicles">All In Vehicles<ri>»</ri></a></div>
</div>
<div class="parent-click">
<a href="/ads/?category=properties">Properties</a>
<div class="click-show">
<a href="/ads/?category=properties">All In Properties<ri>»</ri></a>
</div>
</div>
<div class="parent-click">
<a href="/ads/?category=mobiles-tablets">Phones &amp; Tablets</a>
<div class="click-show">
<a href="/ads/?category=mobiles-tablets">All In Phones &amp; Tablets<ri>»</ri></a>
</div>
</div>
<div class="parent-click">
<a href="/ads/?category=electronics-appliances">Electronics &amp; Appliances</a>
<div class="click-show">
<a href="/ads/?category=electronics-appliances">All In Electronics &amp; Appliances<ri>»</ri></a>
</div>
</div>
<div class="parent-click">
<a href="/ads/?category=furniture-decor">Furniture &amp; Home Decor</a>
<div class="click-show">
<a href="/ads/?category=furniture-decor">All In Furniture &amp; Home Decor<ri>»</ri></a>
</div>
</div>
<div class="parent-click">
<a href="/ads/?category=business-industrial-agriculture">Business, Industrial &amp; Farming</a>
<div class="click-show">
<a href="/ads/?category=business-industrial-agriculture">All In Business, Industrial &amp; Farming
<ri>»</ri>
</a>
</div>
</div>
<div class="jobs parent-click">
<a href="/ads/?category=jobs">Jobs</a>
<div class="click-show border-bottom">
<a href="/ads/?category=jobs">All In Jobs<ri>»</ri></a>
<a class="border-bottom" href="/ads/?category=jobs&amp;subcategory=workers-technicians">Skilled Trades &amp; Technicians</a>
<a href="/ads/?category=jobs&amp;subcategory=other-job">Other Jobs</a>
</div>
</div>
<div class="nav-links border-y top block-a">
<div>
<a href="/ads/?category=fashion-beauty">Fashion &amp; Beauty</a>
<div>
<a href="/ads/?category=fashion-beauty">All In Fashion &amp; Beauty<ri>»</ri></a></div>
</div>
<div>
<a href="/ads/?category=pets-accessories">Pets &amp; Accessories</a>
<div>
<a href="/ads/?category=pets-accessories">All In Pets &amp; Accessories<ri>»</ri></a></div>
</div>
<div>
<a href="/ads/?category=kids-babies">Kids &amp; Babies</a>
<div>
<a href="/ads/?category=kids-babies">All In Kids &amp; Babies<ri>»</ri></a>
</div>
</div>
<div>
<a href="/ads/?category=services">Services</a>
<div>
<a href="/ads/?category=services">All In Services<ri>»</ri></a>
</div>
</div>
<div>
<a href="/ads/?category=books-sports-hobbies">Books, Sports &amp; Hobbies</a>
<div>
<a href="/ads/?category=books-sports-hobbies">All In Books, Sports &amp; Hobbies<ri>»</ri></a>
</div>
</div>
</div>
</nav>
</div>