JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<div class="form-data">
    <label class="flt">Name: </label><input type="text" />
    <hr class="cls" />
</div>

<div class="form-data">
    <label class="flt">Name: </label><input type="text" />
    <hr class="cls" />
</div>
<div class="form-data">
    <label class="flt">Name: </label><input type="text" />
    <hr class="cls" />
</div>
<div class="form-data">
    <label class="flt">Name: </label><input type="text" />
    <hr class="cls" />
</div>
<div class="form-data">
    <label class="flt">Name: </label><input type="text" />
    <hr class="cls" />
</div>

CSS

.form-data{
    height:40px;
    padding:3px;
    margin:2px;
}
.flt{float:left;} //.flt = class named float left
.frt{float:right;}//.frt = class named flotat right
.cls{clear:both;} //inspired by clear screen in dos = cls

hr{
    width:30%;
}

label{
    min-width:140px;
    line-height:30px;
    font-size:20px;
    color:#aaf;
    padding-left:5px;
}

input[type=text]{
    margin-left:7px;
    height:30px;
    font-size:22px;
    border-radius:5px;
    width:300px;
}