JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<h1>新增商品</h1>
<div class="container">

<form action="/add-product" method="post">
<div class="product">
<span>商品名稱:</span> <input type="text">
</div>
<br>
<div class="price">
<span>商品價格:</span> <input type="text">
</div>
<br>
<div class="freight">
是否免運費:
<input type="checkbox" name="lastname">
</div>

<br>
<div class="gender">
性別: <input type="radio" id="contactChoice1" name="contact" value="email" />
<label for="contactChoice1">男</label>
<input type="radio" id="contactChoice1" name="contact" value="email" />
<label for="contactChoice1">女</label>
</div>
<br>
<div class="category">

類別:
<select>
    <option>上衣類</option>
    <option>外套類</option>
    <option>下身類</option>
    <option>配件類</option>
</select>
</div>
<div class='btn'>


 <button type="submit">新增產品</button>
</div>
</form> 
</div>

CSS

.container {
  display: flex;
  align-items: center;
  position:absolute;
  left:20%;
  background-color:#00FFFF;
  width:400px;
  height:400px;
}
span {
  padding-right:25px;
}
input {
  border-radius:10px;
}
select {
  border-radius:10px/10px;
}
.product {
 margin:10px;
}
.price {
 margin:10px;
}
.freight {
 margin:10px;
}
.gender {
 margin:10px;
}
.category {
 margin:10px;
}
.btn {
  position:absolute;
  left:35%;
}
button {
  font-size: 15px;
  padding: 2px 30px;
  border-radius: 10px;
  border: white;
  cursor: pointer; 
}
h1 {
   position:relative;
  left:40%;
}