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: 300px;
	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: 50px;
	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 {
    opacity:0;
    position: absolute;
    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');
    bidBox,bidBtn,.hide();

    
});