JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>商品管理員後台</title>
  </head>
  <body>
    <h1>商品管理後台</h1>
    <hr>
   <div class="Product-Information">
     <from ation="/add-product" method="post">
       <div>
         <label for="product-name">商品名稱</label>
         <input type="text" name="product-name" placeholder="請輸入商品名稱">
       </div>
       <label class="photo" for="upload_img">
          <input tape="file" name="photo;" type="file">
       </label>
       <div>
         <labe for="Product Category">商品類別</labe>
          <select name="category">
           <option value="Classification">請選擇商品類別</option>
           <option value="shirt">服飾</option> 
           <option value="Pants">褲子</option>
           <option value="skirt">裙子</option>
           <option value="jacket">外衣</option>
           <option value="decorations">裝飾品</option>
         </select>
       </div>
       <div>
         <label for="sex">性別</label>
         <input type="radio" name="sex" value="Male">男
         <input type="radio" name="sex" value="female">女
       </div>
       <div>
         <label for="product price">商品價格</label>
         <input type="text" name="product_name" placeholder="請輸入商品價格">
       </div>
       <div>
         <label for="checkbox">是否免運</label>
         <input type="radio" name="checkbox">是
         <input type="radio" name="checkbox">否
       </div>
       <div>
         <labe for="product-description">商品介紹</labe>
         <br/>
         <textarea name="product-description" rows="10" cols="50"></textarea>
       </div>
       <hr>
       <input type="submit" name="submit" value="新增商品" onclick="alert('新商品已上架')" />
     </from>
   </div>
  </body>
</html>

CSS

*{
  padding: 0;
  margin: 10px;
}
.Product-Information{
  background-color: #E0E0E0;
  margin: 10px;
  padding: 20px 20px;
}

form input,,select {
  padding: 5px;
  margin-left: 20px;
  margin-right: 5px;
}