JSFiddle - React, Tailwind, and code Playground

by khsjds

HTML

<form method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="wodFF5NOQ0vo1KKOiFKPNdJEOxgrxWW1eSRJh9oWf5wwdbEigsSzqrpnnfMk9lKI">
    <p><label for="id_username">Username:</label> <input type="text" name="username" maxlength="150" autofocus="" required="" id="id_username"> <span class="helptext">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</span></p>
<p><label for="id_last_name">Last name:</label> <input type="text" name="last_name" maxlength="150" id="id_last_name"></p>
<p><label for="id_first_name">First name:</label> <input type="text" name="first_name" maxlength="30" id="id_first_name"></p>
<p><label for="id_unit">Unit:</label> <input type="text" name="unit" maxlength="30" required="" id="id_unit"> <span class="helptext">請輸入單位</span></p>
<p><label for="id_callno">Callno:</label> <input type="text" name="callno" maxlength="20" required="" id="id_callno"> <span class="helptext">請輸入電話</span></p>
<p><label for="id_email">Email address:</label> <input type="email" name="email" maxlength="254" id="id_email"></p>
<p><label for="id_password1">Password:</label> <input type="password" name="password1" required="" id="id_password1"> <span class="helptext"></span></p><ul><li>Your password can't be too similar to your other personal information.</li><li>Your password must contain at least 8 characters.</li><li>Your password can't be a commonly used password.</li><li>Your password can't be entirely numeric.</li></ul><p></p>
<p><label for="id_password2">Password confirmation:</label> <input type="password" name="password2" required="" id="id_password2"> <span class="helptext">Enter the same password as before, for verification.</span></p>
    <button type="submit">註冊</button>
</form>

CSS

form {
        margin: 10px;
        display: table;
        border-spacing: 7px;
        border-collapse: separate;
    }
    p {
        display: table-row;
    }
    label {
        color: #404040;
        font-size: 18px;
        line-height: 18px;
        padding-top: 10px;
        text-align: right;
        width: 300px;
        display: table-cell;
    }
    input, select, textarea {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 13px;
        font-weight: normal;
        line-height: normal;
        border: 1px solid #CCCCCC;
        font-size: 13px;
        height: 18px;
        line-height: 18px;
        padding: 4px;
        width: 150px;
        align-items: left;
        display: table-cell;
    }
    span {
        color: #404040;
        font-size: 15px;
        line-height: 18px;
        padding-top: 6px;
        text-align: left;
        width: 400px;
        display: table-cell;
    }
    ul {
        display: table-row;
        font-size: 13px;
    }
    li {
    }