JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="finish-rank-popup">
	<div class="finish-rank-popup ui-draggable" style="z-index: 20003 ! important; position: absolute; top: 0; left: 0; cursor: move;">
		
	<div style="width:370px;" class="bimodal-container"><div style="width:100%;" class="bimodal"><div class="bimodal-header"><a href="javascript:void(0);" class="bimodal-close"><div id="bimodal-close-label">Close</div></a><span id="bitop-header">Finish Ranking</span></div><div class="bimodal-body"><div class="bimodal-subhead"><img border="0" src="https://elements.brightidea.com/core/images/icon_assign_proposal_24x24.png" class="bimodal-icon"><span id="bi-header">Finish Ranking</span></div><div style="display: block;" id="finish-rank-popup-window-content">
			<div id="finish-rank-popup-msg">
				You still have <span id="unranked-initiaive">7</span> initiatives left to rank, are you sure you are finished?
			</div>
		</div></div><div class="bimodal-footer"><a href="javascript:void(0);" class="bimodal-secondary">Cancel</a><span style="float:right; vertical-align:middle;color:#878787; font-weight: bold; margin: 0px 15px; font-size:12px; line-height:32px;" id="button-bimodal-secondary-label">or</span><span id="bi-modal-button" class="green_btn_container"><span class="green_btn_left"></span><span class="green_btn_center">Yes</span><span class="green_btn_right"></span></span></div></div></div></div><div style="opacity: 0.5;" class="bimodal-dim"></div>
</div>

CSS

/*** Buttons **/
.bimodal-popup{
  display:none;
}

.green_btn_container, .grey_btn_container {
    font-family: Tahoma,Verdana,Arial !important;
    font-size: 11px;
    margin: 0;
    padding: 0;
    width: auto;
    cursor: pointer;
    
}

.green_btn_left, .grey_btn_left, .disabled_btn_left {
    display: block;
    width:16px;
    height:32px;
    float: left;
}
.green_btn_left {
    background: url(http://www.test.brightidea.com/core/images/btn_default_left.png) 0px -32px no-repeat;
}

.disabled_btn_left {
    background: url(http://www.test.brightidea.com/core/images/btn_default_left.png) 0px 0px no-repeat;
}
.grey_btn_left {
    background: url(http://www.test.brightidea.com/core/images/btn_gray_left.png) 0px -0px no-repeat;
}

.green_btn_center {
    display: inline-block;
    color: #FFFFFF !important;
    font-weight: bold;
    height:32px;
    line-height: 30px;
    float: left;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #999999 !important;
    background: url(http://www.test.brightidea.com/core/images/btn_default_center.png) 0px -32px repeat-x;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .green_btn_center {
    display: inline-block;
    color: #FFFFFF !important;
    font-weight: bold;
    height:32px;
    line-height: 32px!important;
    float: left;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #999999 !important;
    background: url(http://www.test.brightidea.com/core/images/btn_default_center.png) 0px -32px repeat-x;
  }
}

  .disabled_btn_center {
    display: inline-block;
    color: #919191 !important;
    font-weight: bold;
    line-height: 0px;
    float: left;
    padding: 16px 10px;
    background-position: 0px 0px;
    cursor: move!important;
  }

.disabled_btn_left{
    cursor: move!important;
}

.disabled_btn_right{
    cursor: move!important;
}
.disabled_btn_center {
    background: url(http://www.test.brightidea.com/core/images/btn_default_center.png) 0px 0px repeat-x;
}
.grey_btn_center {
  display: block;
 ...