convert this html and css to html with tailwind, ensure that it's exactly the same and perfect, and output the complete code of it:

<style>
/* START CSS Normalize *//* Universal Selector with Transition and Box-Sizing */*,::after,::before {transition: all 0.1s;box-sizing: border-box;}/* HTML and Body *//* Typography */b {font-weight: bold;}/* Structural Elements */hr {box-sizing: content-box;height: 0;overflow: visible;width: 100%;border-color: var(--light-2-5);border-style: solid;border-width: 0.01px;}/* Text and Link Styling */a {background-color: transparent;}/* Image and Media */img {border-style: none;max-width: 100%;}/* Form Elements */button,input,select {font-family: inherit;font-size: 100%;margin: 0;}button,input {overflow: visible;}button,select {text-transform: capitalize;}button,[type="button"],[type="submit"] {-webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}/* Fieldset and Legend *//* Miscellaneous *//* END CSS css Normalize */@media (prefers-color-scheme: dark) {:root {color-scheme: dark;}}: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);}/* START CSS Loader */#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;}@keyframes loader {to {transform: translate(-50%, -50%) rotate(360deg);}}/* END CSS css Loader *//* START CSS Global Styles */a {text-decoration: none;text-underline-offset: 2px;color: inherit;cursor: pointer;}[onclick] {cursor: pointer;/* transition: opacity 0.1s; */}span[onclick]:hover {opacity: 0.9;}span[onclick]:active {opacity: 0.8;}/* ::selection {color: var(--white);background-color: var(--gray-1);} */button,input[type="submit"],.submit {cursor: pointer;}input:read-only:focus {outline: none;}option {background-color: var(--light-3-5);color: var(--gray-1);}svg,img {vertical-align: middle;}button {border: none;background-color: transparent;}@keyframes top {from {transform: translateY(-100%);}}@keyframes top-ha {from {transform: translateY(-100%);}}@keyframes down-left {from {transform: translate(-50%, 100%);}}@keyframes down {from {transform: translateY(100%);}}@keyframes down-ha {from {transform: translateY(50%);}}@keyframes down {from {transform: translateY(100%);}}@keyframes open-down {from {height: 0px;}}@keyframes right {from {transform: translateX(100%);}}@keyframes left {from {transform: translateX(-100%);}}@keyframes right-ha {from {transform: translateX(50%);}to {transform: translateX(0);}}@keyframes left-ha {from {transform: translateX(-50%);}to {transform: translateX(0);}}select {background: url("/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"],input[type="submit"],.submit {border-radius: 6px;width: 100%;padding: 12px;background-color: var(--light-3-5);}.submit {display: block;text-align: center;font-weight: bold;margin-top: 8px;}/* input[type="password"]:invalid,input[type="tel"]:invalid,input[type="email"]:invalid {border-color: red;} */input:focus-visible,input:focus-within,input:focus {outline-color: rgb(0, 0, 0) !important;border-color: rgb(0, 0, 0) !important;}input[type="submit"],.submit {background-color: var(--blue) !important;color: var(--white);border: 0;border-top: 2px solid var(--gray-7);border-bottom: 2px solid var(--gray-7);/* transition: border 0.05s; */}input[type="submit"]:active,.submit:active {border: 0;}a:hover {text-decoration: underline;}/* END CSS css global styles *//* START CSS Library */.submit:hover {opacity: 0.95;/* transition: opacity 0.1s; */text-decoration: none;}.submit:active {border: 0;}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;/* transition: right 0.2s; */}ri {margin: 0 0 0 8px;/* transition: 0.1s; */}a:hover ri {margin: 0 0 0 16px;}span:has([src*="/icons/x.svg"]) {align-self: flex-start;justify-self: flex-start;}.invert {filter: invert(1) !important;}/* END CSS css Library *//* START CSS Component */.seller {background-color: var(--light-2-5);padding: 16px;border-radius: 25%;width: 72px !important;height: auto !important;margin-right: 8px;}span[id*="inv"] {color: red;font-size: 0.93rem;margin: 4px 8px;display: block;}/* END CSS css Component */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);/* transition: background-color 0.1s; */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 button {font-weight: bold;}.hamburger-menu > a:not(.btn):hover {background-color: var(--light-3);/* transition: background-color 0.1s; */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 input {display: none;}.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;}.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-result a {display: block;background-color: var(--light-3);border-bottom: solid 2px var(--light-1);margin: 1px;padding: 8px;border-radius: 4px;color: initial;position: relative;}.trend-result a {padding-left: 32px;}.trend-result a::before {content: "";background: url("/icons/arrow-trend-up.svg") no-repeat;position: absolute;top: 25%;left: 0;margin-left: 8px;width: 1.25rem;height: 1.25rem;}.search-result a:hover {background-color: var(--light-2-5);/* transition: background-color 0.1s; */}.search-header-res {flex: 1 100%;position: relative;}.search-result svg {vertical-align: bottom;padding-right: 4px;}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;}.header-map input {display: none;}.my-chat {position: relative;}.my-chat span {padding: 1px;text-align: center;position: absolute;top: -2px;width: 22px;left: -2px;background-color: red;border-radius: 50%;color: var(--white);font-weight: bold;font-size: 0.88rem;height: 22px;}/* START CSS Footer *//* END CSS css Footer */@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;}.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) {header .sell {display: none;}}/* START CSS home *//* START CSS image-slide */.home {width: 100%;display: flex;align-content: center;flex-wrap: wrap;flex-direction: column;}/* END CSS css image-slide *//* START CSS sell-cards */.home a {text-decoration: none !important;}/* END CSS css home *//* START CSS sitemap *//* END CSS css sitemap *//* START CSS user *//* END CSS css user *//* START CSS contact us *//* END CSS css contact us *//* START CSS privacy *//* END CSS css privacy *//* START CSS help *//* END CSS help *//* START CSS about us *//* .founder img {max-width: 240px;aspect-ratio: 5/6;object-fit: cover;border-radius: 16px;filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.5));margin: 4px;display: block;}.founder {margin: 40px auto;max-width: max-content;text-align: center;border: 1px solid var(--gray-9);border-radius: 12px;background-color: var(--light-3);filter: drop-shadow(2px 4px 4px rgb(0 0 0 / 0.5));} *//* END CSS about us *//* START CSS sell */#sell a:hover {text-decoration: none !important;}.type {z-index: 1100 !important;}/* END CSS css sell *//* START CSS saved searches *//* END CSS css saved searches *//* START CSS settings *//* END CSS css settings *//* START CSS myads *//* .myads .blue { *//* padding: 8px;border: 1px solid;border-radius: 6px;margin-top: 16px;text-align: center;font-size: 1.2rem;font-weight: bold; *//* } *//* .myads .blue img { *//* width: 20px; *//* } *//* END CSS css myads *//* START CSS chat */.chat {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: var(--light-3-5);z-index: 10;overflow: auto;display: none;animation: ease-in-out right 0.5s;box-shadow: 0 0 8px;}@media screen and (min-width: 992px) {.chat {display: block;position: sticky;flex: 33.33%;bottom: 0;border-left: 1px solid var(--gray-9);box-shadow: none;z-index: 2;}}/* END CSS css chat *//* START CSS ads */.type {white-space: normal;}/* END CSS css ads *//* START CSS ad */@keyframes fade {from {filter: opacity(0.8);}to {filter: opacity(1);}}.listen-seller {margin: 24px 0;display: flex;align-items: center;gap: 8px;flex-wrap: wrap;}.listen-seller a {color: var(--blue);font-weight: bold;}.listen-seller > div > span {margin-bottom: -14px;display: block;}/* END CSS css ad */.none {display: none;}.block {display: block !important;}.flex {display: flex !important;}
</style>
<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"></span><div class="header-map"><a id="cairo" href="/ads/?category=electronics-appliances&amp;location=cairo">Cairo<fw>❭</fw></a><a id="giza" href="/ads/?category=electronics-appliances&amp;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 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 none"><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="?category=electronics-appliances&amp;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" style="width: 308px;"><option value="all">All</option><option value="vehicles">Vehicles</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>