JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="inline-form">
    <form method="post" action="" class="form-area">
        <label for="email">E-mail:</label>
        <input type="text" name="email" class="email" placeholder="Your e-mail" />
        <input type="submit" value="Send" class="btn" />       
    </form>
    <div class="inline-form-after-submit">
        <p>Thanks for registration.</p>
    </div>
</div>

CSS

body{
    font-family: Arial;
    font-size: 130%;
    color: white;
}
.inline-form{
    height: 80px;
    background: #130401;
    overflow: hidden;
}
.inline-form .form-area,
.inline-form .inline-form-after-submit{
    height: 80px;
    line-height: 80px;
    position: relative;
    padding: 0 1em;
}
.inline-form .form-area{
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.inline-form .inline-form-after-submit{
}
.btn{
    border: none;
-webkit-box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0 0 inset,#2C5A5F 0 0 0 1px,rgba(255, 255, 255, 0.3) 0 2px 0 0;
-moz-box-shadow: rgba(255,255,255,0.3) 0 1px 0 0 inset,#2c5a5f 0 0 0 1px,rgba(255,255,255,0.3) 0 2px 0 0;
box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0 0 inset,#2C5A5F 0 0 0 1px,rgba(255, 255, 255, 0.3) 0 2px 0 0;
background: url(http://d2wvue8upgqfzb.cloudfront.net/assets/teaser/noise-a59b72a9b991bc80be38517e6ce6da9f.png),-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #78C5D3), color-stop(100%, #53B7C2));
background: url(http://d2wvue8upgqfzb.cloudfront.net/assets/teaser/noise-a59b72a9b991bc80be38517e6ce6da9f.png),-webkit-linear-gradient(#78C5D3,#53B7C2);
background: url(http://d2wvue8upgqfzb.cloudfront.net/assets/teaser/noise-a59b72a9b991bc80be38517e6ce6da9f.png),-moz-linear-gradient(#78C5D3,#53B7C2);
background: url(http://d2wvue8upgqfzb.cloudfront.net/assets/teaser/noise-a59b72a9b991bc80be38517e6ce6da9f.png),-o-linear-gradient(#78C5D3,#53B7C2);
background: url(http://d2wvue8upgqfzb.cloudfront.net/assets/teaser/noise-a59b72a9b991bc80be38517e6ce6da9f.png),linear-gradient(#78C5D3,#53B7C2);
color: white;
text-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-weight: bold;
outline: none !important;
cursor: pointer;
    
    font-size: 16px;
height: 46px;
-webkit-box-shadow:...

CoffeeScript

$('.inline-form').submit ->
 $this = $ @
 $this.find('.form-area').css 'margin-top', '-80px'
 false