JSFiddle - React, Tailwind, and code Playground
by fredd man
HTML
<html>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
<title></title>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
<body bgcolor=""><table width="0" border="0">
<tbody>
<!--1-->
<tr>
<th scope="col"><?xml version="1.0"?>
<body bgcolor=""><table width="0" border="0">
<tbody>
<tr>
<th scope="col"><?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<!--add 1-->
<body>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
t /* The Modal (background) */
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal1-content {
position: relative;
background-color: #fefefe;
margin: 3%; /* 15% from the top and centered */
padding: 0;
border: 1px solid #888;
border-radius: 15px;
top: 0;
width: 100%; /* Could be more or less, depending on screen size */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close1 {
color:...