JSFiddle - React, Tailwind, and code Playground

HTML

<DIV class=hiddenButtons>
</DIV>
<!-- Navigation bar -->
<DIV class=topBar>
  <DIV class=logo>
    <IMG style="HEIGHT: 50px; MARGIN: 5px;" src="3309c8c106fc4624bd0939a1e78e45b8.png">
  </DIV>
  <DIV style="display:flex;; width:90%">
    <DIV style='float:left;'>
      <DIV style='float:left;'>
        <H3>First Line
          <BR> Second Line
          <BR> Third Line</H3>
      </DIV>
    </DIV>
    <DIV class=btnGroup>
      <DIV class=main-button-group>
        <div id="tab1" class="button-group">Tab1</div>
        <div id="tab2" class="button-group active">Tab2</div>
        <div id="tab3" class="button-group">Tab3</div>
        <div id="tab4" class="button-group">Tab4</div>
        <div id="tab5" class="button-group">Tab5</div>
        <div id="tab6" class="button-group">Tab6</div>
        <div id="tab7" class="button-group">Tab7</div>
        <div id="tab8" class="button-group">Tab8</div>
        <div id="tab9" class="button-group">Tab9</div>
        <div id="tab10" class="button-group">Tab10</div>
        <div id="tab11" class="button-group">Tab11</div>
      </DIV>
    </DIV>
    <DIV style="FLOAT: left;  width:13%">
      <H5>Tab2</H5>
    </DIV>
  </DIV>
</DIV>

JavaScript

$(".topBar").css({
  "float": "bottom",
  "background-color": "#003DAF",
  "height": "100%",
  "font-family": "Segoe UI Light"
});

$(".btnGroup").css({
  "width": "90%",
  "margin-left": "2%",
  "display": "inline-block"
});

$("h3").css({
  "font-family": "Segoe UI Light",
  "font-size": "12px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "left",
  "margin-top": "1em",
  "margin-bottom": "0.5em",
  "margin-left": "0",
  "margin-right": "0"
});
$("h4").css({
  "font-family": "Segoe UI Light",
  "font-size": "12px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#000000",
  "text-align": "left",
  "margin-top": "0",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$("h5").css({
  "font-family": "Segoe UI Light",
  "font-size": "13px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "left",
  "margin-top": "0.5em",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$("h6").css({
  "font-family": "Segoe UI Light",
  "font-size": "13px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "right",
  "margin-top": "0.5em",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$(".hiddenButtons").css({
  "display": "none"
});

$(".logo").css({
  "float": "left"
});

$('.main-button-group').css({
  'display': '-webkit-flex',
  'margin': '0 0 1rem',
  'margin-bottom': '0px',
  'color': '#fff',
  'text-decoration': 'none',
   'height': '100%',
    'align-items': 'center'
});

$('.main-button-group .button-group').css({
  'display': 'inline-block',
  'position': 'relative',
  '-webkit-flex': '1',
  '-webkit-align-items': 'center',
  '-ms-flex-align': 'center',
  '-webkit-justify-content': 'center',
  '-ms-flex-pack': 'center',
  'max-width': '100em',
  'padding': '0.786em 0',
  'font-family': 'Segoe UI Light',
  'font-size': '0.7rem',
  'font-weight': '600',
 ...