JSFiddle - React, Tailwind, and code Playground

HTML

<div id="network-icons">
					<div id="container" class="clearfix">
    
         <ul class="clearfix">
            <li>
	            <img src="images/icon.svg"/>
            </li>
            <li>
	            <img src="images/icon.svg"/>
            </li>
            <li>
	            <img src="images/icon.svg"/>
            </li>
            <li>
	            <img src="images/icon.svg"/>
            </li>
        </ul> 
    
</div>




					
				</div>

CSS

#network-icons {
	width: 250px;
	height: 140px;
	float: left;
	background-color: red;
	position: relative;
}

#container{
    display:block;
    width:250px;
    height: 140px;
    border:1px solid red;
    
    
    
}

#container ul{
    display:block;
    border:1px solid green; 
    height: 100%;
    background-color: lime;
    margin:0 auto;
}

#container ul li{
    width:45px;
    height:45px;
    background:#ddd;
    margin-top:50px;
    float:left;
    text-align:center;
    line-height:50px;
    list-style-type: none;
}

#container ul li:hover {
	box-shadow: inset 0px -5px 0px 0px black;
}