JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <link href="CSS/CustomStyle.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <body>
        
    <div class="top">
    <div class="logo"><div><img src="images/Logo.png" alt="" style="width:390px; height: 110px;"/>ihihoi</div></div>
    <div class="buttonreg"><div><input type="button" value="Register" name="Register" /></div></div>
    </div>
        
    <div class="maincontentnav">
    <nav class="nav">
    <div class="container-fluid">
    <div class="navbar-header">
    <div class="navigation">
        <div>
            <ul class="nav navbar-nav ">
      
        <li><a href="#"><h3 style="color:#000000;">About Us</h3></a></li>
        <li><a href="#"><h3 style="color:#000000;">Get Help</h3></a></li>
        <li><a href="#"><h3 style="color:#000000;">My Status</h3></a></li>
        <li><a href="#"><h3 style="color:#000000;">Get Help</h3></a></li>
            </ul>
        </div>
    </div>
    </div>
  </div>
</nav>    
    <div class="maincontent">
        <div>
            <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing...

CSS

.top {
    border-bottom-style: solid;
    border-color: black;
    
    border-left: white;
    border-right: white;
    width:68px;
    height:120px;
    background:white;
    text-align:center; 
    width: 70%;
    margin: 10px auto;
    position: relative;
    
}
.buttonreg {
    width: 50%;
    display:block;
    margin-right: -4px;
    box-sizing: border-box;
    padding: 1%;
    float: left;
    
}
.logo {
    width: 50%;
    display:block;
    margin-right: -4px;
    box-sizing: border-box;
    padding: 1%;
    float: left;
    
    margin-bottom: 44px;
}

.logo > div {
    background:white;
    height:20px;
    margin-left: 25px;
}
.buttonreg > div {
    background:white;
    height:20px;
    margin-left: 25px;
}
.maincontent{
    height:130px;
    background:white;
    text-align:center; 
    width: 90%;
    margin: 10px auto;
    position: relative;
    margin-left: 25px;
    
}
.maincontentnav {
    position: relative;
    border-bottom-style: solid;
    border-color: #cccccc;
    border-left: white;
    border-right: white;
    width:680px;
    height:1000px;
    background:white;
    text-align:left; 
    width: 70%;
    margin: 10px auto;
    position: relative;
    
}
.navigation li{
    width: 25%;
    display: inline-block;
    margin-right: -4px;
    box-sizing: border-box;
    padding: 1%;
    float: left;
    
}

.buttonreg > div {
    background:white;
    height:20px;
}