JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
    <h1 class="text-center">all your stuff in one place...</h1>

    <div class="air"></div>

    <form class="form-inline">
        <div class="col-sm-offset-4 col-md-offset-5">  
            <div class="form-group is-slideable">
                <button class="btn btn-primary btn-lg js-toggle-state" type="button">Invite me</button>
                <input class="form-control input-lg hideable is-hidden" type="text" name="name" placeholder="Enter your name">
                <button class="btn btn-primary btn-lg hideable is-hidden" type="button">Contact me</button>
            </div>
        </div>
    </form>
</div>

CSS

body {
    background: #9881AF;
    color: #FFF;
}

.btn-primary,
.btn-primary:active,
.btn-primary:focus {
    background: #746487;
    border: none;
    outline: 0;
}

.btn-primary:hover {
    background: #645675;
}

.is-slideable {
    position: relative;
    margin-left: 0;
    -webkit-transition: 0.6s margin-left;
            transition: 0.6s margin-left;
}

.is-slided {
    margin-left: -170px;
}

.hideable.is-hidden {
    opacity: 0;
    -webkit-transition: 0.2s 0s opacity;
            transition: 0.2s 0s opacity;
}

.hideable.is-visible {
    opacity: 1;
    -webkit-transition: 0.3s 0.4s opacity;
            transition: 0.3s 0.4s opacity;
}

JavaScript

$('.js-toggle-state').click(function() {
    $('.is-slideable').toggleClass('is-slided');
    $('.hideable').toggleClass('is-hidden').toggleClass('is-visible');
});