JSFiddle - React, Tailwind, and code Playground

by jahrichie

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<!-- SUCCESS -->
<div id="bid-button-wrapper">
    <div class="success-or-fails" style="background: #62bc58;"> <i class="icon-check-sign">&nbsp;</i> Congratulations, you are currently the high bidder!!!</div>
    <input class="bid-box" />
    <input class="bid-submit" type="submit" />
    <br>
    <input class="confirm-bid-box" type="submit" value="Confirm your $7,000k bid?" />
    <input class="cancel-bid-confirm" type="submit" value="X" />
</div>

CSS

body {
    font-family:"proxima-nova", arial, helvitca, sans-serif;
}
#bid-button-wrapper {
    position:relative;
    width:450px;
    margin:100px auto;
}
.bid-box {
    width: 355px;
    height: 50px;
    border: 1px solid #b00b00;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    padding-left: 10px;
    font-size: 16px;
    outline: none;
}
.confirm-bid-box {
    color:#FFF;
    background: #ed1a39;
    width: 0;
    height: 50px;
    border: 1px solid #b00b00;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    padding-left: 10px;
    font-size: 16px;
    outline: none;
}
.cancel-bid-confirm {
    position:absolute;
    z-index:200;
    margin-left:-20px;
    color:#FFF;
    background: #404040;
    width:0;
    height: 50px;
    border: 1px solid #b00b00;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    padding-left: 10px;
    font-size: 16px;
    outline: none;
    z-index:3
}
.confirm-bid-box, .cancel-bid-confirm {
    position: absolute;
    width:0;
    top:1px;
    z-index:-2;
}

.cancel-bid-confirm {
    right:101px;
}

.bid-box:focus {
    border:1px solid #ed1a39;
}
.bid-submit {
    background: #ed1a39;
    height: 54px;
    width: 140px;
    margin-left: -140px;
    border:0;
    color: #FFF;
    font-size:14px;
    font-weight: 100;
    text-transform: uppercase;
    cursor:pointer;
    -webkit-transition:all 0.250s ease-in-out;
    -moz-transition:all 0.250s ease-in-out;
    -o-transition:all 0.250s ease-in-out;
    transition:all 0.250s ease-in-out;
}
.bid-submit:hover {
    background:#b00;
}
.success-or-fails {
    width: 340px;
    padding: 14px;
    color: white;
    font-size: 13px;
    position: absolute;
    z-index: -1;
}

JavaScript

$(".bid-submit").click(function () {
    
    var msg          = $('.success-or-fails'),
        bidBox       = $('.bid-box'),
        bidBtn       = $('.bid-submit'),
        succFail     = $('.success-or-fails'),
        confBid      = $('.confirm-bid-box'),
        cancBid      = $('.cancel-bid-confirm');
 
    succFail.hide();
    bidBox.hide(), bidBtn.hide();
    confBid.transition({ 
        width:  '300px',
        easing: 'snap',
        duration: 500 
     });

    cancBid.transition({ 
        width:  '50px',
        easing: 'snap',
        duration: 500 
     });
        

});