JSFiddle - React, Tailwind, and code Playground
by Vince Richter
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<body>
<button class="tablink" onclick="openPage('Home', this, 'lightgray')">shouldn't</button>
<button class="tablink" onclick="openPage('News', this, 'lightgray')" id="defaultOpen">credits</button>
</body>
<div id="Home" class="tabcontent">
<div id="navbar">
<a class="active" href="javascript:void(0)">Orcas shouldn't be in Captivity</a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="row">
<div class="column">
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<br>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</div>
<div class="column-1">
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</div>
<div class="column-2">
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</div>
</div>
</div>
<div id="News" class="tabcontent">
<p>
</p>
<p>
</p>
</div>
<style>
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
user-select: none;
}
*{
box-sizing:border-box;
}
.column {
float: left;
width: 33.3333333333%;
padding: 10px;
height: 300px;
font-size: 15px;
}
.column-1{
float: center;
width: 33.3333333333%;
padding: 10px;
height: 300px;
font-size: 15px;
display: inline-block;
}
.column-2{
float: right;
width: 33.3333333333%;
padding: 10px;
height: 300px;
font-size: 15px;
display: inline-block;
}
.row:after {
content: "";
display: table;
clear: both;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align:...