JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div class="wrapper">
<div class="header">
<!--Header, the first 250px from the top-->
    <div class=bodytop>
    <!--upper part of the website-->
        <center>
        <div class="buttonbox">
        Dit is button3
        </div>
        <div class="buttonbox">
        Dit is button2
        </div>
        <div class="buttonbox">
        Dit is button1
        </div>
        </center>
    <div class=bodybottom>
    <!--Lower part of the website-->
    </div>
    </div>
</div>
</div>

CSS

*{
font-family: "verdana";
color: #FFF;
}
.wrapper
{
display: table;
width: 100%;
height: 100%;
background-color: #000000;
}
.header
{
display: table;
float: left;
background-image: url("header.jpg");
width: 100%;
height: 250px;
vertical-align: top;
}
.bodytop
{
display: table;
clear: both;
background-image: url(images/header.jpg);
width: 100%;
vertical-align: top;
background-color: #444444;
}
.bodybottom
{
display: table;
width: 100%;
vertical-align: top;
background-color: #666666;
}
.buttonbox
{
display: table;
width: 150px;
height: 150px;
background-color: #888888;
vertical-align: middle;
margin: 15px;
}