JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
  <div class="container clearfix">
    <ul>
        <li class="item">
            <div class="label">Label</div>
            Item
        </li>
        <li class="item">
            <div class="label">Label</div>
            Item
        </li>
        <li class="item">
            <div class="label">Label</div>
            Item
        </li>
        <li class="item">
            <div class="label">Label</div>
            Item
        </li>
    </ul
  </div>
</div>

CSS

.clearfix{
    zoom: 1; /*IE*/
}
.clearfix:after{
    content: '';
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear:both;
}
.page{
    margin:20px;
}
.container{
    background-color:green;
}
.label{
    position:absolute;
    background-color:blue;
    top:-10px;
    color:white;
}
li {
    position:relative;
    width:100px;
    height:50px;
    float:left;
    border: 1px solid black;
}