JSFiddle - React, Tailwind, and code Playground

HTML

<h1>商品資訊</h1>
<hr>
<form action="/add-product/" method="POST">
<div class="container">
  <div class="item">
    <label for="product_name">商品名稱</label>
    <input type="text" id="product_name" >
  </div>
  <div class="item">
    <label for="product_price">價格</label>
    <input type="text" id="product_price">
  </div>
  <div class="item">
    <label for="product_free">是否免運費</label>
    <input  type="checkbox" value="是">是
  </div>
  <div class="item">
    <label for="sex">性別</label>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
  </div>
  <div class="item">
  <label for="Product_category">產品類別</label>
    <select>
        <option>上衣類</option>
        <option></option>
        <option></option>
        <option></option>
    </select>
  </div>
  <div class="item ">
    <label for="Product_commit">商品備註</label>
    <textarea>
      
    </textarea>
  </div>
  <input class="btn" type="submit" value="送出">

  
</div>



</form>

CSS

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

h1{
  text-align:center;
  margin-bottom:20px;
}

.container{
  width:80vw;
  height:100%;
  margin: 0 auto;
  margin-top:20px;
  background-color:#f5f3f0;
  padding:20px;
}

.item{
  display:flex;
  align-items: center;
  margin-bottom:30px;
}

label{
  margin-right:5px;
}

input{
  padding:3px;
}

select{
  padding:5px;
}

textarea{
  width:300px;
  height:200px;
}

.btn{
  padding:10px 20px;
  border-radius:5px;
  border: 1px solid black;
}