JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="container">
    <a href="#" class="btn create">Create New Item</a>
    <div class="form">
        <input type="text">
        <input type="text">
        <input type="text">
        <a href="#" class="btn submit">Add</a>        
    </div>
</div>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.container {
 width: 400px;
 background: #efefef;
 border: 1px solid #ccc;
 border-radius: 3px;
 font-family: sans-serif;
 font-size: 13px;
 color: #222;
 padding: 20px;
 margin: 20px auto;    
}

.container .btn {
 color: #fff;  
 font-weight: bold;
 background: #006fce;
 border: 1px solid #0f3b60;
 border-radius: 3px;
 width: 100%;
 display: block;
 text-align: center;
 padding: 5px 0;
 text-decoration: none;
}

.container .form {
 background: #fff;
 display: none;
 padding: 20px;
 border-radius: 3px;
 border: 1px solid #ccc;
}

.container .form input {
 width: 100%;
 display: block;
 padding: 3px 5px;
 margin: 0 0 10px 0;    
}

JavaScript

$('.create').on('click', function(e){
   e.preventDefault();
    $(this).fadeOut(250, function(){
        $('.form').fadeTo(250,1);
    });        
});

$('.submit').on('click', function(e){
    e.preventDefault();
    $('.form').fadeOut(250, function(){
        $('.create').fadeTo(250,1);
    });        
});