JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
      <html lang="en">
          <head>
              <link rel="stylesheet" type="text/css" href="mi-archivo-css.css">
              <meta charset="utf-8">
              <title>Test page</title>
              <script src="script.js"></script>
          </head>



          <header>
              <!--Main Navigation-->
              <div class="navbar-container">
                  <ul class="navbar">
                      <li>
                          <img src="logo.png" id="banner-img" href="#home">
                      </li>
                      <li class="right-li">
                          <a href="#me">Me</a>
                      </li>
                      <li class="right-li">
                          <a href="#about">About</a>
                      </li>
                  </ul>
              </div>      
          </header>

          <body>    
              <!-- page content -->
          </body>
      </html>

CSS

li {
            display: inline;
            float: left;
            height: 100%;

        }
        li a {
            line-height:110px; /* line height should be the same as the element's height*/
                    width: 80px;
                    height: 100%;
                    background-color: rgb(49, 48, 48);
                    font-family: Arial;
                    color: white;
                    font-weight: 700;
                    font-size: 24px;
                    padding: 0 24px; /* removed the padding from top and bottom to prevent the a element overflowing*/   
                    text-decoration: none;
                    text-align: center;
                    display: inline-block;
                    border-left: 1px solid black;
                    border-right: 1px solid black;
                    transition: all 0.3s ease 0s;
        }
        li a:hover {
            background: #1075e9;
            /*border-radius: 50px;*/
            border-color: #1075e9;
            transition: all .4s ease 0s;
        }
        li a:active{
            background-color: #07274d;
            border-color: #07274d;
            transition: 0s;
        }

        .right-li{
            float: right !important;
        }
        .navbar {
            list-style: none;
            background: rgb(49, 48, 48);
            height: 115.8px;
        }
        #banner-img{
            /*border: 1px solid black;*/
            border-radius: 30px;
            width: 80px;
            height: 105.8px;
            padding: 4px; 
        }
        #banner-img:hover{
            background: rgb(168, 168, 168);
            transition: all .4s ease 0s;
        }
        #banner-img:active{
            background-color: rgb(24, 24, 24);
            border-color: white;
            transition: 0s;
        }