JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">

        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>

</div>

CSS

.main
        {
            height:50px;
            width: 100%;
            border: 1px solid #000000;
            margin-top: 50px;
        }

        .one
        {
            height: 60px;
            width: 130px;
            border: 5px solid red;
            position: relative;
            float: left;
            margin-left: 25%;
        }
        .two
        {
            height: 60px;
            width: 25px;
            border: 5px solid red;
            position: relative;
            float: left;
            margin-left: 15px;
        }
        .three
        {
            height: 60px;
            width: 15px;
            border: 5px solid red;
            position: relative;
            float: left;
            margin-left: 15px;
        }
        .four
        {
            height: 60px;
            width: 130px;
            border: 5px solid red;
            position: relative;
            float: left;
            margin-left: 15px;
        }
        .five
        {
            height: 60px;
            width: 100px;
            border: 5px solid red;
            position: relative;
            float: left;
            margin-left: 15px;
        }