JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="bba">
		<h1 style="text-align: center">Text</h1>
		<div id="boxb1">
			<h3>box1</h3>
			<div id="twlth" width="10%" height="6%"></div>
      
		</div>    
    <div class="clear"></div>
    </div>
</div>

CSS

html{
}
body {
    padding-bottom: 1%;
}

.container{
    width: 98.3%;
    margin: 10px;
    padding-bottom: 5%;
    position: relative;   
}

#twlth{
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    float: left;
}

#boxb1{
	width:21%;   
    padding-bottom: 1%;
    float: left;
	margin:10px;
        text-align: center;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
    

.bba{
    width: 100%;
    -webkit-box-shadow: 10px 10px 108px 0px rgba(0,0,0,0.68);
    box-shadow: 10px 10px 108px 0px rgba(0,0,0,0.68);
    padding-bottom: 1%;
    margin-bottom: 100px;
}
.clear {
  clear: both;
}