JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <html lang="en-GB">
    <head>
    <meta charset="utf-8"/>
    <title>Website Header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>
    <body>
    
    <div class="header">
    <div class="header-container">
    <div class="logo-container">
    <img class="logo" src="/logo.png" alt="Logo">
    </div>
    <div class="navigation-container space-evenly">
      <button></button>
      <nav>
        <p class="nav">Page1</p>
        <p class="nav">Page2</p>
        <p class="nav">Page3</p>
        <p class="nav">Page4</p>
      </nav>
    </div>
    </div>
    </div>
    
      <script>
          let container = document.querySelector('.navigation-container');
        let menu = document.querySelector('nav');
        document.querySelector('button')
          .addEventListener('click', e => {
            menu.classList.toggle('active');
             container.classList.toggle('active')
          })
      </script>
    
    </body>
    </html>

CSS

body, html {
        max-width: 100%;
        padding: 0vw;
        margin: 0vw;
    }
    
    .header {
    background-color: #ffffff;
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
    height: 10vh;
    z-index: 1;
    border-bottom: solid;
    }
    
    .headerfill {
    height: 10vh;
    border: none;
    }
    
    .header-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    }
    
    .logo-container {
    float: left;
    width: 40%;
    padding-left: 1vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    }
    
    .navigation-container {
      width: 60%;
      display: flex;
      flex-flow: row nowrap;
      //justify-content: space-evenly; 
      margin: auto;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .space-evenly {
      justify-content: space-evenly;
    }
    
    .logo {
    height:8vh;
    max-width: 80vw; 
    padding-top:1vh;
    padding-bottom:1vh;
    padding-left:4vh;
    display: block;
    object-fit: contain;
    }
    
    img{
    -webkit-user-drag: none;
    }
    
    .nav {
    font-family: 'Roboto', serif;
    font-size: 2vw;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000;
    padding-left: auto;
    padding-right: auto;
    line-height: 1em;
    object-fit: contain;
    text-decoration: none;
    }
    
    
    @media only screen and (max-width: 500px) {
    .nav {
    font-family: 'Roboto', serif;
    font-size: 2.5vw;
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000;
    padding-left: auto;
    padding-right: auto;
    line-height: 1em;
    object-fit: contain;
    text-decoration: none;
    }
    }
    
    .nav:hover {
    color: #096e67;
    }
    
    a:link {
        color: #000000;
        text-decoration: none;
   ...