JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<div class="form__field">
  <input type="email" id="txt" class="form__input form__input--text" />
  <label for="txt" class="form__label">Enter Your Email</label>
</div>

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background-color: rgb(250, 250, 250);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}


/*Actual Style*/
/*
  1. Fallback for the browsers that don't support `fit-cotnent`
*/
.form__field {
  position: relative;
  max-width: 10rem;
  max-width: fit-content;
  margin: 5rem auto 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.form__input {
  
}
/*
  1. We need this because .form__input--text has `clip-path` property applied to it
  which creates a new stacking context
*/
.form__label {
  position: absolute;
  left: 0.25rem;
  top: 0;
  z-index: 1;
}


.form__input--text {
  font-size: 1.2rem;
  border: none;
/*   border-bottom: 1px solid currentcolor; */
/*   -webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0 100%, 30% 100%);
  clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0 100%, 30% 100%); */
/*       -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 43%, 100% 100%, 24% 100%, 10% 100%, 0 100%, 0% 0%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 43%, 100% 100%, 24% 100%, 10% 100%, 0 100%, 0% 0%, 0 0); */
  
/*   -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 70%, 100% 100%, 18% 100%, 6% 100%, 0 100%, 0% 35%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 70%, 100% 100%, 18% 100%, 6% 100%, 0 100%, 0% 35%, 0 0); */
  
  -webkit-clip-path: inset(0px 0px 0px 0px round 0px 0px 0px 0px / 0% 0% 0% 0%);
  clip-path: inset(0px 0px 0px 0px round 0px 0px 0px 0px / 0% 0% 0% 0%);
  
  background: linear-gradient(transparent 95%, cornflowerblue 0);
/*   transition: clip-path .4s ease-out; */
}

.form__input--text:focus {
/*   -webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 0%,...