JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

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

  <head>
    <title>Input</title>

    <style>
      body {
        margin: 0px;
      }

      #top-heading {
        padding: 1rem;
        text-align: center;
        margin: auto;
        margin-bottom: 1rem;
      }

      textarea {
        width: 85%;
        display: block;
        height: 10vh;
        margin: 1.5rem;
        margin-top: 0rem;
        padding: 0.5rem;
        font-size: large;

      }

      span {
        position: absolute;
        top: 6rem;
        padding-left: 2.7rem;
        color: rgb(121, 120, 120);
        font-size: larger;
        transition: .6s ease;
      }

      textarea:focus~span {
        color: black;
        font-size: 1.091rem;

        transform: translate3d(-1.15rem, -1.9rem, 2rem);
      }

    </style>
  </head>

  <body>
    <h1 id="top-heading">Input</h1>

    <textarea id="txt-input"></textarea>
    <span>Enter the input</span>
  </body>

</html>