JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        
        <img src="./Shopline.png" id="logo"><br/>
        <nav>
            <div class="dropDown">
                <a href="aaa">✨ מבצעים</a>
                <div class="dropContent">
                    
                </div>
            </div>
            <div class="dropDown">
                <a href="./Fruits.html">🍎 פירות וירקות</a>
                <div class="dropContent">
                    <a href="./Fruits.html#fruit">פירות טריים</a>
                    <div class="dropDownn">
                        <a href="./Fruits.html#veget">ירקות</a>
                        <div class="dropContentt">
                            <a href="aaa">ירקות טריים</a>
                            <a href="aaa">ירקות ארוזים</a>
                            <a href="aaa">עשבי תיבול</a>
                        </div>
                    </div>
                    <div class="dropDownn">
                        <a href="aaa">פיצוחים ופירות יבשים</a>
                        <div class="dropContentt">
                            <a href="aaa">פיצוחים טבעיים</a>
                            <a href="aaa">פיצוחים קלויים</a>
                            <a href="aaa">פירות יבשים</a>
                            <a href="aaa">מנצ'ס</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dropDown">
                <a href="aaa">🥛 חלב וביצים</a>
                <div class="dropContent">
                    <div class="dropDownn">
                        <a href="aaa">חלב</a>
                        <div class="dropContentt">
                            <a href="aaa">חלב טרי</a>
                            <a href="aaa">משקאות חלב ויוגורט</a>
                           ...

CSS

html{
    direction: rtl;
}
header{
    display: flex;
    justify-content: space-between;
    background-color: white;
}
nav a{
    text-decoration: none;
    color: black;
    font-family: Segoe UI Semibold;
    margin-left: 0.5%;
}
#logo{
direction: rtl;
text-align: end;
position: fixed;
}
.dropDown{
    display:inline-block;
}
.dropContent{
    display: none;
    position: relative;
    background-color:#e8e8e8;
    border-radius: 3%;
    /* padding-left: 10%; */
}
.dropDown a:hover{
    color: red;
}
.dropDown:hover .dropContent{
    display: block;
    position: absolute;
}
.dropContent a{
    display: block;
    /* margin-bottom: 10%; */
    padding-bottom:10%;
}
.dropDownn{
    display: block;
}
.dropContentt{
    display: none;
    position: relative;
    background-color:#8fc7ff;
    border-radius: 3%;
    right: 75%;
    left: -80%;
    padding: 1%;
    margin-bottom: 7%;
}
.dropDownn:hover .dropContentt{
    display: block;
    position: absolute;
    
}
.dropContentt a{
    display: block;
    margin: 5%;
}
nav{
    position:fixed;
    text-align: center;
    top: 13%;
}
h1{
    color:blue;
}   
#sticky{
    margin: 12px;
    border:solid blue;
    width: 99%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:xx-large;
    position: sticky;
    top: 20%;
    text-align: center;
    color: blue;
    font-weight: bolder;
}
#btn{
    padding: 1%;
    position: fixed;
    bottom: 3%;
    left: 2%;
    background-color: #8fc7ff;
    border-radius: 45%;
 }
.i{
    border:solid red;
    display: inline-block;
    width: 16%;
    /* height:20%; */
    padding-left: 1%;
    padding-top: 1%;
    padding-right: 1%;
    margin:1%;
    padding-bottom: 0%;
    text-align: center;
}
.i>input{
    margin: 5%;
}
.category{
    margin-block: 15%;
    margin-left:  25%;
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    gap: 5% 5%;
    flex-wrap: wrap;
}
.i img{
    /* height:200px; */
    width:...