JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Prociono' rel='stylesheet' type='text/css'>

<div id="window">
    <p> 
       After the earthquake and tsunami in Japan this year, 3.7 billion Yen was found and handed in by citizens
    </p>
    <form action="some.php" method="post">
        <input type="submit" name="answer" value="True" id="true" />
        <input type="submit" name="answer" value="False" id="false" />
    </form>
    <a href="#" id="previous">Previous</a>
    <a href="#" id="next">Next</a>
</div>

CSS

body{
    background:url(http://shrani.si/f/44/PY/37w6Brut/nyaspar5.jpg) repeat rgb(102,102,102);
}

#window{
    width:450px;
    height:300px;
    
    border-radius:6px;
    
    background:rgb(229,223,206);
    
    margin:10% auto;
    padding:30px;
    
    border-bottom:3px solid rgb(158,154,144);
    box-shadow:0 1px 0 rgb(97,94,87),0 2px 0 rgb(179,173,159),0 4px 0 rgb(158,154,144),0 5px 0 rgb(97,94,87),0 6px 0 rgb(179,173,159),0 8px 0 rgb(158,154,144),0 -2px 10px rgb(39,39,39);
}
p{
    font-size:1.6em;
    color:rgb(46,46,45);
    text-align:center;
    font-family: 'Prociono', serif;
    font-style:italic;
    
    margin:0 0 30px 0;
}
form{
    position:relative;
    
    width:80%;
    
    padding:30px 30px;
    margin:0 auto;
    
    border-top:solid 1px rgb(244,243,239);
    border-bottom:solid 1px rgb(205,203,198);
    
    box-shadow:0 -1px 0 rgb(205,203,198),0 1px 0 rgb(244,243,239);
    
    text-align:center;
}
input[type="submit"]{
    position:relative;
    
    width:140px;
    height:50px;
    
    color:rgb(255,255,255);
        
    font-size:1.6em;
    font-family:times new roman;
    text-shadow:0 -2px 2px rgba(0,0,0,0.4);
    
    cursor:pointer;
}
#true{
    background: #658c1e; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #658c1e 0%, #84ab37 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#658c1e), color-stop(100%,#84ab37)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  #658c1e 0%,#84ab37 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  #658c1e 0%,#84ab37 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  #658c1e 0%,#84ab37 100%); /* IE10+ */
    background: linear-gradient(45deg,  #658c1e 0%,#84ab37 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#658c1e', endColorstr='#84ab37',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    
   ...

JavaScript

function generateNoise(opacity) {  
   if ( !!!document.createElement('canvas').getContext ) {  
      return false;  
   }  
  
   var canvas = document.createElement("canvas"),  
   ctx = canvas.getContext('2d'),  
   x, y,  
   number,  
   opacityopacity = opacity || .2;  
  
   canvas.width = 55;  
   canvas.height = 55;  
  
   for ( x = 0; x < canvas.width; x++ ) {  
      for ( y = 0; y < canvas.height; y++ ) {  
         number = Math.floor( Math.random() * 255);  
  
         ctx.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";  
         ctx.fillRect(x, y, 1, 1);  
      }  
   }  
   var mainWindow = document.getElementById('window');  
   mainWindow.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";  
}  
//generateNoise(0.05);