JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<form class="form-auth" auction="#">
    <div class="actions">
        <button class="btn btn-primary" data-role="btn-login">Login</button>
    </div>

    <div class="fields">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">@</span>
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon2">@</span>
            </div>
            <input type="password" class="form-control" aria-label="Username" aria-describedby="basic-addon2">
        </div>
    </div>
</form>

SCSS

body {
    padding: 5%;
}

.form-auth {
    .fields {
        display: none;
		margin-top: 20px;
    }
}

JavaScript

jQuery(".form-auth").on('click', '[data-role=btn-login]', function(e) {
    e.preventDefault();
    $('.form-auth .fields').show();
})