JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <form name="settings" method="get" id="settings" action=".py">
        <fieldset id="settings">
            <legend id="legend">Settings</legend>
            <div class="clear"></div>
            <div class="ul-box">
                <ul>
                    <li class="field-title">
                        <label>Name:</label><input id="settings-field" type="text"/>
                    </li>
                    <li class="field-title">
                        <label>Username:</label><input id="settings-field" type="text"/>
                    </li>
                    <li class="field-title">
                        <label>Email:</label><input id="settings-field" type="text"/>
                    </li>
                    <li class="field-title">
                        <label>Change password:</label><input id="settings-field" type="password"/>
                    </li>
                </ul>
            </div>
            <div class="ul-box">
                <ul>
                    <li class="field-title">
                        <label>Website:</label><input id="settings-field" type="text"/>
                    </li>
                    <li class="field-title">
                        <label>Description:</label><textarea name="Description" id="settings-textarea" type="text" rows="2" cols="25" wrap="soft"></textarea>         
                    </li>
                    <li class="field-title">
                        <label>Location:</label><input id="settings-field" type="text"/>
                    </li>
                </ul>
            </div>
            <div class="clear"></div>
        </fieldset>
    </form>
</div>

CSS

/*** GLOBAL ***/
*
{
    padding: 0;
    margin: 0 auto;
    outline: none;
}

html, body
{
    height: 100%;
    font: .9em Arial ,san-serif;
}

.clear
{
    clear: both;
}

ul, li
{
    list-style: none;
}   

#container
{
    min-width: 600px;
    max-width: 1000px;
    width: 85%;
    height: auto;
    min-height: 100%;
    
}  

fieldset#settings
{
    margin: 0 auto 20px;
    padding: 10px 0 20px;
    width: 100%;
    height: 100%;
    background: #deebff;
    border: none;
}

fieldset legend#legend
{
    float: left;
    padding: 5px 10px;
}

fieldset#settings div.ul-box
{
    float: left;
    padding: 10px;
    margin: 0 0 0 10px;
    background: yellow;
}

div#settings ul
{
    float: left;
    
}

fieldset#settings div.ul-box ul li
{
    /* float: left; */
    color: #666;
    
    margin: 2px;
    padding: 5px 10px;
    background: cyan;
    
}

fieldset#settings div.ul-box ul li label
{
    background: red;   
    
}

input#settings-field, textarea#settings-textarea    
{        
    resize: none;
    overflow: hidden;  
    border: none;
    outline: none;
    padding: 3px;
    margin: 0 5px;
    width: 200px;
    color: #06f;
    font: 14px Arial, sans-serif;     
    background: #fff;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -moz-box-shadow: inset 0px 1px 2px #aaa;
    -webkit-box-shadow: inset 0px 1px 2px #aaa;
}

input#settings-field:focus, textarea#settings-textarea:focus  
{
    background: #FFFFC4;
    /* -moz-box-shadow: 0px 0px 5px #66a3ff; */
    /* -webkit-box-shadow: 0px 0px 5px #66a3ff;  */
}