JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class=socialNetbanner>
    <ul>
        <li><a href="some-url-here" target="_blank"><img src="http://www.safecontractor.com/graphics/twitter.gif"></a></li> 
        <li><a href="some-url-here" target="_blank"><img src="http://www.safecontractor.com/graphics/linkedin.gif" alt="Join us on Linked In"></a</li>
        <li><a href="some-url-here" target="_blank">something</a</li>        
    </ul>
</div>

CSS

body{
    background:#333;
    padding:20px;
}

.socialNetbanner{
    width:200px;
    height:300px;
    position:relative;
    clear:both;
    display:block;
    border:1px solid white;
}

.socialNetbanner ul{
   width:100%;
   height:100%;
}

.socialNetbanner li{
    width:100%;
    height:auto;
    display:block;
    position:relative;
    text-align:center;
    line-height:40px;
    margin:10px 0 0 0;
}
.socialNetbanner li:nth-child(odd){
  
}
.socialNetbanner li:nth-child(even){
 
}
.socialNetbanner a{
    color:white;
    text-decoration:none;
}

.socialNetbanner img{
    width:100%;
}