JSFiddle - React, Tailwind, and code Playground

by grafixguy76

HTML

<a class="button_alt blue" href="javascript:fw_DHTML_popup20();">Email PDF format</a> 
 <div id="popup20"> 
     <table cellspacing="0" style="clear:both; border:2px outset;"> 
         <tbody align="left"> 
             <tr> 
                 <td style="background:#444444;"> 
                     <div style="float:left; clear:left; color:#ffffff;padding-left:3px; vertical-align:middle;"> 
                         <b>Share File:</b> 
                      </div> 
                     <a href="javascript:fw_close20();"></a> 
                </td> 
            </tr> 
         <tr> 
             <td style="padding:5px; clear:both;
border-left:1px solid #dddddd; border-bottom:1px solid #dddddd; border-top:1px solid #888888; border-right:1px solid #888888; background:#cdcdcd;">
                <!-- HTML CONTENT GOES HERE --> 
                <form method="POST" action="http://www.mitchellmetals.net/mobile/email20.php"> 
                    <label name="email">Enter Email Address:</label> 
                    <input type="email" name="email"/> 
                    <button class="popup_btn" type="submit" name="submit">Send PDF File</button> 
                </form> 
            </td> 
        </tr> 
      </tbody> 
    </table> 
</div>

CSS

#popup
{
	border:1px solid #285aaa;
	position:relative;
	left:-5%;
	top:3%;
	width:200px;
	z-index:100;
	color:#000000;
	padding:1px;
	background-color:#285aaa;
	display:none;
}

#popup20
{
	border:1px solid #285aaa;
	position:relative;
	left:0%;
	top:10%;
	width:200px;
	z-index:100;
	color:#000000;
	padding:1px;
	background-color:#285aaa;
	
}

#popup21
{
	border:1px solid #285aaa;
	position:relative;
	left:-5%;
	top:3%;
	width:200px;
	z-index:100;
	color:#000000;
	padding:1px;
	background-color:#285aaa;
	display:none;
}

.popup_btn
{
	background-color:#285aaa;
	color:#f5f5f5;
	padding:5px 8px 5px 8px;
}
.button_alt
{
	display:inline-block;
	outline:none;
	cursor:pointer;
	text-align:center;
	text-decoration:none;
	font:14px/ 100% Arial, Helvetica, sans-serif;
	color:#ffffff !important;
	padding:.5em 2em .55em;
	text-shadow:0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius:.5em;
	-moz-border-radius:.5em;
	border-radius:.5em;
	-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .2);
	box-shadow:0 1px 2px rgba(0, 0, 0, .2);
}
.button_alt:hover
{
	text-decoration:none;
}
.button_alt:active
{
	position:relative;
	top:1px;
/* blue */
}

	.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top, #00adee, #0078a5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
	}
	.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top, #0095cc, #00678e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
	}
	.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top, #0078a5, #00adee);
	filter:...

JavaScript

function fw_DHTML_popup20(){document.getElementById('popup20').style.display='block';}
function fw_close20(){document.getElementById('popup20').style.display='none';}