JSFiddle - React, Tailwind, and code Playground

by mooju7463

HTML

<html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>樂器商品</title>
     </head>

  <body>
  
<fieldset>
      <legend>
      Order
      </legend>
      <form action="/add-product" method="post">
        Name:<br>
        <input type="text" class="hvr" placeholder="Your Name" name="Name">
        <br/> Adrress:
        <br>
        <input type="text" class="hvr" placeholder="Address Please" name="adrress">
        <br/> Phone: <br/>
        <input type="text" class="hvr" placeholder="Phone number" name="phone">
        <br/> Gender:
        <br/>
        <input type="radio" name="gender" value="male">Male
        <input type="radio" name="gender" value="female">Female
        <br/> Delever Coupon: <br/>
        <input type="checkbox" name="yes" value="on">Yes
        <input type="checkbox" name="no" value="on">No
        <br/> Instrument:
        <br/>
        <select name="catagory">
        <option value="Select">Select</option>
        <option value="Electric Guitar">Electric Guitar</option>
        <option value="Guitar">Guitar</option>
        <option value="Saxphone">Saxphone</option>
        <option value="Midi">Midi</option>
        <option value="Electric bass">Electric bass</option>
        <option value="Synthesizers">Synthesizers</option>        
        </select>
        <br/> Remark:
        <br/>
        <textarea rows="10" cols="60" name="note">
        </textarea>
        <br/>
        <input type="submit" value="Sumit" style="width:80px;height:40px;">
        <br/>

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

</html>

CSS

body {
  width: 80%;
  max-width:800px;
  padding-left: 10px;
  margin: auto;
}



legend {
  font-size: 36px;
  font-weight: bold;
  font-family: "cursive", cursive, serif;
}

form {
  font-size: 34px;
  line-height: 50px;
  word-spacing: 30px;
  padding-left: 10px;
}

input {
  zoom: 2;
}

select {
  width: 250px;
  height: 40px;
  font-size: 20px;
}

select:hover {
  border: 3px solid blue;
}

option {
  font-size: 20px;
}

textarea {
  font-size: 26px
}

textarea:hover {
  border: 4px solid blue;
}

.hvr:hover {
  border: 2px solid blue;
}