JSFiddle - React, Tailwind, and code Playground
HTML
<div class="poll">
<h1>POLL: <i>Does it Work?</i></h1>
<div class="error">
Only members that got our program can vote! <br> Try again when you test!
</div>
<div style="text-align: center;">
<input class="yes" type="button" value="YES" />
<input class="no" type="button" value="NO" />
<div style="clear:both;"></div>
463 Votes for <strong>Yes</strong><br />
<strong><br /></strong></div>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
.poll {
background: url('http://i.imgur.com/Qp3jcUf.png') center center no-repeat;
display:block;
width:425px;
height:300px;
overflow:hidden;
font-family: 'Open Sans', sans-serif;
margin-top:20px;
}
.poll h1 {
font-size:25px;
color: #383838;
text-align: center;
padding-top:30px;
font-weight:bold;
margin-bottom:50px;
}
.poll h1 i {
color: #22551e;
}
.yes {
background: #76d389 url('http://i.imgur.com/mUYEZAB.png') center left no-repeat;
background-size:35px;
width:80px;
height:40px;
text-align:right;
font-weight:bold;
border: 1px solid transparent;
border-radius: 5px;
}
.no {
background:#d37676 url('http://i.imgur.com/YfiA7Vw.png') center left no-repeat;
background-size:35px;
margin-left:150px;
width:80px;
height:40px;
text-align:right;
font-weight:bold;
border: 1px solid transparent;
border-radius: 5px;
}
.no:hover {
background:#ce4343 url('http://i.imgur.com/YfiA7Vw.png') center left no-repeat;
background-size:35px;
color:#fff;
}
.yes:hover {
background: #4fcd32 url('http://i.imgur.com/mUYEZAB.png') center left no-repeat;
background-size:35px;
color:#fff;
}
.error {
display:none;
font-family: 'Open Sans', sans-serif;
text-align:center;
font-weight:bold;
color: #BA2D2D;
font-size:15px;
margin-bottom:10px;
overflow:hidden;
}
JavaScript
$( ".yes, .no" ).click(function() {
$( ".error" ).show( "fast, linear" );
});