JSFiddle - React, Tailwind, and code Playground

by mahdiar_mansouri

HTML

<!DOCTYPE html>
    
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
    
    <html lang="en">
    <link rel="stylesheet" href="Contact.css">
    
    <head> 
      <title>Wholesale Portal</title>
      <body>
      <div class="container">
        <!--<form action="#">-->
          <center>
          <h1 class="title">Wholesale Portal</h1>
          <p class="subtitle">Please enter in values below to begin product search.</p>
          <input type="text" class="pid"  placeholder="Product Name">
          <input type="text" class="cid" placeholder="Warehouse City">
          <input type="number" class="qmin" placeholder="Minimum Quantity">
          <input type="number" class="qmax" placeholder="Maximum Quantity">
          <input type="number" class="pmin" placeholder="Minimum Price">
          <input type="number" class="pmax" placeholder="Maximum Price">
          <button type="submit" class="search">Search</button>
          <button type="reset" class="clear">Clear Form</button>
          </center>
        <!--</form>-->        
      </div> 
      <script>
          document.querySelector("[type=reset]").addEventListener('click' , ev => {
              document.querySelectorAll('input').forEach( item => item.value = '')
          })
      </script>
    </body>
    </head>
    </html>

CSS

body {
      background-color: #f18c8e;
    }
    
    .container {
      width: 600px;
      height: 600px;
      box-shadow: 0px 10px 35px 5px rgba(0, 0, 0, 0.2);
      position: relative;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10%;
      margin-bottom: auto;
      background-color:rgb(234, 234, 234);
    }
    
    .pid, .cid, .qmin, .qmax, .pmin, .pmax {
      width: 76%;
      font-size: 14px;
      letter-spacing: 1px;
      background-color: white;  
      padding: 10px 20px;
      border-radius: 20px;
      border: 2px solid rgba(255, 255, 255, 0.02);
      text-align: center;
      font-family: 'Ubuntu', sans-serif;
      margin-top: 2%;
      }
    
    .title {
      font-family: 'Ubuntu', sans-serif;
      color: rgb(153, 153, 153);
      padding-top: 1em;
      font-size: 100;
      letter-spacing: 2px;
    }
    
    .subtitle {
      font-family: 'Ubuntu', sans-serif;
      color: rgb(153, 153, 153);
      letter-spacing: 2px;
    }
    
    .search, .clear {
      padding-top: 10px;
      padding-bottom: 10px;
      color: rgb(255, 255, 255);
      font-family: 'Ubuntu', sans-serif;
      font-weight: bold;
      font-size: 13px;
      letter-spacing: 2px;
      margin-top: 6%;
      padding-left: 1em;
      padding-right: 1em;
      width: 30%;
      background-color:cadetblue;
      border: 2px solid rgba(255, 255, 255, 0.02);
      border-radius: 20px;
    }
    
    .clear:hover {
      cursor: pointer;
      background-color: rgb(81, 139, 141);
    }
    
    .search:hover {
      cursor: pointer;
      background-color: rgb(81, 139, 141);
    }
    
    .search {
      margin-right: 45px;
    }