JSFiddle - React, Tailwind, and code Playground

by 973224

HTML

<html>
<body>
  <div class='background'></div>
  <h1>Welecome to Jenny's Shop</h1>
  <form action='/add-product' >
  <fieldset style='width:50%'><legend style='text-align:center'>
  </legend>
  
  <div class='name'>
    商品名稱：
    <input type='text' name='商品名稱' value='新春福袋不挑款'readonly size='30' >
  </div>
  
  <div class='select'>
    尺寸
  <select name='products'>
    <option value='cloths'>S</option>
    <option value='coats'>M</option>
    <option value='pants'>L</option>
    <option value='decoration'>XL</option>
  </select>
  </div>
  
  <div class='price'>
    商品價格：
    <input type='text' name='商品價格' size='30' required>
  </div>

  <div class='delivery'>
    <input type='checkbox'>免運優惠
  </div>
  
  <div class='male'>
    <input type='radio'>男士
    <input type='radio'>女士
  </div>
  
  <div class='talk'>
    <textarea name='message' rows='5' cols='29' placeholder='留言告訴我們!'></textarea>
  </div>
 
  <div class='all'>
  <input class='file' type='file' name='img' multiple='multiple'/>
  </div>
 
    <input class='submit' type='submit' value='送出' onclick="alert('訂單確認完成，謝謝您！')" /> 
  

      
 
 </fieldset>
 </form>
</body>
</html>

CSS

body{
  background:#f5fbf9;
}

.background{
  background:none;
  width:100%;
  height:30px;
}
h1{
  text-align:center;
}
h3{
  text-align:center;
  margin-top:-15px;
  color:#b8d8e5;
  height:30px;
  
  border-bottom:1px solid black;
}

fieldset{
  margin:auto;
  background:#b8d8e5;
 border:none;
}

.name{
  display:flex;
  justify-content:left;
  align-content:left;
  flex-wrap:wrap;
  width:150px;
  margin:auto;
  padding-top:20px;
  color:blue;
  position:relative;
  right:43px;
}

.price{
  display:flex;
  justify-content:left;
  align-content:left;
  flex-wrap:wrap;
  background:none;
  width:150px;
  margin:auto;
  padding-top:20px;
  color:blue;
  position:relative;
  right:43px;
  
}

.delivery{
  display:flex;
  position:relative;
  padding-top:10px;
  left:45px;
}

.male{
  position:relative;
  left:180px;
  top:-22px;
}
.select{
  position:relative;
  left:48px;
  padding-top:10px;
}

.talk{
  display:flex;
  justify-content:center;
  align-content:center;
  flex-wrap:wrap;
  padding-bottom:40px;
}

.all{
position:relative;
left:51px;
top:-30px;
}

.submit{
 position:relative;
 left:245px;
 top:-20px;
 width:40px;
 display:flex;
 justify-content:center;
 align-content:center;
 flex-wrap:wrap;
 background:#7197a4;
 color:white;
 border:none;
 border-radius:15px;
}