JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./sytle.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
    
        <div class="container">
            <div class="title">
                <h1>Frequently Asked Question</h1>
            </div>
            <div class="contentbox">
                <div class="question">如何辦理退換貨？</div>
                <div class="content">請參考退貨服務頁面。</div>
            </div>
            <div class="contentbox">
                <div class="question">退款方式及退款時間？</div>
                <div class="content">約7-8個工作天完成退款作業。</div>
            </div>
            <div class="contentbox">
                <div class="question">未退回的退款，是否可直接折抵新訂單？</div>
                <div class="content">很抱歉，重新訂購時無法直接於新訂單扣抵。</div>
            </div>
            <div class="contentbox">
                <div class="question">發票遺失是否仍能辦理退換貨？</div>
                <div class="content">很抱歉，需要有發票才能辦理退換貨。</div>
            </div>
            <div class="contentbox">
                <div class="question">什麼情況無法辦理退換貨？</div>
                <div class="content">超過7天退貨期限，就無法辦理。</div>
            </div>
        </div>
        <script src="./javascript.js"></script>
</body>
</html>

CSS

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

html,body{
    width: 100vw;
    height:100vh;
}



.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height:100%;
    width:100%;
}

.contentbox{
    box-shadow: 0px 2px 8px rgba(0, 0, 0 , 0.3);
    width: 60%;
    margin:0 auto;
    margin-top: 0.5rem;
    font-size: 18px;
    position: relative;
    padding:10px;
    cursor: pointer;
}

.contentbox .question:after{
    content:"+";
    position:absolute;
    font-size: 1.5rem;
    right:2rem;
    top:0.3rem;
}

.contentbox .content{
    height: 0px;
    visibility: hidden;
    margin-top:5px;
    transition: 0.5s;
    padding-left:1rem;
    overflow-y: auto;
    border-left:5px solid #f7d899;
}

.contentbox.active .content{
    height: auto;
    visibility: visible;
    transition: 0.5s linear;
    margin-top:10px;
    
    
}

.contentbox.active .question:after{
    transform:rotate(45deg);
}

JavaScript

let contentbox = document.querySelectorAll(".contentbox");
    for(let i = 0; i < contentbox.length; i++){
        contentbox[i].addEventListener("click",function(){
            this.classList.toggle("active");
        })
    }