JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header id="header" class="slideInDown theme-background-dark">

  <div class="flex-container">
    <nav class="nav-header-left" id="header-top-row">

      <ul class="nav">
        <li class="dropdown">
          <a href="/" class="logo-link">
            <svg width="50px" height="60px" viewBox="0 0 200.00000000000003 268.562377923308" preserveAspectRatio="xMidYMid meet">
              <defs id="SvgjsDefs1241"></defs>
              <g id="SvgjsG1242" featurekey="symbolFeature-0" transform="matrix(1.783282580997605,0,0,1.783282580997605,11.335711087064887,-10.66045845970667)" fill="#ffffff" >
                <path xmlns="http://www.w3.org/2000/svg" d="M27.293,12.695l45.43,41.219l-17.195,7.613l9.246,20.88l-5.526,2.446l-5.526,2.448l-9.247-20.879l-17.195,7.613  L27.293,12.695z M79.354,54.984c-0.363,2.252-1.826,4.146-3.91,5.072l-11.055,4.893l6.525,14.738  c1.498,3.386-0.035,7.359-3.421,8.862l-5.528,2.448l-5.527,2.445c-0.862,0.383-1.777,0.576-2.715,0.576  c-2.656,0-5.069-1.568-6.145-3.998l-6.527-14.739L29.996,80.18c-0.864,0.383-1.779,0.574-2.719,0.574  c-1.305,0-2.573-0.375-3.665-1.086c-1.911-1.246-3.052-3.352-3.052-5.633l0.016-61.343c0-2.652,1.569-5.063,4.002-6.142  c0.862-0.377,1.774-0.572,2.713-0.572c1.672,0,3.275,0.619,4.514,1.742l45.429,41.22C78.924,50.47,79.716,52.729,79.354,54.984z   M75.43,50.93L30.001,9.709c-0.756-0.685-1.727-1.044-2.709-1.044c-0.551,0-1.106,0.113-1.631,0.344  c-1.457,0.646-2.398,2.091-2.398,3.684l-0.016,61.343c0,1.364,0.689,2.637,1.832,3.379c0.664,0.433,1.43,0.653,2.198,0.653  c0.554,0,1.11-0.115,1.632-0.348l13.51-5.98l7.615,17.195c0.667,1.506,2.141,2.399,3.687,2.399c0.547,0,1.1-0.112,1.629-0.347  l5.528-2.447l5.524-2.448c2.035-0.901,2.955-3.282,2.055-5.317L60.846,63.58l13.508-5.982c1.246-0.551,2.131-1.697,2.349-3.043  C76.917,53.209,76.439,51.846,75.43,50.93z"></path>
              </g>
              <g id="SvgjsG1243"...

CSS

:root{

    --theme: rgb(0,150,79);
    --theme-transparent: rgba(0,150,79, 0.7);
    --theme-dark: rgb(88,98,93);
    --theme-highlight: rgb(2, 199, 106);
    --theme-borders: rgb(88,98,93);
    --theme-highlight-alt: rgb(230,231,231);

}


* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

body{
  font-family: sans-serif;
  margin:0;
  padding:0;
}
ul,li{
  margin:0;
  padding:0;
  list-style: none;
}


.theme-background {
    background-color: var(--theme);
}
.theme-background-dark {
    background-color: var(--theme-dark);
}

#header{
  display:flex;
  flex-direction:column;
  
}

.flex-container{
  display:flex;
  flex:1;  
}

.nav-header-left,
.nav-header-right{
  display:flex;
  flex:1;
  border:1px solid red;
}

.nav-header-right{
  flex:2 1 auto;
}



#header .nav{
  display:flex;
  flex:1;
  align-items:center;
}

#header nav:last-child > ul{
  justify-content: flex-end;
}


#header .nav > li{
  position: relative;
  text-align: center; 
  width: 0 0 auto; 
  flex: 0 0 auto;
 
}

#header .nav li > ul {
  display: none;
  position: absolute;
  top: 100%;
  background: #fff;
  padding: 0;
}

#header .nav a{
  padding:2.5rem 0.5rem;
  text-decoration:none;
  color:white;
}

#header .nav .logo-link svg{
padding:0.25rem;
}