JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900"></script>

	<div class="wsc"></div>
  
	<div class="si">
		<div class="ci fa fa-close"></div>
		<div class="imgr"><img class="img" src="https://logodownload.org/wp-content/uploads/2015/03/havaianas-logo-0.png"></div>
		<div class="bbb">
			<p class="l">Enter your email and name below to get our best offers in your inbox.</p>
          
      <div class="erm">
        Oops. Something went wrong. Please try Again.
      </div>
          
			<form class="f">
				<div class="ir">
					<div class="ib">
						<div class="iw">
							<input class="i i1" placeholder="Name" type="text">
              <i class="icc fa fa-user"></i>
						</div>
					</div>
					<div class="ib">
						<div class="iw">
							<input class="i i2" placeholder="Email address" type="text">
              <i class="icc fa fa-envelope"></i>
						</div>
					</div>
					<div class="ib">
						<div class="iw i3w">
							<input class="i i3 idate" readonly placeholder="Date of Birth" type="text">
              <i class="icc fa fa-calendar"></i>
                          
              <div class="hos-dob_select_block hos-is-inactive">
                <select class="hos-dob_select hos_dob_select__day"></select>
                <select class="hos-dob_select hos_dob_select__month"></select>
                <select class="hos-dob_select hos_dob_select__year"></select>
                <span class="hos-dob_set_btn"></span>
              </div>
						</div>
					</div>
				</div>
				<div class="br">
					<button class="b b1">For Men <span class="ic fa fa-chevron-right"></span></button> <button class="b b2">For Women <span class="ic fa fa-chevron-right"></span></button>
				</div>
			</form>
		</div>
      
		<div class="sss is-inactive">
			Success! A confirmation email has been seent to your...

CSS

* {
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  outline: none;
}

html {
  background-color: #fff;
  font-family: montserrat, helvetica, arial;
  font-size: 13px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

button,
input[type="button"],
select {
  cursor: pointer;
}

.wsc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/FooseShoes_Ecommerce_PSD_Template_02.png);
  background-position: top center;
  -webkit-background-size: cover;
}

.si,
.i,
.b {
  border-radius: 1px;
  border: 1px solid transparent;
}

.si {
  position: fixed;
  bottom: 30px;
  right: 30px;
  max-width: 300px;
  background-color: #ff4346;
  padding: 1.5em 2em 2em;
  text-align: center;
  color: #fff;
  font-weight: 400;
  letter-spacing: -.3px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, .3);
}

.ci {
  position: absolute;
  right: 1em;
  top: 1em;
}

.img {
  width: 100%;
  max-width: 9.5em;
  margin-bottom: .1em;
  -webkit-filter: grayscale(1) brightness(100);
}

.l {
  margin-bottom: 1.2em;
}

.erm {
  margin-bottom: .6em;
  padding: .8em;
  background-color: #ffe3e3 !important;
  color: #C71111 !important;
  font-size: .95em;
}

.i,
.b {
  padding: .8em;
}

.iw {
  position: relative;
}

.ib {
  margin-bottom: .6em;
}

.i {
  background: rgba(255, 255, 255, 0.2);
  width: 100%;
  font-weight: 400;
  color: #fff;
  padding-right: 3em;
  transition: .15s;
}

.i:focus,
.i.hos-is-focused {
  border-color: #fff;
}

.i:focus + .icc {
  opacity: .9;
}

.i::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: inherit;
  opacity: .9;
  font-weight: 300;
}

.i::-moz-placeholder {
  /* Firefox 19+ */
  color: inherit;
  opacity: .9;
  font-weight: 300;
}

.i:-ms-input-placeholder {
  /* IE 10+ */
  color: inherit;
  opacity: .9;
  font-weight: 300;
}

.i:-moz-placeholder {
  /* Firefox 18- */
  color: inherit;
...

JavaScript

var _find = function(arr, func) {
      return arr.filter(func)[0];
    },
    
    isOutsideClick = function(e, el) {
      var clicked_el = e.target,
        test_el = clicked_el;

      do {
        if (test_el === el) {
          return false;
        }
        
        test_el = test_el.parentElement;

      } while (test_el !== null)

      return true;
    }

    d = document,
    qs = d.querySelector.bind(d),
    qsa = d.querySelectorAll.bind(d)
    ael = function(el, evt, handler, b) {
      return el.addEventListener(evt, handler, b);
    },

var inputs = qsa('.i'),
  form = qsa('form')[0];

inputs[0].focus();

form.addEventListener('submit', function(e) {
  e.preventDefault();

  var error = false;

  inputs.forEach(function(input) {
    var w = input.parentElement.parentElement;
    w.classList.remove('is-error');
    document.body.offsetHeight;
    if (input.value === '') {
      if (!error) {
        input.focus();
      }

      error = true;
      w.classList.add('is-error');
    }
  });

  if (!error) {
    qsa('.bbb')[0].classList.add('is-inactive');
    qsa('.sss')[0].classList.remove('is-inactive');
  }

});

(function() {

  var  date = new Date(),
    selected_year = date.getFullYear(),
    selected_month = 0,
    selected_day = 1;

  function isLeapYear(year)  {
    return new Date(year, 1, 29).getMonth() == 1;
  }

  function getDays(year, month) {
    var days = [],
      day = 0;

    if (month == 1) {
      total_days = isLeapYear(year) ? 29 : 28;

    } else {
      total_days = month % 2 ? 30 : 31;
    }

    for (; day++ < total_days;) {
      days.push({
        val: day,
        alias: day
      });
    }

    return days;
  }

  function getMonths() {
    return [
     	{ val: 0, alias: 'January'},
      { val: 1, alias: 'February'},
      { val: 2, alias: 'March'},
      { val: 3, alias: 'April'},
      { val: 4, alias: 'May'},
      { val: 5, alias: 'June'},
      { val: 6, alias: 'July'},
      { val: 7, alias: 'August'},
     ...