JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li><a href="http://planetoftheweb.com">Planetoftheweb</a></li><li><a href="http://iviewsource.com">iViewSource</a></li><li><a href="http://facebook.com/iviewsource">iVS on Facebook</a></li>
</ul>
<p>This is another paragraph</p>
<ul>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/redcargears_tn.jpg" alt="thumbnail" /></li>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/blackcarhood_tn.jpg" alt="thumbnail" /></li>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/blackcarside_tn.jpg" alt="thumbnail" /></li>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/bluecargrille_tn.jpg" alt="thumbnail" /></li>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/bluecartire_tn.jpg" alt="thumbnail" /></li>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/browncarhoodorn_tn.jpg" alt="thumbnail" /></li>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/browncartaillight_tn.jpg" alt="thumbnail" /></li>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/eaglehoodorn_tn.jpg" alt="thumbnail" /></li>
<li><img src="http://planetoftheweb.com/exercises/gridofimages/images/springv8_tn.jpg" alt="thumbnail" /></li>
CSS
body {
width: 100%;
}
ul {
margin: 0 auto;
padding: 0;
}
li {
list-style: none;
display: inline-block;
background: url('http://planetoftheweb.com/images/misc/pow-background.jpg');
padding: 10px;
}
a {
color: white;
text-decoration: none;
font-family: Arial;
font-weight: bold;
}
li:hover {
background: yellow;
background: url('http://jsfiddle.net/img/top-bg.png');
}
li:hover a{
color: black;
}