JSFiddle - React, Tailwind, and code Playground

HTML

<h1>後台管理</h1>
    <form action="/add-product" method="post">
        產品名稱 :  <input type="text" class="text"><br>
        價&emsp;&emsp;格 :  <input type="text" class="text"><br>
        免&ensp;運&ensp;費 : 是<input type="checkbox" class="checkbox"> 否<input type="checkbox"><br>
        性&emsp;&emsp;別 : 男<input type="radio" class="radio">女<input type="radio"><br>

        <Label>類        別 :    </Label>
        <select name="" id="">
            <option value="">上衣</option>
            <option value="">外套</option>
            <option value="">下身</option>
            <option value="">配件</option>
        </select><br>
        <label for="">商品備註:</label> <br>
        <textarea name="" id="" cols="30" rows="10">請留下你想說的話...</textarea><br>
        <input type="submit" class="button" value="提交" style="background-color: green;">
        <input type="reset" class="button" value="重新輸入" style="background-color: red;">
    </form>

CSS

*{
            font-weight: 600;
            color:#4b0080
        }
        .text ,.checkbox ,.radio{
            border-radius: 5px;
            margin: 10px;
        }
        .button{
            border-radius: 10px;
            border: solid white;
            padding: 5px 10px;
            color: #fff;
            margin: 0 10px;
        }
        select{
            margin: 10px;
        }
        form{
            text-align: center;
        }
        h1{
            text-align: center;
        }
        label{
            margin: 10px;
            white-space: pre;
        }
        textarea{
            margin: 10px 0;
            border-radius:5px;
        }
        body{
          background-color:#f0fff0;
        }