JSFiddle - React, Tailwind, and code Playground

by afelixj

HTML

<ul class="top-level-tax">
                    <li>
        <a href="#" >
            <img src="http://i.imgur.com/SRVh4os.png">
            <span>Lorem ipsum dolor<span style="background-color: #38729c;"></span></span>
        </a>
    </li>
                    <li>
        <a href="#" >
            <img src="http://i.imgur.com/rBM2CYr.png">
            <span>consectetur adipisicing<span style="background-color: #a05995;"></span></span>
        </a>
    </li>
                    <li>
        <a href="#" class="" >
            <img src="http://i.imgur.com/9dFFuH5.png">
            <span>Mollitia harum<span style="background-color: #b38c51;"></span></span>
        </a>
    </li>
                    <li>
        <a href="#" >
            <img src="http://i.imgur.com/7bQ73kd.png">
            <span>veritatis ea ipsa<span style="background-color: #3d7d7d;"></span></span>
        </a>
    </li>
</ul>

CSS

body{
  background: url(http://i.imgur.com/ilgJJ1Q.gif);
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  height: 80px;
}
li{
  display: flex;
}
ul a {
    color: #fff;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    max-width: 240px;
    padding: 12px 50px;
    align-items: center;
    text-transform: uppercase;
    text-decoration: none;
}
li img{
    margin-right: 10px;
}
li span span {
    display: block;
    height: 2px;
    margin: 7px 0 -7px;
    width: 25px;
}
li:last-child{
  background: rgba(38, 46, 54, .6);
}
li:nth-child(2){ background: #a15796; }
li:nth-child(3){ background: #b48c4d; }
li:nth-child(4){ background: #3a7d7d; }