JSFiddle - React, Tailwind, and code Playground

by damir aushenov

HTML

<div id="header">
    <h1>Jump for  joy sale</h1>
    
</div>
<div id="main">
    <div class="guess_box"><img src="http://4.bp.blogspot.com/-jTjiQxvCXX8/T2H3H9YJu0I/AAAAAAAACoQ/lP76t39_vVM/s1600/Girls%2B1.jpg" alt="" width="200" height="200"></div>
    <div   class="guess_box"><img src="http://desktop-images.designdecor.in/wallpapers/Celebrities/beautiful-girls-background-10-wallpapers/pretty-girl-wallpaper.jpg" alt="" width="200" height="200"></div>
    <div class="guess_box"><img  src="http://www.queerid.com/attachments/USER/0/girls_aloud.jpg" alt="" width="200" height="200"></div>
    <div class="guess_box"><img src="http://tvonfly.com/catalog/entertainment/fail_army/image/clip-306408-image.png" alt="" width="200" height="200"></div>
        
    
    
    
    
</div>

CSS

div.guess_box{
 float:left;
 height:200px;
 text-align:left;
 border: solid #000 3px;
}
#header{
 width:100%;
 border: 0px;
 height:50px;
}
#main{
 background-color: grey;
 height: 500px;
    width:825px;
}

JavaScript

$(document).ready(function() {
 $("div.guess_box").click(function() {
     var discount  = Math.floor((Math.random()*5)+5);
     var discount_msg = "<p>Your Discount is "+ discount + "%</p>";
   $(".guess_box").append(discount_msg);
 });//end click function
 });//end doc ready