JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div class="form">
    <div class="heading">Yo yo yo!</div>
    <div class="field">
        <label>
            <span class="field-label">Holla</span>
            <input type="text" class="field-input"/>
        </label>
    </div>
    <div class="field">
        <label>
            <span class="field-label">Holla</span>
            <input type="text" class="field-input"/>
        </label>
    </div>
    <div class="footer">
        <button>OK</button>
    </div>
</div>

SCSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 20px;
}

input {
    outline: none;
}

@mixin form-row {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.form {
    .heading,
    .field {
        @include form-row;
    }
    
    .heading {
        font-weight: bold;
        font-size: 14px;
    }
}