<form>

  <div class="input-group">

    <input id="full-name" placeholder="" value="Dil" />

    <label for="full-name">Full Name</label>

  </div>

  <div class="input-group">

    <input

      type="password"

      id="password"

      placeholder=""

    />

    <label for="password">Password</label>

  </div>

</form>

* {

  box-sizing: border-box;

}

​

body {

  margin: 0;

  padding: 20px;

  font-family: Poppins;

}

​

form {

  margin: 80px auto;

  display: flex;

  gap: 20px;

  max-width: 300px;

  width: 100%;

}

​

input {

  font-weight: bold;

}

​

.input-group {

  position: relative;

  --x: 15px;

  --y: 10px;

}

​

label,

input {

  font-size: 18px;

}

​

input {

  border: 1px solid black;

  width: 100%;

  padding: var(--y) var(--x);

}

​

input:is(:focus, :not(:placeholder-shown)) ~ label {

  top: calc(var(--y) - 27px);

  font-size: 14px;

  border-color: black;

  color: green;

}

​

label {

  position: absolute;

  background-color: white;

  left: calc(var(--x) - 6px);

  top: calc(var(--y) - 3px);

  border: 1px solid transparent;

  padding: 0 6px;

  margin: 0;

  cursor: text;

  transition: top 300ms, font-size 300ms, border-color 300ms;

}

​