JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/6.0.1/autosize.js" integrity="sha512-TTqUJJmE+6gbf9z51PFPDwDbXHaYFLxVPxRGwQkvzrkk5K9HliAWt/mCX1JjlRZ/Rrnq9aol56zIkYoVnp/Jeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div class="frame_div">

        <input class="input_name" type="text" placeholder="輸入暱稱 . . .">

        <textarea class="input_text" placeholder="輸入留言 . . ."></textarea>

        <div class="btn_div"><input class="btn" type="button" value="送出"></div>

</div>

CSS

.frame_div{

    width: 300px;

    background-color: rgba(182, 180, 180, 0.6);
}

.input_name{

    width: 200px;
    height: 25px;

    box-sizing: border-box;

    text-indent: 2px;

    position: absolute;
    margin-top: 50px;
    margin-left: 50px;

    font-family: Comic Sans MS , Microsoft JhengHei;
}

.input_text{

    width: 200px;
    height: 70px;

    box-sizing: border-box;

    /*text-indent: 2px;*/
    padding-left: 5px;
    padding-right: 3px;

    position: relative;
    margin-top: 100px;
    margin-left: 50px;

    font-family: Comic Sans MS , Microsoft JhengHei;
}


.btn_div{
    width: 150px;
    height: 50px;

    text-align: center;

    position: relative;
    margin-left: 75px;
    margin-top: 20px;

    /*border: 1px solid black;*/
}

.btn{
    box-sizing: border-box; 
}

JavaScript

autosize(document.querySelector('.input_text'));