JSFiddle - React, Tailwind, and code Playground

by kloewu

HTML

<html>
<body>
<form action="’/add-product’" method="post">
<legend>商品新增</legend>
<hr>
商品名稱<input type="text" value="輸入商品名稱">
<br/>價格<input type="text" value="售價">
<br/>是否免運費
<br/><input type="checkbox" name="delivery" value="free">是
<input type="checkbox" name="delivery" value="charge">否
<br/>性別
<input type="radio" name="sex" value="male">男/
<input type="radio" name="sex" value="female">女
<br/>類別:
<select name="category">
<option value="top">上衣類</option>
<option value="top">外套類</option>
<option value="top">下身類</option>
<option value="top">配件類</option>
</select>
<br/>
<textarea name="message" rows="5" cols="50">
商品備註</textarea>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>

CSS

body{
  line-height:2.2em;
  font-family: Microsoft JhengHei;
  margin-top: 20px;
  margin-left: 50px;
  color: #6C6C6C;
}
legend{
  font-size: 2.2em;
  font-weight: bold;
  color: 	#272727;
  margin: 15px 0px;
}

input{
  color: #8E8E8E;
  padding: 8px;
  margin-left: 10px;
  margin-bottom: 10px;
  -webkit-border-radius: 5px;
  border: 1px #F0F0F0 solid;
  background: #272727;
}
select{
  background: #272727;
  color: #fff;
  width:100px;
  height: 30px;
  -webkit-border-radius: 5px;
  padding-left:5px;
  
}
option{
  background: #272727;
  color: #fff;
  padding-left:5px;
  padding-right: 5px;
}
textarea{
 resize: none;
  background: #F0F0F0;
  border: 3px solid 	#E0E0E0;
  color: 	#BEBEBE;
  margin: 15px 0px;
   -webkit-border-radius: 5px;
}
input[type="submit"] {
  width: 100px;
  background: 	#272727;
  color: #fff;
  padding: 5px 15px;
  -webkit-border-radius: 5px;
  border: 0px;
}