JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<form id="mlist" method="post" action="mail.php">
<div class="flip-card">
<div id="card" class="flip-card-even">

<!-- front -->
<div class="flip-card-front">
<h2>STAY CONNECTED</h2>
<p>Receive updates and event announcements</p>
<input type="text" id="name" name="name" placeholder="Your Name.." autocomplete="off" spellcheck="false" autocorrect="off" onkeyup="activate();">
<span><a href="/privacy/" rel="nofollow">Privacy Policy</a></span><button id="ml_next" class="ml_next" type="button" onclick="flip();" disabled >Next</button><div class="clear"></div>

</div>
  
<!-- back -->
<div class="flip-card-back">
<input type="text" id="email" name="email" placeholder="Your Email Address..">
<input type="submit" id="submit" class="submit" value="Subscribe" onclick="ValidateEmail('email'); return false;"><div class="clear"></div>
<p id="alert">By clicking Subscribe you will be added to our mailing list. You can unsubscribe at anytime.</p>
</div>
 

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

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {position: relative;border-radius:5px;
  background-color: transparent;
  width: 300px;
  min-height: 200px;
  perspective: 1000px;
  margin:auto;
}

.flip-card-even, .flip-card-odd {border-radius:5px;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  
}

.flip-card-odd {transform: rotateY(180deg);}

.flip-card-front, .flip-card-back {border-radius:5px;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 10px;box-sizing: border-box;border: solid 2px #DEAA39;
}

.flip-card-front {
  background-color: #ffffff;
  color: black;
}

.flip-card-back {
  background-color: #ffffff;
  color: white;
  transform: rotateY(180deg);
}

.ml_next {
  border: 1px solid #999999;
  background-color: red;
  color: #666666; }





.flip-card input[type=text] {
  width: 100%;
  padding: 12px;
  border: 2px solid #DEAA39;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 2px;
  margin-bottom: 6px;
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
  outline: none;
}
.flip-card input[type=text]:focus {
  border: 2px solid #DEAA39;
}
.flip-card .submit, .flip-card button {
  color: white;
  padding: 9px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float:right;
  font-size:1em;
  margin-bottom: 6px;
}
.flip-card .submit { background-color: #04AA6D;}
.flip-card button {background-color: #DEAA39;}

.flip-card h2 {text-align:center;margin:0;padding:0;line-height:1.4em;font-size:1.2em;color:#DEAA39;}
.flip-card p {text-align:center;margin:0.4em;padding:0;line-height:20px;color:#777777;font-size:1em;}
.flip-card span a {float:left;line-height:34px;font-size:0.8em;text-indent:10px;color:#999999;}


.clear {clear:both;}

JavaScript

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

function activate() {id('ml_next').disabled = false;}
function valid() {var a = 21736;id('mlist').action = "ms_" + a + ".php";}

function flip() {
var card = id('card');
if (card.className == "flip-card-even") {card.className = "flip-card-odd";}
else {card.className = "flip-card-even";}

}


function ValidateEmail(x) {
var input = id(x);
var alert = id('alert');
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

if (input.value.match(validRegex)) {  

return true;

} else {
  
alert.innerHTML = "Oops! That doesn't look like a valid email address. Try again!";
alert.style.color = "#DA5139";
return false;

}

}