JSFiddle - React, Tailwind, and code Playground

by Puni Charana

HTML

<div class='clickHere' id='trialClick'>
    <p>Sign up for your free trial today! <span>Click here</span></p>
</div>
<div class='clickHere' id='trialForm'>
    <form>
        <input type='text' value='Full Name' name='fullname'><br>
        <input type='text' value='Email' name='email'><br>
        <input type='text' value='Confirm email' name='email2'><br>
        <input type='submit' value='submit'>
    </form>
</div>

CSS

#trialClick{
    width:200px;
    height:auto;
    padding:10px;
    background-color:#FFCC00;
}
#trialClick span{
    color: #fff;
}
#trialForm{
    width:0px;
    height:auto;
    padding:10px;
    background-color:#FFCC00;
}

JavaScript

$(document).ready(function () {
    'use strict';
    $('#trialForm').hide();

    $('#trialClick').click(function () {
        $(this).animate({width: "0px"}).hide();
        $('#trialForm').show().animate({width: "200px"},'slow');
    });

    $('#trialForm').click(function () {
        $(this).animate({width: "0px"}).hide();
        $('#trialClick').show().animate({width: "200px"},'slow');
    });
    $('.clickHere form input').click(false);
});