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">

<div class="layer">
  <div class="lines">
  <div class="line">
    <div class="content">
      Liked our content?
    </div>
  </div>
  <div class="line">
    <div class="content">
      <span class="link">Subscribe</span> and follow our journey from $400.000 to $1.000.000 in revenue :)
    </div>
  </div>

  <div class="line line--a is-inactive">
    <div class="content">
      Enter your email address below and press Enter:
    </div>
  </div>

  <div class="line line--b is-inactive">
    <div class="content content--fw">
      <form action="">
      <div class="field__section">
        <div class="field__wrapper">
          <input type="email" class="field" placeholder="e.g.: [email protected]">
                    <div class="field__submit_icon fa fa-arrow-circle-right"></div>
        </div>
          <span class="field__error_msg is-inactive">Are you sure that's an email?</span>

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

  <div class="line line--c is-inactive">
    <div class="content">
      Awesome! One last step. Click the confirm link in your email.
    </div>
  </div>
  </div>

  <div class="avatar_line">
    <div class="avatar"></div>
  </div>

</div>

CSS

* {
  box-sizing: border-box;
  font: inherit;
  outline: none;
}

html {
  background-color: #ababc6;
}

.layer {
  position: fixed;
  bottom: 2em;
  right: 2em;
  font-family: helveticaneue;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
}

.lines {
  transition: .2s;
}

.lines.is-inactive {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px)
}

.line,
.avatar_line {
  margin-top: .4em;
  text-align: right;
}

.line {
    animation: slideUp .2s;
}

.line.is-inactive {
  display: none;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



.avatar,
.content {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.content {
  display: inline-block;
  background-color: #fff;
  max-width: 17em;
  padding: .8em;
  border-radius: 2px;
  text-align: left;
  color: #5a6574;
}

.content--fw {
  width: 17em;
}

.link {
  border-bottom: 1px solid;
  color: #3570ba;
  font-weight: 900;
  cursor: pointer;
}

.field__wrapper {
  position: relative;
}

.field__submit_icon {
  position: absolute;
  right: .6em;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 1em;
  font-size: 1.1em;
}

.field {
  width: 100%;
  padding: .5em;
  border-radius: 1px;
  border: 1px solid #d3d3d3;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
  transition: .1s;
}

.field:focus {
  border-color: #93b3db;
}

.field[disabled] {
  box-shadow: none;
  background-color: #f3f3f3;
  opacity: .5;
}

.field__error_msg {
    color: #c21e1e;
    margin-top: 3px;
    display: block;
    font-size: .8em;
    margin-left: 1px;
    margin-bottom: -3px;
}

.field__error_msg.is-inactive {
  display: none;
}

JavaScript

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

ael(qs('.link'), 'click', function(e) {
  qs('.line--a').classList.remove('is-inactive');
  qs('.line--b').classList.remove('is-inactive');
});

ael(qs('form'), 'submit', function(e) {
  qs('.field').setAttribute('disabled', true);
  qs('.line--c').classList.remove('is-inactive');
  e.preventDefault();
  return false;
});

ael(qs('.avatar'), 'click', function (e) {
	qs('.lines').classList.toggle('is-inactive');
});