JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>form</title>
  </head>

  <body>
    <h1>Login</h1>

    <div class="form">
      <div class="inputs">
        <div>
          <input id="name" type="text" autocomplete="off" name="name" placeholder=" " required>
          <label for="name" class="label-name">
            <span class="content-name">username</span>
          </label>
        </div>
        <div>
          <input id="passw" type="password" name="passw" placeholder=" " required>
          <label for="passw" class="label-name">
            <span class="content-name">password</span>
          </label>
        </div>
        <div class="hide">
          <input type="checkbox" onclick="myFunction()">Show Password
        </div>
        <button>Login</button>
      </div>
    </div>

  </body>

</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    height: 60vh;
    font-family: sans-serif;
    background-color: black;
    color: white;
}

.form{
    position: relative;
    /*height: 50px;*/
    width: 50%;
    overflow: hidden;
}
.inputs > div {
  position: relative;
}
.inputs input[type="text"], .inputs input[type="password"]{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 100%;
    height: 100%;
    padding-top: 23px;
    font-weight: bolder;
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    background-color: black;
}

.inputs label{
    position: absolute;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    pointer-events: none;
    border-bottom: 1px solid white;
}

.inputs label::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    left: 0px;
    bottom: -1px;
    border-bottom: 3px solid red;
    transition: width 0.5s ease;
}

.content-name{
    bottom: 5px;
    position: absolute;
    left: 0px;
    transition: all 0.3s ease;
}

.inputs input:focus + .label-name .content-name, .inputs input:not(:placeholder-shown) + .label-name .content-name{
    transform: translateY(-150%);
    font-size: 13px;
    color: rgb(236, 236, 236);
}

.inputs input:focus + .label-name::after, .inputs input:not(:placeholder-shown) + .label-name::after{
    width: 100%;
}