JSFiddle - React, Tailwind, and code Playground

by vo1daus

HTML

<div class="container">
        <div class="item25">
            <div class="block"><input type="text"/></div>
        </div>
        <div class="item25">
            <div class="block"><input type="text"/></div>
        </div>
        <div class="item25">
            <div class="block"><input type="text"/></div>
        </div>
        <div class="item25">
            <div class="block"><input type="text"/></div>
        </div>
    </div>
    <div class="container">
        <div class="item25">
            <div class="block"><input type="text"/></div>
        </div>
        <div class="item75">
            <div class="block"><input type="text"/></div>
        </div>
    </div>

CSS

body {
    padding-top:50px;
    background:#aaa;
} 

.container {
    width:100%;
    overflow: hidden;
}
.item25, .item75 {
    float: left;
    width:25%;
    height:50px;
}
.item25, {
    width:25px;
}
.item75 {
    width:75%;
}

.block{
    padding:0 5px;    
}
.block input{
    padding:0;
    margin:0;
    border:0 none;
    background: #ffffff;
    width:100%;
    -moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5); 
    box-shadow: 1px 1px 10px rgba(0,0,0,0.5); 
}