JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<div id="container_demo">
  <!-- спрятанный якорь, чтобы избежать прыжков http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
  <a class="hiddenanchor" id="tosubscribe"></a>
  <a class="hiddenanchor" id="tologin"></a>
  <div id="wrapper">
    <div id="login" class="animate form">
      <form action="mysuperscript.php" autocomplete="on">
        <h1>Log in</h1>
        <p>
          <label for="username" class="uname" data-icon="u"> Your email or username </label>
          <input id="username" name="username" required="required" type="text" placeholder="myusername or [email protected]" />
        </p>
        <p>
          <label for="password" class="youpasswd" data-icon="p"> Your password </label>
          <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
        </p>
        <p class="keeplogin">
          <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
          <label for="loginkeeping">Keep me logged in</label>
        </p>
        <p class="login button">
          <input type="submit" value="Login" />
        </p>
        <p class="change_link">
          Not a member yet ?
          <a href="#tosubscribe" class="to_subscribe">Join us</a>
        </p>
      </form>
    </div>

    <div id="subscribe" class="animate form">
      <form action="mysuperscript.php" autocomplete="on">
        <h1> Sign up </h1>
        <p>
          <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
          <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
        </p>
        <p>
          <label for="emailsignup" class="youmail" data-icon="e"> Your email</label>
          <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="[email protected]" />
        </p>
        <p>
          <label for="passwordsignup"...

CSS

#subscribe,
#login {
  position: absolute;
  top: 0px;
  width: 88%;
  padding: 18px 6% 60px 6%;
  margin: 0 0 35px 0;
  background: rgb(247, 247, 247);
  border: 1px solid rgba(147, 184, 189, 0.8);
  box-shadow:
    0pt 2px 5px rgba(105, 108, 109, 0.7),
    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
  border-radius: 5px;
}

#login {
  z-index: 22;
}

/**** текст ****/
#wrapper h1 {
  font-size: 48px;
  color: rgb(6, 106, 117);
  padding: 2px 0 10px 0;
  font-family: 'FranchiseRegular', 'Arial Narrow', Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  padding-bottom: 30px;
}

/** На донный момент только webkit поддерживает background-clip:text; **/
#wrapper h1 {
  background:
    -webkit-repeating-linear-gradient(-45deg,
      rgb(18, 83, 93),
      rgb(18, 83, 93) 20px,
      rgb(64, 111, 118) 20px,
      rgb(64, 111, 118) 40px,
      rgb(18, 83, 93) 40px);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

#wrapper h1:after {
  content: ' ';
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 10px;
  background:
    linear-gradient(left,
      rgba(147, 184, 189, 0) 0%,
      rgba(147, 184, 189, 0.8) 20%,
      rgba(147, 184, 189, 1) 53%,
      rgba(147, 184, 189, 0.8) 79%,
      rgba(147, 184, 189, 0) 100%);
}

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder {
  color: rgb(190, 188, 188);
  font-style: italic;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: rgb(190, 188, 188);
  font-style: italic;
}

input {
  outline: none;
}

/* все поля исключают submit и checkbox */
#wrapper input:not([type="checkbox"]) {
  width: 92%;
  margin-top: 4px;
  padding: 10px 5px 10px 32px;
  border: 1px solid rgb(178, 178, 178);
  box-sizing: content-box;
  border-radius: 3px;
  box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
  transition: all 0.2s linear;
}

#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus {
  border: 1px...