JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<form action="test.php" method="get">
    <div> <span>type=hidden</span>

        <input type="hidden" />
    </div>
    <div><span>type=text</span>

        <input type="text" />
    </div>
    <div><span>type=search</span>

        <input type="search" />
    </div>
    <div><span>type=tel</span>

        <input type="tel" />
    </div>
    <div><span>type=url</span>

        <input type="url" />
    </div>
    <div><span>type=email</span>

        <input type="email" />
    </div>
    <div><span>type=password</span>

        <input type="password" />
    </div>
    <div><span>type=datetime</span>

        <input type="datetime" />
    </div>
    <div><span>type=date</span>

        <input type="date" />
    </div>
    <div><span>type=month</span>

        <input type="month" />
    </div>
    <div><span>type=week</span>

        <input type="week" />
    </div>
    <div><span>type=time</span>

        <input type="time" />
    </div>
    <div><span>type=datetime-local</span>

        <input type="datetime-local" />
    </div>
    <div><span>type=number</span>

        <input type="number" />
    </div>
    <div><span>type=range</span>

        <input type="range" min=0 max=100 setp=20 value=50 />
    </div>
    <div><span>type=color</span>

        <input type="color" />
    </div>
    <div><span>type=checkbox</span>

        <input type="checkbox" id="ck_red" value="red" name="color" />
        <label for="ck_red">红</label>
        <input type="checkbox" id="ck_yel" value="yellow" name="color" />
        <label for="ck_yel">黄</label>
        <input type="checkbox" id="ck_gre" value="green" name="color" />
        <label for="ck_gre">绿</label>
    </div>
    <div><span>type=radio</span>

        <input type="radio" id="rd_m" checked="checked" value="1" name="sex" />
        <label for="rd_m">男</label>
        <input type="radio" id="rd_f" value="0" name="sex" />
        <label for="rd_f">女</label>
    </div>
    <div><span>type=file</span>

        <input...

CSS

div {
    margin:5px;
    padding:5px;
    background-color:#EEE;
}
div:hover {
    background-color:#CCC;
}
span {
    display:inline-block;
    width:200px;
    text-align:right;
    padding-right:10px;
}