JSFiddle - React, Tailwind, and code Playground

by second9040

HTML

<!DOCTYPE html>
<html lang="zh-Hant">

   <head>
      <title>Text Input Control</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="/style.css">

   </head>
   
   
	
   <body> 
   
       <form action="/add-product">
         <p>Newing product to website</p>
           商品名稱
           <input type="text" name="product" placeholder="key in product name">
           <br><br>
           商品價格
           <input type="text" name="price" placeholder="key in product price">
           <br><br>
           免　　運
           <input type="checkbox" name="fare" value="on">是
           <input type="checkbox" name="fare" value="on" checked>否
           <br><br>
           性　　別
           <input type="radio" name="gender" checked>男
           <input type="radio" name="gender">女
           <br><br>
           類　　別
           <select name = "dropdown">
               <option value="upper_outer_garment" selected>上衣</option>
               <option value="coat">外套</option>
               <option value="lower_body">下身</option> 
               <option value="accessories">配件</option>
           </select>
           <br><br>
           <div>
           <span>備　　註</span>
           <textarea rows = "5" cols = "50" name = "description">key something...</textarea>
           </div>
           <input type="submit" value="submit">
       </form>
   </body>
	
</html>

CSS

body {
  font-family: "微軟正黑體";
}

p {
  color: #33FFAA;
}

form {
  margin: 20px;
  padding: 20px;
  border: solid 3px #99FF99;
}

input ,select {
  margin: 10px;
}

span {
 float: left;
 margin: 30px 15px 10px 0px;
}