JSFiddle - React, Tailwind, and code Playground

HTML

<title>Login</title>  


<body>





<div class="formpart">

        <div class="mainform">
        <h3><img src="http://www.club-3d.com/tl_files/club3d/uploads/en/content/Accesories/CAC-1052/cac-1052_use_01.png" alt="" width="10px" height="10px" style="padding-right:5px">Admin Login</h3>

            <ul class="text">

                <label>Username</label>
                <li><input id="inputId" name="username" type="text" class="user"></li>
                <label>Password</label>
                <li><input name="password" type="password" class="paswrd"></li>
                <label></label>
                <li class="rembr"><input name="" type="checkbox" value="">Remember me</li>
</ul>
<ul class="list2">
                <li><input name="" type="submit" value="Log in"></li>
            </ul>
        </div>
</div>

</body>

CSS

#main .formpart
    { 
    width:800px; 
     margin: 120px 0 0 500px;
        padding: 0;
        position: relative; 
    }
    .formpart h2
    { 
    margin:0px 0px 30px; 
    padding:0px; 
    padding-bottom:5px; 
    float:left; 
    font:normal 25px Arial, Helvetica, sans-serif; 
    color:#000000;
    width:800px;
    border-bottom:1px solid #1A446C; 

    }
    .formpart .mainform
    {
    width:535px;
    border:1px solid #ccc; 
    border-radius:5px; 
    background:#F9F9FB; 
    margin 0p 0px 0px 50px;
    float:left;
    }
    .formpart .mainform h3
    { 
    margin:0px; 
    padding:5px; 
    width:525px; 
    line-height:30px; 
    font:normal 13px Arial, Helvetica, sans-serif; 
    color:#3C3C3C; 
    float:left; 
    background:#F2F2F2; 
    border-radius:5px 5px 0px 0px;
    border-bottom:1px solid #ccc;
    }

    .formpart .mainform ul.text
    { 
    margin:70px 0px 0 50px; 
    padding:0px; 
    list-style:none; 
    width:500px;
    }

    .formpart .mainform ul.text li
    { 
    margin:0px; 
    padding:0px 0px 10px; 
    float:left; 
    width:300px; 
    font:bold 13px Arial, Helvetica, sans-serif; 
    line-height:25px;
    }
    .formpart .mainform ul.text li.rembr
    { 
    margin:0px 0px 20px 115px; 
    padding:0px 0px 10px; 
    float:left; 
    width:300px; 
    font:normal 12px Arial, Helvetica, sans-serif; 
    line-height:30px; 
    color:#6f6f6f;
    }
    .formpart .mainform ul.text label
    { 
    margin:0px; 
    padding:0px; 
    float:left; 
    font:bold 15px Calibri; 
    color:#000; 
    width:120px;
    }

    .formpart .mainform ul.text input
    { 
    margin:0px; 
    padding:0px 0px 0px 5px; 
    width:320px; 
    height:30px; 
    border:1px solid #ccc; 
    border-radius:5px;
    }
    .formpart .mainform ul.text input.user
    { 
    margin:0px; 
    padding:0px 0px 0px 30px; 
    float:left; 
    width:250px; 
    font:bold 13px Arial, Helvetica, sans-serif; 
    line-height:25px; 
   ...