JSFiddle - React, Tailwind, and code Playground

by geekrose Lee

HTML

<li class="dropdownAU_SX"><a href="#" data-toggle="dropdownAU_SX">Winners<i class="icon-arrow open"></i></a> 
<ul class="dropdownAU_SX-menu show">
    <div class="border">



<div id="h_w_PC_ctl01_pnlUpdate">
<div class="HomeDXTitleLastWin">Latest Winners</div>
<div id="LWMainItems" class="HomeDXContent">
            <div class="LWItem country201">
                <div class="LWUser"><a title="Show bet detail" href="javascript: void(0)" onclick="showPopupLastWinnings(1525778);">H. O.</a></div>
                <div class="LWPlay"><span class="LWPlayTxt">play:</span>20.00 R</div>
                <div class="LWData"><a title="Show bet detail" href="javascript: void(0)" onclick="showPopupLastWinnings(1525778);">23/07/2014</a></div>
                <div class="LWImporto"><a title="Show bet detail" href="javascript: void(0)" onclick="showPopupLastWinnings(1525778);"><span class="LWImportoTxt">wins:</span>29.00 R</a></div>
            </div>


            <div class="LWAItem country201">
                <div class="LWUser"><a title="Show bet detail" href="javascript: void(0)" onclick="showPopupLastWinnings(1525777);">H. O.</a></div>
                <div class="LWPlay"><span class="LWPlayTxt">play:</span>200.00 R</div>
                <div class="LWData"><a title="Show bet detail" href="javascript: void(0)" onclick="showPopupLastWinnings(1525777);">23/07/2014</a></div>
                <div class="LWImporto"><a title="Show bet detail" href="javascript: void(0)" onclick="showPopupLastWinnings(1525777);"><span class="LWImportoTxt">wins:</span>370.00 R</a></div>
            </div>


            <div class="LWItem country201">
                <div class="LWUser"><a title="Show bet detail" href="javascript: void(0)" onclick="showPopupLastWinnings(1525776);">H. O.</a></div>
                <div class="LWPlay"><span class="LWPlayTxt">play:</span>50.00 R</div>
                <div class="LWData"><a title="Show bet detail" href="javascript: void(0)"...

CSS

.dropdownAU_SX .show {
max-height: 9999px;
}
.dropdownAU_SX .show, .dropdownAU_SX .hide {
width: 186px;
text-align: justify;
margin: 0px 6px 0px 0px;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdownAU_SX .dropdownAU_SX-menu {
max-height: 0;
list-style: none;
padding: 0px;
z-index: 2000;
overflow: hidden;
}
.SXCercaContent .TxtCerca, .dropdownAU_SX .show, .dropdownAU_SX .hide {
background-color: transparent;
}
// Dynamically generated styles for the popupLW
element.style {
position: absolute;
top: -600px;
left: 726.5px;
display: block;
}
#popupContactSR, #popupLW, #popupMM, #popupCC {
display: none;
position: fixed;
_position: absolute;
height: 450px;
width: 450px;
z-index: 2500;
font-size: 12px;
}
.RiquadroPopRiserva {
border: 2px solid #333;
}
.RiquadroPopRiserva {
padding: 5px;
background-color: #000;
border-radius: 10px;
border: 3px solid #d2232a;
box-shadow: 0 0 5px 0px #000;
}
// Dynamically generated styles for the backgroundpopuplw
element.style {
height: 676px;
opacity: 0.7;
display: block;
}
#backgroundPopupSR, #backgroundPopupLW, #backgroundPopupMM, #backgroundPopupCC {
display: none;
position: fixed;
_position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 2100;
}

JavaScript

function showPopupLastWinnings(IDCoupon) {

        centerPopup("popupLW", "backgroundPopupLW");
        loadPopup("popupLW", "backgroundPopupLW");
        document.getElementById("iframeLW").src = '/Sport/LastWinningsDetailsPopUp.aspx?IDCoupon=' + IDCoupon;

    }

//CONTROLLING EVENTS IN jQuery
    $(document).ready(function () {
    initializePopup("popupLWClose", "popupLW", "backgroundPopupLW");
});