convert this html and css into html with tailwind CSS classes, make sure it's literally same:

HTML:

<header class="header" ><div class="flex" ><a href="/" ><img src="/images/android-chrome-192x192.png" alt="Home" width="46" ></a ><div title="Choose A location" onclick="toggle('.header-map','block');" class="location-header" ><div ><img alt="" src="/ico/location-ico.svg" width="24" class="invert" ><span>Egypt</span ><img alt="" src="/ico/drop-down.svg" ><span class="header-map"></span ><div class="header-map" ><a id="cairo" href="/ads/?location=cairo">cairo<fw>❭</fw></a ><a id="giza" href="/ads/?location=giza">giza<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" ><span>sign in ›</span ><img alt="" src="/ico/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="" src="/ico/pngkey.com-user-png-729670.svg" class="seller" ><div ><b>welcome<span id="welName"></span>.</b ><a href="#">My Settings<ri>❭</ri></a ></div ></div ><hr ><a href="#" ><img alt="" src="/ico/camera.svg"> sell now </a ><a href="#" ><img alt="" src="/ico/heart.svg"> My Favorites </a ><a href="#" ><img alt="" src="/ico/search.svg"> My Searches </a ><a href="#" ><img alt="" src="/ico/rectangle-list.svg"> My Ads </a ><a href="#" class="my-chat" ><img alt="" src="/ico/chat-square-dots.svg"> My Chats </a ><a href="/help" ><img alt="" src="/ico/info-circle.svg"> Help </a ><hr ><a id="lang" href="?lang=ar"><img src="/ico/globe.svg" alt="language"><b>AR</b></a ><hr ><a class="btn" href="#">sign in</a><a onclick="toggle('.create-acc', 'flex')">Create an account</a ></form ></div ><div class="search-top" ><select title="choose a category" class="selectCategory" ><option value="all">All</option ><option value="vehicles">Vehicles</option ></select ><div class="search-header-res" ><input type="search" name="search" placeholder="Search For Any Thing..." autocomplete="off" class="search-header" ><div class="search-result trend-result"></div ></div ><button type="submit" id="search" title="Search Now" ><img src="/ico/search.svg" width="32" class="invert" alt="Search" style="max-width: 28px" ></button ></div ><a class="outline-btn sign-in" href="#">sign in</a ><a class="btn sell" href="#">Sell</a></header>


CSS:
/! CSS Used from: https://exxeer.com/css/global.css /
,::after,::before{transition:all 0.1s;box-sizing:border-box;}
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;}
b{font-weight:bold;}
img{border-style:none;}
img{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;}
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("https://exxeer.com/ico/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;}
.btn{min-width:max-content;text-decoration:none!important;padding:8px 16px;border-radius:6px;background-color:var(--light-2);color:rgb(0, 0, 0);font-weight:bold;cursor:pointer;font-size:1.1rem;text-align:center;letter-spacing:0.5px;border-width:0px 0 2px 0;border-color:var(--gray-6);border-style:solid;will-change:contents;}
.btn:hover{opacity:0.95;text-decoration:none;}
.btn:active{border:0;}
.outline-btn{font-weight:bold;border:2px var(--gray-7) solid;padding:8px 16px;border-radius:6px;font-weight:bold;text-decoration:none;color:inherit;text-align:center;}
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="/ico/"]: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;}
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 .btn{background-color:var(--blue);color:var(--white);justify-content:center;margin-top:24px;padding:10px;}
.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;}
.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 screen and (min-width: 768px){
header{top:0;}
.search-top{margin:0 16px;flex:1 0;order:2;}
.header-hamburger{order:3;}
}
@media 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;}
.sign-in,.btn.sell{display:block;order:3;}
.location-header{margin:0 0 0 8px;}
}
.sign-in-header{display:none;}
@media screen and (min-width: 308px){
.sign-in-header{display:flex;align-items:center;text-decoration:none;}
}
@media screen and (max-width: 992px){
body ::-webkit-scrollbar{width:4px;height:4px;}
header .sign-in,header .sell{display:none;}
}
.listen-seller{margin:24px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.listen-seller a{color:var(--blue);font-weight:bold;}
.flex{display:flex!important;}