JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<img src="https://joshuapullen.com/files/spelling-placeholder-background.svg" alt="" id="rocket">

<div id="info">
  <h1>Launch your students into spelling success!</h1>
  <p>We're working hard to design <strong>Rocket Spelling</strong>, the optimal way to teach your students to spell. Rocket Spelling is a fun and functional way to teach words that <em>stick</em>. Will you come along with us?</p>
  <p>Enter your email, and we'll put you first in line to try Rocket Spelling:</p>
  <form method="POST" action="http://formspree.io/[email protected]">
    <input type="email" name="email" placeholder="[email protected]"><button type="submit">Send</button>
  </form>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Hind:600|Open+Sans:400,700');

body {
  background-color:#07073d;
}
#rocket {
  position:fixed;
  bottom:0;
  left:0;
  height:100vmin;
  draggable:false;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none;
}
#info {
  position:fixed;
  top:50%;
  left:80%;
  transform:translate(-80%, -50%);
  width:40%;
  
  color:#fff;
  font-family: 'Open Sans', sans-serif;
  background:#07073d;
  padding:20px;
  margin:-20px;
}
#info h1 {
  font-family: 'Hind', sans-serif;
  text-align:center;
  line-height:1.25;
}

form {
  text-align:center;
}
input {
  background:transparent;
  border:4px solid #25d2e6;
  border-radius:4px;
  padding:8px 16px;
  margin-right:8px;
  outline:none;
  color:#fff;
  font-family: 'Opens Sans', sans-serif;
}
button[type=submit] {
  background:#25d2e6;
  padding:12px 20px;
  border:none;
  border-radius:4px;
  outline:none;
  color:#07073d;
  font-weight:bold;
  font-family: 'Opens Sans', sans-serif;
  cursor:pointer;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
  font-family: 'Opens Sans', sans-serif;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
  font-family: 'Opens Sans', sans-serif;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
  font-family: 'Opens Sans', sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
  font-family: 'Opens Sans', sans-serif;
}

@media screen and (max-width:900px) {
  #rocket {
    left:-10%;
  }
  #info {
    top:40%;
    left:80%;
    width:50%;
  }
}