JSFiddle - React, Tailwind, and code Playground

by Mukul kant

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;
}
body{margin:0px;
}
header h1{
   /*( float:left;*/
    margin: 11px;
}
header{
    background-color:white;
    font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    color:#F00;
    /*float:left;*/
    display:block;
}
nav{
    background-color:#F00;
   /* float:right;*/
    height:60px;
    width: 900px;
    display:block;
    width:auto;
}
nav a{
    text-decoration:none;
    list-style:none;
    color:white;
    font-size:20px;
    padding:8px;
    display:inline-block
}
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;
    background-color:#F00;
    width:100%;
    min-width: 2000px;
}