JSFiddle - React, Tailwind, and code Playground

by fdezluis96

HTML

<div class="generic_dialog pop_dialog captcha_dialog generic_dialog_modal" id="dialog_1" style=""><div class="generic_dialog_popup" style="margin-top: 71px; "><div class="pop_container_advanced"><div class="pop_content" id="pop_content" tabindex="0" role="alertdialog"><h2 class="dialog_title" id="title_dialog_1"><span>Security Check</span></h2><div class="dialog_content"><div class="dialog_summary hidden_elem">Necesitas</div><div class="dialog_body"></div><div class="dialog_buttons clearfix"><div class="dialog_buttons_msg"></div><div><label class="uiButton uiButtonLarge uiButtonConfirm"><input type="button" name="submit" value="Submit"></label><label class="uiButton uiButtonLarge"><input type="button" name="cancel" value="Cancel"></label></div></div></div><div class="dialog_loading">Loading...</div></div></div></div></div>

CSS

body{background: #000;}
.pop_container_advanced{background:rgba(82,82,82,0.7);-webkit-border-radius:8px;padding:10px}
.pop_content_old{position:relative}
.pop_container{direction:ltr;position:relative;top:10px}
.pop_topleft, .pop_topright, .pop_bottomleft, .pop_bottomright{height:10px;width:10px;overflow:hidden;position:absolute}
.pop_topleft{background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yi/r/Ce0Xa8hRU2A.png);background-repeat:no-repeat;background-position:-106px -30px;left:-10px;top:-10px}
.pop_topright{background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yi/r/Ce0Xa8hRU2A.png);background-repeat:no-repeat;background-position:-117px -30px;right:-10px;top:-10px}
.pop_bottomleft{background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yi/r/Ce0Xa8hRU2A.png);background-repeat:no-repeat;background-position:-84px -30px;bottom:-10px;left:-10px}
.pop_bottomright{background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yi/r/Ce0Xa8hRU2A.png);background-repeat:no-repeat;background-position:-95px -30px;right:-10px;bottom:-10px}
.pop_verticalslab, .pop_horizontalslab{width:100%;height:100%;position:absolute;background:#525252;opacity:.7}
.pop_verticalslab{margin:-10px 0 0;padding-bottom:20px}
.pop_horizontalslab{margin:0 0 0 -10px;padding-right:20px}
.generic_dialog{height:0;left:0;overflow:visible;outline:none;position:fixed;top:0;width:100%;z-index:200}
.generic_dialog_modal, .generic_dialog_fixed_overflow{background-color:rgba(252, 252, 252, .9);height:100%;z-index:400}
.generic_dialog_fixed_overflow{overflow-x:auto;overflow-y:scroll}
.generic_dialog_fixed_overflow .generic_dialog_popup{height:auto;padding-bottom:40px}
.generic_dialog_overflow_mode body{overflow:hidden !important}
.generic_dialog_popup{height:0;overflow:visible;width:465px;margin:0 auto}
.generic_dialog div.dialog_loading{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:10px}
.pop_content{direction:ltr;outline:none}
.pop_dialog_rtl...