JSFiddle - React, Tailwind, and code Playground

by Sunny Sharma

HTML

<div class="container">
    <div class="first row">
        <label>First Input:
            <input id="firstInput" pattern="[0-9]" />
        </label>
    </div>
    <div class="second row">
        <label>Second Input:
            <input id="secondInput" />
        </label>        
    </div>
    <div class="third row">
        <label>Third Input:
            <input id="thirdInput" />
        </label>
    </div>
     <div class="fourth row">
        <label>Fourth Input:
            <input id="fourthInput" />
        </label>
    </div>
     <div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div>
    <div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div><div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div>
    <div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div>
    <div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div>
    <div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div>
    <div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div>
    <div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div><div class="fifth row">
        <label>Fifth Input:
            <input id="fifthInput" />
        </label>
    </div>
</div>

CSS

body{
    padding:10px 0;
    background:#e6e6e6;
}
.row{ height:60px; float:left;border:1px solid #ccc;margin:30px 10px 0;padding:10px;background:#efa;}


.row label, .row input{height:40px;line-height:40px;font-size:25px;}