JSFiddle - React, Tailwind, and code Playground

by Deepak Manwal

HTML

<div style="height:50px; width:1200px">

    <div tabindex="0" class="banner" onclick="location.href='Home.html'">
        Link1
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 1.html'">             
        Link2
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 2.html'">
        Link3
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 3.html'">
        Link4
    </div>

</div>

CSS

.banner {
    background: orange;
    color: aqua;
    box-sizing: border-box;
    float: left;
    width: 25%;
    height: 50px;
    vertical-align: top;
    border: 1px solid #000000;
    text-align: center;
    font-family: Garamond;
    font-size: x-large;
    display: table-cell;
    vertical-align: middle;
    line-height:50px;
    cursor:pointer;
    font-weight:bold;
}