JSFiddle - React, Tailwind, and code Playground

by mangaip

HTML

<div class='berlangganan-box'>
  <!-- subscribe box -->
  <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MangaipBlog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <p>Berlangganan update artikel terbaru via email:</p>
    <p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text' /></p><input name='uri' type='hidden' value='MangaipBlog' />
    <input name='loc' type='hidden' value='en_US' />
    <p><input class='submit-email' type='submit' value='Berlangganan' /></p>
  </form>
</div>

CSS

/* SUBSCRIBER BOX */
.berlangganan-box {
  background: #5b86e5;
  background: linear-gradient(to right, #5b86e5, #36d1dc);
  color: #ffffff;
  padding: 15px;
  margin: 20px 0;
  text-align: center;
  border-radius: 4px;
}

.berlangganan-box p {
  margin: 15px 0;
}

.berlangganan-box input.email-address[type="text"] {
  width: 60%;
  padding: 10px;
  text-align: center;
  border-radius: 2px;
  border: none;
  outline: none;
}

.berlangganan-box input.submit-email[type="submit"] {
  background: #1780dd;
  padding: 10px 15px;
  border-radius: 2px;
  color: #575757;
  border: none;
  outline: none;
}

.berlangganan-box input.submit-email[type="submit"]:hover {
  background: #575757;
  color: #fff;
  cursor: pointer;
}

.berlangganan-box input.email-address[type="text"]:focus {
  background: #fffcd2;
}