JSFiddle - React, Tailwind, and code Playground

by bendix_en

HTML

<script src="https://cdn.tailwindcss.com"></script>
  
  <div id="input-class" class="w-full mt-3 group">
     <div class="container" style="height: 38px; width: 400px;">
        <label id="floatingInput" class="text-white mt-[6px] ml-3 block z-0 absolute peer-focus:text-sm peer-focus:-mt-12 ease-in-out duration-150 peer-focus:z-20 peer-focus:bg-transpa after:z-20 after:content-[' '] after:absolute after:w-20 after:h-5 after:top-0 after:left-0">Enter your Password</label>
        <div class="big peer-focus:bg-blue-500 ease-in-out duration-150">
            <input placeholder=' ' type="password" id="password" class="peer z-10 relative form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-transparent outline-none" />
        </div>
     </div>
</div>

CSS

body{background:red;}

.container{
  position: relative;
  margin: 30px auto;
  display: inline-block;
}

.container:focus-within label{
  --pos: -11px;
  margin-top: var(--pos);
  font-size: 14.5px;
}

.big{
    position:absolute;
    overflow:hidden;
    padding: 1px;
    width: 100%;
    border-radius: 0.25rem;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    height: 39px;
} 

label {
  z-index: 100;
  position: absolute;
  margin-top: var(--pos);
}

.big:after{
    content:'';
    position:absolute;
    border-radius: 0.25rem;
    top: 0;
    left: 0;
    margin-top: 1px;
    margin-left: 1px;
    width: calc(100% - 2px); 
    border-radius: 0.25rem;
    height:37px;
    box-shadow: 0px 0px 0px 2000px white;
   overflow: hidden;
    transition: all 0.5s ease-in-out; 
}

.big:focus-within {
  clip-path: polygon(0 0, 8px 0, 8px 2px, 148px 2px, 148px 0, 100% 0, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);
}

.big:focus-within:after{
  box-shadow: 0px 0px 0px 2000px rgb(37 99 235);
  height:37px;
  transition: all 0.5s ease-in-out;
}


.big input{
  background: transparent;
  border: 0px;
  z-index: 200;
  position: relative;
  color: White;
  width: max-content;
}


/* LINE IN QUESTION */
.container:has(input:not(:placeholder-shown)) label {
 margin-top: -11px;
 font-size: 14.5px;
}

.container:has(input:not(:placeholder-shown)) .big{
  clip-path: polygon(0 0, 8px 0, 8px 2px, 148px 2px, 148px 0, 100% 0, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);
}