JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="menu-social" class="menu">
    <ul id="menu-social-items" class="menu-items">
      <li id="menu-item-42" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42">
        <a href="https://www.yelp.com"><span class=
      "screen-reader-text">Yelp</span></a>
      </li>
      <li id="menu-item-43" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43">
        <a href="https://www.facebook.com/notebookink"><span class=
      "screen-reader-text">Facebook</span></a>
      </li>
      <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-objet-custom menu-item-44">
        <a href="https://twitter.com/notebookink"><span class=
      "screen-reader-text">Twitter</span></a>
      </li>
      <li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45">
        <a href="https://www.instagram.com/notebookink/"><span class="screen-reader-text">
        Instagram</span></a>
      </li>
      <li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46">
        <a href="mailto:[email protected]"><span class=
      "screen-reader-text">Email</span></a>
      </li>
    </ul>
  </div>
  <div id="header">
    <div id="page">
      <div id="wrapper">
        <div id="header">
          <div class="content">
            <div class="left-menu">
              <div style="margin-left: 4em">
                <ul>
                  <li style="list-style: none">WELCOME TO NOTEBOOK INK//
                  </li>
                  <li id="menu-item-2" class="menu-item menu-item-type-post_type-menu-item-object-page menu-item-2">
                    <a href="http://localhost/website1.com/portfolio/">\\
                  VIEW PORTFOLIO</a>
                  </li>
                  <li style="list-style: none; display: inline">
                    <ul id="menu-item-62" class="menu-item menu-item-type-post_type...

CSS

/*
Theme Name: Creative Branding Design WP Theme
Description: Semantic, SEO Optimised, Custom Wordpress Theme
Author: 
Author URI: 
*/


/* Reset */

a,
abbr,
acronym,
address,
area,
b,
bdo,
big,
blockquote,
body,
button,
caption,
cite,
code,
col,
colgroup,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
i,
img,
ins,
kbd,
label,
legend,
li,
map,
object,
ol,
p,
param,
pre,
q,
samp,
small,
span,
strong,
sub,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
tr,
tt,
ul,
var {
  margin: 0;
  padding: 0;
  vertical-align: baseline
}


/* Defaults */

:focus {
  outline: 0
}

a,
a:visited {
  color: #121254
}

a:hover {
  text-decoration: none;
}

abbr,
acronym,
dfn {
  border-bottom: 1px dotted;
  cursor: help
}

blockquote {
  background: #EEE;
  border-left: 2px solid #CCC;
  margin: 0 0 1em
}

blockquote p {
  margin: .5em
}

body {
  background: #fff;
  min-width: 1180px;
  font-family: 'F25 executive', sans-serif;
  color: #000;
  font-size: 13px;
}

code,
pre {
  font-size: 1em
}

del {
  text-decoration: line-through
}

dfn {
  font-style: italic;
  font-weight: bold
}

dt {
  font-weight: bold
}

dd {
  margin: 0 0 1em 10px
}

fieldset {
  border: 0
}

fieldset p {
  margin: 0 0 5px
}

img {
  border: 0;
  vertical-align: bottom
}

ins {
  text-decoration: none
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

hr {
  margin: 0 0 0.5em
}

p {
  margin: 0 0 26px;
  font-weight: 300;
  line-height: 22px;
}

ul,
ol {
  list-style: none;
  margin: 0 0 1em
}

textarea {
  font: 1em Arial;
  overflow: auto
}

tt {
  display: block;
  margin: 0.5em 0;
  padding: 0.5em 1em
}

th {
  background: #EEE;
  border: solid #CCC;
  border-width: 1px 0 0 1px;
  padding: 3px
}

td {
  border: solid #CCC;
  border-width: 1px 0 0 1px;
  padding: 3px
}

table {
  border: solid #CCC;
  border-width: 0 1px 1px 0
}


/* Containers */

#page {
  width: 100%;
  overflow: hidden;
  background:...