JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jeromeetienne.github.com/jquery-qrcode/src/qrcode.js"></script>
<script src="http://jeromeetienne.github.com/jquery-qrcode/src/jquery.qrcode.js"></script>
<div id="couponImage">


    <div id="couponInfo">
    <div id="1" name="dealName" style="position: absolute; left:22px; top:112px; font-size:20px; width:484px; height:30px;overflow:hidden;">blah blah</div>
        
        <div class="qrcode"><canvas width="256" height="256"></canvas></div><div class="serialnumber"><span>Coupon code </span>twghjh768BJ67598NK</div><div id="3" name="merchantName" style="position: absolute; left:1064px; top:341px; font-size:14px; width:280px; height:50px;overflow:hidden;"></div><div id="4" name="highlight" style="position: absolute; left:538px; top:106px; font-size:10px; width:340px; height:267px;overflow:hidden;"><p>Τριπτολέμου 50, Γκάζι</p>
<p><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?t=m&amp;msa=0&amp;msid=208349376684061603981.0004c0d0ef11a3756a2ec&amp;source=embed&amp;ie=UTF8&amp;ll=37.97701,23.716092&amp;spn=0.007265,0.01649&amp;output=embed"></iframe><br><small>View <a href="javascript:void( 0 )" style="color: #0000ff; text-align: left;" data-bitly-type="bitly_hover_card">Yoo bar</a> in a larger map</small></p></div><div id="5" name="personName" style="position: absolute; left:22px; top:149px; font-size:18px; width:481px; height:34px;overflow:hidden;">Blah blah</div><div id="6" name="term" style="position: absolute; left:21px; top:189px; font-size:15px; width:503px; height:182px;overflow:hidden;"><ol>
<li>blah blah</li>
<li><strong>Blah<br></strong></li>

</ol>
<p class="p1">blah blah</p>
<p class="p1"><b>lorem</b>&nbsp;: ipsum</p></div></div>
</div><form>
        <input type="button" value="print coupon" onClick="window.print()">
        
    </form>

CSS

body
{
font-family:Helvetica;
}

div#couponImage 
{
    z-index: 100;
    width: 1210px;    
    height: 500px;   
    position: relative;
    overflow: hidden;
    display: block;
    
}
div#couponImage div#couponInfo 
{
    position:absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    z-index:100px;
  background:#d9616b url("http://www.emoticonswallpapers.com/background/skulls/skulls-background-pattern-0528.gif")!important ;
  display: block;
  
}
div#button{margin-top: 30px}

.qrcode
{
top: -140px;
position: absolute;
left: 907px;
}

div#couponInfo {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
display: block;
}

.serialnumber
{
bottom: 23px;
position: absolute;
left: 10px;
}
.serialnumber span{
font-weight: bold;
}

JavaScript

jQuery('.qrcode').qrcode({text    : "twghjh768BJ67598NK"});