JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">

        <div id="logo">Codeplayer</div>

        <ul class="toggle">
            
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>Result</li>

        </ul>

        <button>Run</button>

    </div>

CSS

/* ----------- UNIVERSAL -----------*/

        a, body, html, ul, li, div {

            margin: 0;
            padding: 0;
            list-style: none; 
            font-family: helvetica; 
        }

        #logo, .toggle {
           /* line-height: 50px; */
        }



    /* ----------- MENU BAR -----------*/

        #menu {
            background-color: #EDEBED; 
            width: 100%;
            height: 50px; 
            box-shadow: 1px 1px 1px #000000;
            position: absolute;


        }

    /* ----------- LOGO -----------*/

        #logo {
            display: inline-block;
  font-weight: bold;
  margin-left: 15px;
  font-size: 20px;
  height: 20px;

        }


    /* ----------- TOGGLE BAR -----------*/

        .toggle li {
            list-style: none;
            float: left; 
            margin-left: 20px; 
        }

        .toggle {
              margin: 0 auto;
  width: 250px;
  background-color: blue;
  margin-top: 10px;
  display: inline-block;


        }

    /* ----------- BUTTON -----------*/

        button {
              float: right;
  margin-top: 10px;
  margin-right: 15px; 

        }