JSFiddle - React, Tailwind, and code Playground

by Christoph

HTML

<div class="ui">
    <div class="form boxstyle">
            <ul>
                <li><label>Website Name</label><input type="text"/></li>
                <li><label>Website Subtitle</label><input type="text"/></li>
                <li><label>Website Description</label><textarea></textarea></li>
            </ul>
        </div>
</div>

CSS

.ui .form.boxstyle ul {
    border:1px solid #DDD; border-radius:10px; background:#FAFAFA; margin:10px 0 10px 0; box-shadow:inset 0 0 10px rgba(100,100,100,0.1); display:block; position:relative; clear:both; overflow: hidden;
}
.ui .form.boxstyle li {
    border-bottom:1px solid #DDD; min-height:32px; display:block; clear:both; position:relative;
}
.ui .form.boxstyle li:last-child {
    border-bottom:0px;
}
.ui .form.boxstyle li label {
    width:35%; text-indent:20px; display:block; line-height:32px; font-size:13px; color:#555; float:left;
}
.ui .form.boxstyle li input, .ui .form.boxstyle li textarea {
    width:-webkit-calc(65% - 90px); width:-moz-calc(65% - 90px); text-indent:10px; display:block; line-height:18px; font-size:13px; color:#555; padding:7px; border:0px; -webkit-appearance:textarea !important; -moz-appearance:textfield; appearance:textarea; margin:0 12px 0 0; float:right; height:18px; outline:none;
}
textarea { 
    resize: none;
}
textarea,input{
    font: 8px Arial;
}