JSFiddle - React, Tailwind, and code Playground

by templates4all

HTML

<div id="links">
<a href="http://www.template4all.com/">Home<img src="Your-image.gif"></a>
<a href="http://www.template4all.com/wordpress/">Wordpress<img src="Your-image.gif"></a>
<a href="http://www.template4all.com/joomla/">Joomla<img src="Your-image.gif"></a>
<a href="http://www.template4all.com/css/">CSS<img src="Your-image.gif"></a>
<a href="http://www.template4all.com/flash/">Flash<img src="Your-image.gif"></a>
<a href="http://www.template4all.com/templates/">Templates<img src="Your-image.gif"></a>
</div>

CSS

div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}