JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="mlist_container">
<form id="cform" method="post" action="mail.php" onsubmit="return validate()">
<div class="mlist">
<div id="mlist1" class="mlist1">
<h2>Join our mailing list</h2>
<p>Receive updates and event announcements</p>
<input type="text" id="email" name="email" placeholder="Email..">
<span><a href="#">Privacy Policy</a></span><button>Next</button><div class="clear"></div>
</div>

<div id="mlist2" class="mlist2">
<h2>Join our mailing list</h2>
<p>Receive updates and event announcements</p>
<input type="text" id="email" name="email" placeholder="Email..">
<span><a href="#">Privacy Policy</a></span><button>Next</button><div class="clear"></div>
</div>


</div>
</form>
</div>

CSS

body {font-size:10px;}

.mlist_container {max-width:300px;margin:auto;}
.mlist {max-width:300px;min-height:210px;
box-sizing: border-box;
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
position:relative;overflow:hidden;
}
.mlist input[type=text] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 6px;
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
}
.mlist .submit, .mlist button {
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float:right;
  font-size:1.6em;
}
.mlist .submit { background-color: #04AA6D;}
.mlist button {background-color: blue;}

.mlist h2 {text-align:center;margin:0;padding:0;line-height:2em;font-size:2.2em;}
.mlist p {text-align:center;margin:0;padding:0;line-height:20px;font-size:1.6em;}
.mlist span a {float:left;line-height:40px;font-size:1.4em;text-indent:10px;color:#999999;}


.clear {clear:both;}


.mlist1 {position:absolute;width:100%;height:100%;box-sizing: border-box;padding: 10px;right:100%;}

JavaScript

function id(x) {var y = document.getElementById(x);return y;}

function dot() {
var a = 21736;
id('dot').className = "dot_disable";
id('submit').disabled = false;
id('submit').className = "submit";	
id('cform').action = "ms_" + a + ".php";
}

function validate() {

var name = id('name');
if (name.value == "") {alert("Please enter your name."); return false;}

var email = id('email');
if (email.value == "") {alert("Please enter a valid email address."); return false;}

var message = id('message');
if (message.value == "") {alert("Please include a message."); return false;}

}