JSFiddle - React, Tailwind, and code Playground

by silpa reddy

HTML

<div class="head">
<header>
<h1>Lierse Liga</h1>
    <nav>
    <ul class="menu">
        <li><a class="button" href="index.html">Home</a></li>
        <li><a class="button" href="eersteklasse.html"><img src="bal.gif" id="img1" />Eerste Klasse</a></li>
        <li><a class="button" href="tweedeklasse.html">Tweede Klasse</a></li>
        <li><a class="button" href="contact.html">Contact</a></li>
    </ul>
    </nav> 
</header>
</div>

CSS

html{
    font:12pt;
    font-family:Verdana, Geneva, sans-serif;
    width:100%;
}
body{margin:0px;
    width:100%;
    display:block;
    float:left;
    text-align:center;
    min-width:2000px;
}
header h1 {
    display: inline-block;
    float: none;
}
header {
    background-color: #ffffff;
    color: #ff0000;
    display: block;
    float: none;
    margin: auto;
    text-align: center;
    width: 80%;
}
nav {
    background-color: #ff0000;
    display: inline-block;
    float: none;
    height: 60px;
    margin: auto;
    width: auto;
}
nav a{
    text-decoration:none;
    list-style:none;
    color:white;
    font-size:20px;
    padding:8px;
}
nav li:hover,a:hover{
    color:black;
}
li{
    display:inline;
}
img{
    border-color:#F00
}
.page{
    float:left;
}
.verticalline{
    border-left: thick solid #ff0000;
}
.head{
    height:60px;
    width:auto;
    background:green;
}