JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表單</title>
</head>
<body>

<fieldset>
<legend>新增商品</legend>
<form action="/add-product" method="post">

    <p>商品名稱：
      <input type="text">
    </p>
  
    <p>價格：
      <input type="text">
    </p>
  
    <p>是否免運費：
      <input type="checkbox" name="freeshipping" value="yes">是
      <input type="checkbox" name="freeshipping" value="no">否
    </p>
  
    <p>性別：
      <input id="male" type="radio" name="gender" value="male">男
      <input id="female" type="radio" name="gender" value="female">女
    </p>
  
    <p>類別：
      <select name="category">
        <option value="tops" selected="selected">上衣類</option>
        <option value="outerwear">外套類</option>
        <option value="bottoms">下身類</option>
        <option value="accessory">配件類</option>
      </select>
    </p>
  
    <p>商品備註：</p>
      <textarea name="remarks" cols="50" rows="10"></textarea>
  
    <p>
      <input type="submit" value="送出">
    </p>
</form>
</fieldset>

</body>
</html>

CSS

body {
  width: 80%;
  max-width: 640px;
  margin: 20px auto;
}

fieldset {
  border: 1px dotted #ccc;
}

legend {
  font-size: 20px;
  font-weight: bold;
}

form {
  margin: 10px 20px;
}

p {
  line-height: 0.3em;
}

select {
  width: 100px;
  font-size: 14px;
}


textarea {
  font-size: 14px;
}