JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<script src="http://www.jmldirect.com/content/ebiz/shop/resources/js/external/jquery.omniwindow.js"></script>
<div class="HandyPayCheckoutContent">
    <div class="Handycredit">
        <label for="Handycard">Pay by HandyPay</label>
    </div>
    <div class="question">
        <img onclick="LaunchHandyPay();" />
    </div>
    <div class="HPIcon"></div>
</div>
<div class="wordingArea">
    <h3>Pay for this order using our payment plan:<br><p>First Payment:</p><p>£<div class="Instal1"></div></p><p>Second Payment:<br></p><p>£<div class="Instal2"></div></p><p>Third Payment:</p><p>£<div class="Instal3"></div></p></div><div class="ow-overlay ow-closed"></div><div class="modal ow-closed"><img src="http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/handypay/images/handypay_popup.jpg" alt="Shark Handy Pay UK" usemap="#Handy_Shark_Map_UK" id="Handy_Shark_UK"/><map id="Handy_Shark_Map_UK" name="Handy_Shark_Map_UK"><area alt="HandyPay Link Page" coords="60,359,171,330" href="http://www.jmldirect.com/page/handypay" shape="rect"/><area alt="Close" coords="461,6,545,36" onclick="OverlayClose(this);" href="#" shape="rect"/></map></div>

CSS

.HandyPayCheckoutContent {
    display:block;
    width:200px;
    height:90px;
    top:34px;
    right:0;
    position:absolute;
}
.HandyPayCheckoutContent h3 {
    font-size:1.5em;
    font-weight:bold;
    height:30px;
    text-align:left;
}
.HandyPayCheckoutContent img {
    height:30px;
    width:20px;
    display:inline-block;
    text-align:center;
}
.HandyPayCheckoutContent .Handycredit label {
    color: #525252;
    font-size: 1.5em;
    font-weight: bold;
    height: 30px;
    margin: -4px 15px 0 0;
}
.HandyPayCheckoutContent .Handycredit input {
    height: 22px;
    margin: -4px 3px 0 -12px;
}
.HandyPayCheckoutContent .question {
    display: block;
    height:20px;
    width:20px;
    position:absolute;
    top:0px;
    right:12px;
    float:right;
}
.HandyPayCheckoutContent .question img {
    background:url('http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/handypay/images/question_mark.png') no-repeat;
    height:18px;
    width:19px;
}
.HandyPayCheckoutContent .question img:hover {
    background:url('http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/handypay/images/question_mark_over.png') no-repeat;
    cursor:pointer;
}
.HandyPayCheckoutContent .HPIcon {
    display: block;
    height:44px;
    width:38px;
    position:absolute;
    top:40px;
    left:-14px;
    float:right;
    background:url('http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/handypay/images/handy_pay_logo.png') no-repeat;
}
.HandyPayCheckoutContent .wordingArea {
    display:block;
    width:155px;
    height:90px position:absolute;
    float:right;
}
.HandyPayCheckoutContent .wordingArea h3 {
    color: #666666;
    font-size: 0.917em;
    height: auto;
    overflow: visible;
    padding-top: 3px;
}
.HandyPayCheckoutContent .wordingArea .Instal1 {
}

JavaScript

jQuery(document).ready(function () {
    function OverlayClose() {
        jQuery('#paymentdetails .ow-overlay, #paymentdetails .modal').hide('slow');
        jQuery('.Handycredit #Handycard input').prop('checked', false);
    }
    jQuery('div.HandyPayCheckoutContent div.Handycredit input#Handycard').click(function LaunchHandyPay() {
        jQuery('div.modal').omniWindow().trigger('show');
    });
    var HandyPayDiv = jQuery('#paymentdetails');
    if (HandyPayDiv.length) {
        jQuery("#paymentdetails").append('<div class="HandyPayCheckoutContent"><div class="Handycredit"><input type="radio" onclick="autoSelect(this);LaunchHandyPay();" id="Handycard" value="0" name="Handycard"><label for="Handycard">Pay by HandyPay</label></div><div class="question"><img onclick="LaunchHandyPay();"/></div><div class="HPIcon"></div></div><div class="wordingArea"><h3>Pay for this order using our payment plan:<br><p>First Payment:</p><p>£<div class="Instal1"></div></p><p>Second Payment:<br></p><p>£<div class="Instal2"></div></p><p>Third Payment:</p><p>£<div class="Instal3"></div></p></div><div class="ow-overlay ow-closed"></div><div class="modal ow-closed"><img src="http://www.jmldirect.com/content/ebiz/shop/resources/images/warranties/UK/HandyPay_PopUp.jpg" alt="Shark Handy Pay UK" usemap="#Handy_Shark_Map_UK" id="Handy_Shark_UK"/><map id="Handy_Shark_Map_UK" name="Handy_Shark_Map_UK"><area alt="Close" coords="461,6,545,36" href="" onclick="OverlayClose(this);" shape="rect"/></map></div>');
    }
});