JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<div class="navigation">
	<ul>
	<li><a href = 'index.html'>Home</a></li>
	<li><a href = 'media.html'>Media Design</a></li>
	<li><a href = 'innovatie.html'>Innovatieroutes</a>
	<li><a href = 'info.html'>Opleiding</a></li>
	<li><a href = 'info.html'>Fontys</a></li>
	<li><a href = 'info.html'>Toekomst</a></li>
	<li><a href = 'contact.html'>Contact</a></li>
    <li><img src="https://shopsocially.com/wp-content/uploads/2014/10/Grey-Background-48.jpg"> </li>
</ul>
</div>

CSS

body {
	width:960px;
	font-family: 'Open Sans', sans-serif;
	margin:5px auto; 
	padding:0 auto;
	
	}

ul {
	height:60px;
    width:100%px;
    margin:0 auto;
    padding:0; 
    list-style-type:none;
	
	}

li {
	float:left;
	width:240px;
    height: 59px;
    overflow: hidden;
	}

ul a {
	color:black;
	text-decoration:none;
	font-size:19px;
	display:block;
	
	}
	
ul li a {
	display:block;
	padding:20px 45px;
	line-height:1.0em;
	text-decoration:none;
	transition:500ms ease;
}
ul li ul {
	visibility: hidden;
}
	

ul a:hover {
	
	color:yellow; 
	background-color:black; 
	
	}

img{
    width:100%;
}