JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.js"></script>
    <form class="container">
      <h1>真情留言板</h1>
      <br />
      <input
        type="text"
        placeholder="我的暱稱"
        title="我的暱稱"
      /><br />
      <textarea id="我的留言" placeholder="我的留言"></textarea><br />
      <input type="button" id="送出" value="送出"/>
    </form>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  font: inherited;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100svh;
}

form {
  width: 300px;
  padding: 8px;
  min-height: 300px;
  border: 2px solid black;
  background-color: rgb(107, 193, 243);
  align-items: center;
  text-align: center;
}

input,
label,
textarea,
button {
  display: block;
  width: 100%;
  margin-top: 10px;
  font-size: 24px;
}

textarea{
  min-width: 100%;
  max-width: 100%;
}

JavaScript

const textareas = document.querySelector("textarea");
autosize(textareas);