JSFiddle - React, Tailwind, and code Playground

by mahdiar_mansouri

HTML

<nav class="navbar">
        <a href="index.html"><img style="border-style: solid; border-width: 1px black; border-radius: 50%" src="img/logo-navbar.png" height="60" width="60"></a>
        <div class="menu">
            <ul class="list">
                <li><a href="#info">info</a></li>
                <li><a href="#aboutus">about us</a></li>
                <li><a href="#share">share</a></li>
                <li><button type="button" class="btn btn-dark"><a href="#quiz">quiz</a></button></li>
            </ul>
        </div>
        <button class="btn" id="toggler"><i class="fa-solid fa-bars"></i></button>
    </nav>

CSS

.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 15px;
    border-bottom: dotted 1px rgba(0, 0, 0, 0.25);
}
.navbar .logo {
    margin-right: 50px;
}
.navbar .list{
    display: flex;
    align-items: center;
    list-style: none;
    gap: 25px;
}
.navbar a{
    text-decoration: none;
    color: inherit;
}
.navbar a:hover{
    color:slategray;
}
#toggler,
.navbar i {
    display: none;
}