JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_container">
    <div class="sub_container">
        <div class="floating">wookie1</div>
        <div class="floating">wookie2</div>
        <div class="floating">wookie3</div>
        <div class="floating">wookie4</div>
        <div class="floating">wookie5</div>
    </div>
</div>

CSS

.main_container {
    position: absolute;
    width:380px;
    height:250px;
    background-color: grey;
}
.sub_container {
    display: inline-table;
    position: absolute;
    width:auto;
    height:30px;
    border:1px solid #333;
    float: left;
    background-color: yellow;
    left: 0px;
    right: 0px;
    margin: 0px auto;
}
.floating {
    display: inline-block;
    width:65px;
    font-size:20px;
    line-height:30px;
    padding:0 5px 0 5px;
    border: 1px solid black;
    margin: 3px;
}
.menu_tags:hover {
    background-color:#333;
    color:#FFF;
}