JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="clearfix">
        <li>
            <div class="clearfix">
                <ul>
                    <li>top</li>
                </ul>
                <span>icon</span>
            </div>
            <div class="container relative">
                <ul class="dropdown-list absolute">
                    <li>
                        <div class="label clearfix">
                            <input type="checkbox" value="{{name}}">
                            <span>{{name................}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        
    </ul>

CSS

/* config */
ul {
  list-style: none;
}
ul, li {
    margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  word-wrap: break-word;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
.clearfix >div, .clearfix >li, .clearfix >span, .clearfix >ul, .clearfix >input {
  float: left;
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}
input, span {
    display: block;
}
/* end: config */

.dropdown-list {
    background-color: yellow;
}