JSFiddle - React, Tailwind, and code Playground
HTML
<div class="Backstage">
<h1>購物車登陸</h1>
<form action="">
<table cellspacing="20">
<tr>
<td>商品編號</td>
<td><input type="text" name="modity"></td>
</tr>
<tr>
<td>價格</td>
<td><input type="text" name="money"></td>
</tr>
<tr>
<td>是否免運</td>
<td>
<input type="radio" name="freight" value="yes">是
<input type="radio" name="freight" value="no">否
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="gender" value="F">男
<input type="radio" name="gender" value="M">女
</td>
</tr>
<tr>
<td>商品類別</td>
<td>
<select name="MENU">
<option value="hint">清選擇商品....</option>
<option value="clothing">衣服</option>
<option value="pants">褲子</option>
<option value="sock">襪子</option>
<option value="shoe">鞋子</option>
</select>
</td>
</tr>
<tr>
<td>意見回饋</td>
<td>
<textarea name="msg" cols="40" rows="8"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" value="提交檔案" style="margin:0px 20px 0px 20px">
<input type="submit" name="submit" value="重選">
</td>
</tr>
</table>
</form>
</div>
CSS
html,body {
padding: 0px;
margin: 0px;
width: 100%;
background-color: #FFD306;
}
h1 {
text-align: center;
}
table {
margin: auto;
background-color: #2894FF;
}
.Backstage {
border: solid 1px;
width: 600px;
padding: 0px 0px 10px 0px;
margin: 10px auto 0px;
background-color: #FF2D2D;
border-radius: 5px;
}
td {
font-weight: 900;
}