JSFiddle - React, Tailwind, and code Playground

by Christian Juth

HTML

<script src="https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"></script>
<h1 class="text-center">Form</h1>

<hr>
<form>
    <div class="form-group">
        <label>Email</label>
        <input class="form-control" type="text">
    </div>
    <div class="form-group">
        <label>Who you are</label>
        <textarea class="form-control" rows="4"></textarea>
    </div>
    <div class="form-group">
        <label>Favorite number</label>
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <div class="form-group">
        <label>How many pizzas</label>
        <div class="form-control">
            <label class="radio-inline">
                <input type="radio" name="pizzas" value="male">1</label>
            <label class="radio-inline">
                <input type="radio" name="pizzas" value="female">2</label>
            <label class="radio-inline">
                <input type="radio" name="pizzas" value="female">3</label>
        </div>
    </div>
    <div class="form-group">
        <label>Where did you hear about us</label>
        <div class="form-control">
            <label>
                <input type="radio" name="referral" value="male">The internet</label>
            <label>
                <input type="radio" name="referral" value="female">From a friend</label>
            <label>
                <input type="radio" name="referral" value="female">Other</label>
        </div>
    </div>
    <div class="form-group">
        <div class="checkbox">
            <input type="checkbox">Send me updates</div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn">Submit</button>
    </div>
</form>

CSS

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: Open Sans;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.text-center {
    width: 100%;
    text-align: center;
}
hr {
    width: 80%;
    margin: 5px 10%;
}
form {
    width: 60%;
    margin: 0 20%;
    display: inline-block;
}
form .form-group {
    width: 100%;
    margin: 10px 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
form .form-group label, form .form-group .form-control {
    width: 50%;
    padding: 3px 10px;
    display: inline-block;
    margin: 0;
}
form .form-group > label {
    font-weight: bold;
    text-align: right;
}
form .form-group div.form-control {
    padding: 0;
}
form .form-group .checkbox, form .form-group .btn {
    margin-left: 50%;
}
form .form-group .form-control label {
    width: 100%;
    margin: 0;
    padding: 0;
}
form .form-group .form-control label.radio-inline {
    width: auto;
    display: inline-block;
}