JSFiddle - React, Tailwind, and code Playground

by maxious

HTML

<div class="fields-group">
     <h3 class="fields-group__title">Group title</h3>

    <div class="field-editor g-clearfix">
        <div class="field-editor__caption">
            <label for="" class="field-editor__label">Caption</label>
        </div>
        <div class="field-editor__control">
            <input class="field-editor__input" placeholder="Default data" /> <span class="field-editor__validation-msg"></span>
 <span class="field-editor__hint">This is hint</span>

        </div>
    </div>
    <div class="field-editor g-clearfix">
        <div class="field-editor__control">
            <label for="" class="field-editor__label">
                <input type="checkbox" class="field-editor__checkbox" />Caption</label> <span class="field-editor__validation-msg"></span>

            <span
            class="field-editor__hint">This is hint</span>
        </div>
    </div>
    <div class="field-editor g-clearfix">
        <div class="field-editor__caption">
            <label for="radio1" class="field-editor__label">Caption</label>
        </div>
        <div class="field-editor__control">
            <label for="radio1" class="field-editor__label">
                <input id="radio1" type="radio" class="field-editor__checkbox" />Caption</label>
            <label for="radio2" class="field-editor__label">
                <input id="radio2" type="radio" class="field-editor__checkbox" />Caption</label>
            <label for="radio3" class="field-editor__label">
                <input id="radio3" type="radio" class="field-editor__checkbox" />Caption</label> <span class="field-editor__validation-msg"></span>

            <span
            class="field-editor__hint">This is hint</span>
        </div>
    </div>
    <div class="field-editor g-clearfix">
        <div class="field-editor__caption">
            <label for="" class="field-editor__label">Caption</label>
        </div>
        <div class="field-editor__control">
            <input...

CSS

* {
    font-size: 100%;
    font-family: Arial, sans-serif;
}
.g-clearfix {
    *zoom: 1;
}
.g-clearfix:before, .g-clearfix:after {
    display: table;
    content:"";
    line-height: 0;
}
.g-clearfix:after {
    clear: both;
}
.fields-group {
    border: 1px dashed #cccccc;
    width: 500px;
    padding: 10px;
}
.fields-group__title {
    font-weight: bold;
    margin: 0 0 10px 0;
}
.field-editor {
    width: 100%;
    margin: 0 0 10px 0;
}
.field-editor__caption {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}
.field-editor__required:after {
    color: #ff0000;
    content:"*";
}
.field-editor__control {
    display: inline-block;
    margin-left: 30%;
    vertical-align: top;
}
.field-editor__input {
    width: 100%;
    border: 1px solid #666666;
}
.field-editor__input:focus {
    border: 1px solid #ffffff;
    box-shadow: 0 0 10px #666666;
}
.field-editor__input_state_non-valid {
    border: 1px solid #ff0000;
}
.field-editor__input_type_numeric {
    text-align: right;
    width: 30%;
}
.field-editor__validation-msg {
    color: #ff0000;
    font-size: 75%;
}
.field-editor__hint {
    color: #666666;
    font-size: 75%;
}