JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<body>
   <h1>想說什麼，大聲說</h1>
   <form action="">
      <input type="text" id="username" placeholder="你叫什麼呢"/>
      <textarea name="feedback autosize" id="feedback" cols="30" rows="3" placeholder="想說什麼都可以"></textarea>
      <input disabled type="submit" value="送出" class="submit" style='text-align:"right"' onclick='processFormData();addMsg()'>
   </form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js" integrity="sha512-EAEoidLzhKrfVg7qX8xZFEAebhmBMsXrIcI0h7VPx2CyAyFHuDvOAUs9CEATB2Ou2/kuWEDtluEVrQcjXBy9yw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./text.js"></script>

SCSS

body{
   margin: 0 auto;
   width: 60vw;
   background-color: bisque;
   h1{
      text-align: center;
      font: 1.5em sans-serif;
      margin: 0.5rem;
   }
   form{
      display: flex;
      flex-direction: column;
      position: relative;
      #username{
         width: 140px;
         border-radius: 3px;
         border: 1px solid black;
         padding: 5px;
         margin-left: 2px;
         font-size: 14px;
      }
      textarea{
         border-radius: 3px;
         border: 1px solid black;
         padding: 5px;
         font-size: 14px;
         margin-top: 10px;
      }
      .submit{
         border: 1px solid black;
         margin: 0.8rem;
         padding: 0.5rem;
         font-size: 14px;
         width: 120px;
         position: absolute;
         right: -10px;
         bottom: -60px;
      }
   }
}

JavaScript

autosize(document.querySelectorAll('textarea'));