JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
	  <script src="jquery.slides.min.js"></script>
	  <link rel="stylesheet" type="text/css" href="style2.css"></header>

	  
		<style>
	    /* Prevents slides from flashing */
	    #slides {
	      display:none;
	    }
	  </style>

	  <script>
	    $(function(){
	      $("#slides").slidesjs({
	        width: 940,
	        height: 528
	      });
	    });
	  </script>
	<body class="about">
		<div class="nav-bar">
     		<h1 class="logo" style="vertical-align:middle">LogoHere</h1>

		    <ul class="nav-menu">
		        <li><a href="index.html" class="action">Action</a></li>
		        <li><a href="about.html" class="about">Who we are</a></li>
		        <li><a href="blog.html" class="blog">Blog</a></li>
		        <li><a href="services.html" class="services">Services</a></li>
		        <li><a href="contact.html" class="contact">Get in touch</a></li>
		    </ul>

		    <div id="slides">
		    	<img src="hkslide1.jpg">
		    	<img src="hkslide2.jpeg">
		    	<img src="hkslide3.jpg">
		    </div>
		</div>

CSS

/*CSS for other pages*/

body {
  margin: 0px; /*Because the body by default has an margin, this now works with the gap
                  issues I had with the nav bar on either side of it*/
}

.about-body{

}

li{
  vertical-align: middle;
}

.nav-bar{
  padding-top: 50px;
}

.logo{
  display: inline-block;
  position: relative;
	font-family: times, Times New Roman, times-roman, georgia, serif;
	font-size: 60px;
  line-height: 40px;
  letter-spacing: -4px;
	color: #444444;
	margin: 0 0 0 0;
	padding-left: 50px;
  font-weight: 100;
}

.nav-menu {
    display: inline-block;
    list-style-type: none;
    font-weight: 100;
    font-size: 20px;
    padding: 0px;
    margin-top: 0px;
    padding-left: 50px;
    width: 55%;
    margin-left: 10px;
}

.nav-menu li{
  display: inline;
  margin: 0px 20px 20px 0px;

}


/*body.action a.action:link,
body.about a.about:link,
body.blog a.blog:link,
body.services a.services:link,
body.contact a.contact:link{
  color: black;
}*/

.nav-menu li a{
  text-decoration: none;
  color: grey;
}

li a:hover {color: #444444;}  /* mouse over link */

li a:active {
  color:white;
}  /* selected link */




/*About page content*/
.content-wrapper{
  display: inline-block;
  width: 900px;
  padding:0px;
  margin-top: 50px;
  margin-right: 100px;
  margin-left: 50px;
  margin-bottom: 20px;
  border:2px solid black;
}

.hk-img{
  padding:10px 0px 10px 10px;
  float: left;
}

.text-header-content{
  display: inline;
  width: 400px;
  padding:10px 10px 0px 0px;
  margin-top: 0px;
  float: right;
}

.text-content{
  display: inline;
  width: 400px;
  padding:0px 10px 0px 0px;
  color: black;
  margin-bottom: 0px;
  padding-bottom: 0px;
  float: right;
}



/*Staff-Section*/
.team-header{
  padding: 0px;
  margin: 10px 0px 10px 50px;
}

.team-wrapper{
  display: inline-block; 
  margin: 20px 0px 0px 50px;
  width: 800px;
  padding: 0px;
}

#staff-1{
  width: 200px;
  float: left;
  padding: 0px 0px 0px 10px;
  margin: 0px;
}
#staff-2{
  display:...