JSFiddle - React, Tailwind, and code Playground

by tony05060165

HTML

<body>

<h1>新增商品</h1>

<hr>

<from action="'/add-product'" method="post">

<div class="product">
<lable>商品名稱：</lable>
<input type="text" name="product">
</div>
 
 <div class="price">
<lable>價格：</lable>
 <input type="text" name="price">
 </div>
 
<div class="freight">
<lable>是否免運費：</lable>
 <!--freight運費-->
 <input type="checkbox" value="yes" name="freight">
 </div>
 
 <div class="gender">
<lable>性別：</lable>
 <input type="radio" value="men" name="gender" >男
 <input type="radio" value="women" name="gender">女
 </div>
 
 <div class="category">
 <lable>類別：</lable>
 <select name="category">
    <option value="clother">衣服
    <option value="jacket">外套
    <option value="pants">褲子
    <option value="accessories">飾品
 </select>
 </div>
 
 <div class="textarea">
<lable>商品備註：<br></lable>
<textarea>輸入文字</textarea>
</div>

</from>
</body>

CSS

body{
  	background-color:#F0F0F0
}
h1{
  text-align:center
}
lable{
  color:#003D79;
  font-weight:bold;
  margin-right:10px;
}
.product{
  margin:20px;
}
.price{
  margin:20px;
}
.freight{
  margin:20px;
}
.gender{
  margin:20px;
}
.category{
  margin:20px;
}
.textarea{
  margin:20px;
}
textarea{
  height:150px;
  width:400px 
}