JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outerBox">
	<div id="title"> 
        <div id="menuButton"></div>
        This is the Title
        <div id="powerButtonBox">It is <a href="#" id="powerButton">powered on</a></div>
	</div> 

    <ul class="nav nav-pills nav-justified">
        <li id="newStuffButton" data-target="#" data-slide-to="0" class="store-tab active"><a href="#">New Stuff</a></li>
        <li id="doneStuffButton" data-target="#" data-slide-to="1" class="store-tab"><a href="#">Done</a></li>
    </ul>

    <div id="newStuff" class="list-group tabContent"></div>
    <div id="doneStuff" class="list-group tabContent"></div>
</div>

CSS

html {
  height: 100%;
}
html, body {
	min-height: 100% !important;
	/* prevent horizontal scrolling */
	max-width: 100% !important;
	overflow-x: hidden !important;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


#menuButton {
	float:left;
	background-image: url("../images/hamburger_menu.png");
	width: 50px;
	height: 40px;
	margin-right: 5px;
}

#powerButtonBox {
	float: right;
}

#outerBox {
	min-height: 100%; 
	height: auto !important;
	height: 100%;
}

#title {
	background: #E95353;
	padding: 10px;
	color: white;
	font-size: x-large;
}


#outerBox {
	width: 100%;
	height: 100%;
}


.nav a small {
    display:block;
}
.nav {
	background: #E95353;
}
.nav a {
    border-radius:0px;
    color: white;
}

.nav-pills>li {
	text-align: center;
	padding: 10px;
	font-size: large;
}

.nav-pills>li.active { 
	background-color: #E95353; /*EF8686*/
	border-bottom: 5px solid white;
    color: white;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, 

.nav-pills>li.active>a:focus { 
	color: #fff; 
}