JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="adbanner1">
    <div class="bannerleft"><h2><span>Order</span> Now</h2></div>
    <div class="bannermid">
        
<div class="bannerlist">
<div class="listtop">
<select name="Val1">
 <option value="" selected="selected">Select Option 1</option>
<option value="X">X</option>
 <option value="A">A</option>
 <option value="H">H</option>
</select>
</div>
    <div class="listtop">
<select name="Val1">
 <option value="" selected="selected">Select Option 2</option>
<option value="X">X</option>
 <option value="A">A</option>
 <option value="H">H</option>
</select>
</div>
 </div>
 <div class="bannerlist">
<div class="listtop">
<select name="Val1">
 <option value="" selected="selected">Select Option 3</option>
<option value="X">X</option>
 <option value="A">A</option>
 <option value="H">H</option>
</select>
</div>
     <div class="listtop">
<select name="Val1">
 <option value="" selected="selected">Select Option 4</option>
<option value="X">X</option>
 <option value="A">A</option>
 <option value="H">H</option>
</select>
</div>
</div> 
        <div class="bannerlist">
<div class="listtop">
<select name="Val1">
 <option value="" selected="selected">Select Option 5</option>
<option value="X">X</option>
 <option value="A">A</option>
 <option value="H">H</option>
</select>
</div>
            <div class="listtop">
<select name="Val1">
 <option value="" selected="selected">Select Option 6</option>
<option value="X">X</option>
 <option value="A">A</option>
 <option value="H">H</option>
</select>
</div>
</div>
        
    </div>
    <div class="bannerright"><input name="submit" type="submit" class="sbutton" value="Order Now"></div>
</div>

CSS

.adbanner1 {
    display: inline-block;
    background:#7F60AE;
    width:100%;
    padding:0;
    margin:0;
    height:100px;
    line-height:100px;
    float:left;
    border-radius:2px;
}

.bannerleft, .bannerright, .bannermid {
float: left;  
color:#fff;
padding:0% 1%;
text-align:center;
}

.bannerleft {
    border-right:1px solid #fff;
}

.bannermid {
    width:70%;
}
.bannerleft, .bannerright {
    width:11%;
    height:100%;
}

.bannerlist {
    width:33%;
    float:left;
}

.bannerleft h2 {
    margin:0;
    padding:0;
    font-size:22px;
    Text-transform:uppercase;
    line-height: 30px;
     margin-top: 20px;
}

.sbutton {
background: #5FD879;
color: #FFF;
padding: 14px 8px;
font-size: 15px;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.4);
    outline: none;
box-shadow: 0px 2px 7px rgba(17, 17, 17, 0.43);
}

.listtop {
    width:100%;
    height:50px;
    line-height: 50px;
}