JSFiddle - React, Tailwind, and code Playground

by jiaxin520

HTML

<!DOCTYPE html>
<html>
  <body>
  <h1>
  毅力為購物平台
  </h1>
  <form action=" ‘/add-product’" method="POST" accept-charset="UTF-8"
  autocomplete="off" enctype="multipart/form-data" novalidate target="_blank">
  <div>
  商品名稱
  <input type="text" name="good" value="請輸入商品名稱">
 <br />
  
  價格
  
 <input type="text" name="good" value="請輸入價格">
  <br />
  是否免運費
  <input type="checkbox" name="tax1" value="need">
  <label for="tax1">需要</label>
  <input type="checkbox" name="tax2" value="no need">
  <label for="tax2">不需要</label>
  <br />
  性別 男/女
  <input type="radio" name="sex" value="male" checked>男
  <input type="radio" name="sex" value="female">女
  <br />
  <label for="clothes">類別:</label>
  <select name="clothes" id="clothes">
  <optgroup label="上衣類">
  <option value="T-shirt">T絮 </option>
  <option value="sweater">毛衣</option>
  </optgroup>
  <optgroup label="外套類">
  <option value="jacket">夾克</option>
  <option value="sports jacket">運動夾克</option>
  </optgroup>
  <optgroup label="下身類">
  <option value="jeans">長褲</option>
  <option value="underwear">內褲</option>
  </optgroup>
  <optgroup label="配件類">
  <option value="watch">手錶</option>
  <option value="ring">戒指</option>
  </optgroup>
  </select>
  <br />
  商頻備註
  <br />
  <textarea id="idea" name="idea" rows="4" cows="50">請提供意見</textarea>
  <br />
  <input type="submit" name="message" value="立即搜尋">
  </div>
  </form>
  
  </body>
</html>

CSS

h1{ text-align:center;
  width:auto;
}
body{ background:rgba(0,0,0,0.3);
  
}
form{width:auto;
height:400px;
  font-size:24px;
  background-color:rgba(13,11,10,0.3);
  color:yellow;
  font-family:"Times New Roman",serif;
  margin:20px;
}
div{margin-left:150px;
  padding-top:30px;
}
input,select{ 
padding-top:0;
padding-bottom:5px;
margin-left:55px;
margin-top:14px;
}
textarea{
  padding-right:200px;
  padding-bottom:45px;
}