convert this html and css code to HTML with tailwind css utility classes:
<style>
*,
::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="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;
}
@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);
}
#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);
}
}
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,
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);
}
input[type="submit"]:active,
.submit:active {
border: 0;
}
a:hover {
text-decoration: underline;
}
.submit:hover {
opacity: 0.95;
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;
}
ri {
margin: 0 0 0 8px;
}
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;
}
.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;
}
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 button {
font-weight: bold;
}
.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 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;
}
}
.home {
width: 100%;
display: flex;
align-content: center;
flex-wrap: wrap;
flex-direction: column;
}
.home a {
text-decoration: none !important;
}
#sell a:hover {
text-decoration: none !important;
}
.type {
z-index: 1100 !important;
}
.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;
}
}
.type {
white-space: normal;
}
@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;
}
.none {
display: none;
}
.block {
display: block !important;
}
.flex {
display: flex !important;
}</style>
<div id="loader">
<div class="loader-span"></div>
</div>
<header class="header">
<div class="flex">
<a href="/">
<img
src="/images/android-chrome-192x192.png"
alt="{{ home }}"
width="46"
/>
</a>
<div
title="{{ choose-location }}"
onclick="toggle('.header-map','block');"
class="location-header"
>
<div>
<img
alt=""
src="/icons/location-ico.svg"
width="24"
class="invert"
/>
<span>{{ egypt }}</span>
<img alt="" src="/icons/drop-down.svg" />
<span class="header-map"></span>
<div class="header-map">
<a id="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">
<span>{{ signIn }} ›</span>
<img
alt=""
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=""
src="/icons/pngkey.com-user-png-729670.svg"
alt="{{ seller }}"
class="seller"
/>
<div>
<b
>{{ welcome }}<span id="welName"><?= $user['name'] ?></span>.</b
>
<a href="/mysettings/">{{ my-settings }}<ri>❭</ri></a>
</div>
</div>
<hr />
<a href="/sell">
<img alt="" src="/icons/camera.svg" />
{{ sellNow }}
</a>
<a href="/myfavorites">
<img alt="" src="/icons/heart.svg" />
{{ my-favorites }}
</a>
<a href="/mysearches">
<img alt="" src="/icons/search.svg" />
{{ my-searches }}
</a>
<a href="/myads">
<img alt="" src="/icons/rectangle-list.svg" />
{{ my-ads }}
</a>
<a href="/chat" class="my-chat">
<img alt="" src="/icons/chat-square-dots.svg" />
<span>
<?= $unreadM ?>
</span>
{{ my-chats }}
</a>
<a href="/help">
<img alt="" src="/icons/info-circle.svg" />
{{ help }}
</a>
<hr />
<a id="lang"
><img src="/icons/globe.svg" alt="{{ language }}" /><b
>{{ lang') === 'AR' ? 'EN' : 'AR' ?></b
></a
>
<hr />
<?= $logIn ?>
</form>
</div>
<div class="search-top">
<select title="{{ choose-category }}" class="selectCategory">
<option value="all">{{ all }}</option>
<option value="vehicles">{{ vehicles }}</option>
<option value="properties">{{ properties }}</option>
<option value="mobiles-tablets">{{ mobiles-tablets }}</option>
<option value="electronics-appliances">
{{ electronics-appliances }}
</option>
<option value="furniture-decor">{{ furniture-decor }}</option>
<option value="business-industrial-agriculture">
{{ business-industrial-agriculture }}
</option>
<option value="books-sports-hobbies">{{ books-sports-hobbies }}</option>
<option value="pets-accessories">{{ pets-accessories }}</option>
<option value="kids-babies">{{ kids-babies }}</option>
<option value="fashion-beauty">{{ mobiles-tablets }}</option>
<option value="services">{{ services }}</option>
<option value="jobs">{{ jobs }}</option>
</select>
<div class="search-header-res">
<input
type="search"
name="search"
placeholder="{{ search-for }}"
autocomplete="off"
class="search-header"
/>
<div class="search-result trend-result"></div>
</div>
<button type="submit" id="search" title="{{ search-now }}">
<img
src="/icons/search.svg"
width="32"
class="invert"
alt="{{ search }}"
style="max-width: 28px"
/>
</button>
</div>
<?= $error ?>
<?= $signIn ?>
<?= $sell ?>
</header>