JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <ul class="list">
        <li class="item1">     
            <span> my text </span>
            <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373049_39875583837_702729249_q.jpg"/>
        </li>
        <li class="item2">
        	<span> my text text text text </span>
        	<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373049_39875583837_702729249_q.jpg" />
        </li>
        <li class="item3">
	        <span> my text text text text </span>
	        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373049_39875583837_702729249_q.jpg" />
        </li>
        <li class="item4">
	        <span> my text </span>
	        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373049_39875583837_702729249_q.jpg" />
        </li>
    </ul>
</div>

CSS

#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:250px;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}
#wrapper ul > li {
    width: 50px;
    display:block;
    float: left;
    background: black;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    height:100%;
}
#wrapper ul > li span {
    width: 100%;
    display: block;
    float: left;
}
#wrapper ul > li img {
    display: block;
    float:left;
}