JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div id="head">
      <h1>後台管理面板</h1>
      <p>商品上架</p>
    </div>
    <div id="item">
      <form class="form" action="/add-product" method="POST">
        <div class="name">
          <span>商品名稱：</span><input type="text"></div>
        <div class="price">
          <span>價格：</span><input type="text"></div>
        <div class="fee"><span>免運：</span><input type="checkbox"></div>
        <div class="gender"><span>性別：</span><input type="radio" name="gender" value="male">男性<input type="radio" name="gender" value="female">女性</div>
        <div class="select">
          <span>類型:</span>
          <select name="cloth" id="select">
            <option value="cloth">上衣
            </option>
            <option value="outer">外套類
            </option>
            <option value="botton">下身類
            </option>
            <option value="others">配件類
            </option>
          </select>
        </div>
        <div class="remark">
          <p id="mark">商品備註:</p><textarea name="textarea" id="textarea" cols="50" rows="10"></textarea>
        </div>
        <div class="ss">
        <input type="submit" class="submit" onclick="alert('新商品已上架')"/></div>
      </form>
    </div>
  </body>

</html>

CSS

* {
  border: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #EBEBFF;
}

#head {
  margin: 60px;
}

#head h1,
#head p {
  padding: 3px;
  text-align: center;

}

#head p {
  border-bottom: 1px solid #C2C2FF;

}

#item {
  margin: 40px;
  background-color: #EDD4FF;
  border-radius: 25px;
  text-align: left;
  padding: 20px;
}

.name,
.price,
.fee,
.gender,
.select,
.remark {
  padding: 10px;
}

#mark {
  padding-bottom: 8px;
}

.submit {

  width: 70px;
  margin: 20px;
  padding: 10px;
  border-radius: 25px;
}

.submit:hover {
  background-color: #FFFF1C;
}

.ss {
  display: grid;
  place-items: center;
}

input {
  border-radius: 8px;
}

.gender input {
  margin: 5px;
}

textarea {
  border-radius: 8px;
}
.name input,
.price input{
  height:25px;
}