JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="maincontainer">
<div class="topbar">
<div class="logo">
Codeplayer
</div>
<div class="tabs">
<ul>
<li class="l">HTML</li>
<li class="l1">CSS</li>
<li class="l2">JS</li>
<li class="l3">Result</li>
</ul>
</div>
<div class="run">
<button id="but">Run</button>
</div>
</div>
<div class="clear"></div>
<div class="mainstuff">
<div class="row">
<div class="Html">HTML</div>
<div class="CSS">CSS</div>
<div class="JS">JS</div>
<div class="Result">Result</div>
</div>
</div>
</div>
CSS
.topbar {
background-color: #D0D5DB;
width: 100%;
height: 40px;
border-bottom-width: thick;
}
body {
margin: 0;
padding: 0;
}
.logo {
font-size: 1.8em;
font-weight: bold;
padding: 3px 2px;
float: left;
}
.run {
float: right;
margin-top: -5px;
padding: 6px 2px;
}
#but {
padding-left: 15px;
border-radius: 5px;
}
button {} ul {
list-style: none;
margin: 0;
}
.tabs {
margin: 0 auto;
width: 240px;
padding-top: 5px;
}
.l {
float: left;
border-color: #808080;
border-style: solid;
margin: 3px;
}
li:hover {
background-color: #808081;
}
.clear {
clear: both;
}
.mainstuff {
display: table;
width: 100%;
}
.Html {
display: table-cell;
height: 100vh;
margin: 0;
background-color: red;
}
.CSS {
display: table-cell;
height: 100vh;
margin: 0;
background-color: yellow;
}
.JS {
display: table-cell;
height: 100vh;
margin: 0;
background-color: blue;
}
.Result {
display: table-cell;
height: 100vh;
margin: 0;
width: auto;
background-color: green;
}
.l1 {
float: left;
border-color: #808080;
border-style: solid;
margin: 3px;
}
.l2 {
float: left;
border-color: #808080;
border-style: solid;
margin: 3px;
}
.l3 {
float: left;
border-color: #808080;
border-style: solid;
margin: 3px;
}
.row {
display: table-row;
}