JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<div class="trading_ui">
  <div class="Limit">
    <form action="/action_page.php">
      <a>First name:<input type="text" name="firstname" value="Mickey"></a>
      <a>First name:<input type="text" name="firstname" value="Mickey"></a>

      <input type="submit" value="Submit">
    </form> 
  </div>
  <div class="Market">
    <table>
  <tr>
    <td>Prix :</td>
    <td><input type="text" name="firstname" value="Mickey"></td>
  </tr>
  <tr>
    <td>Montant :</td>
    <td><input type="text" name="firstname" value="Mickey"></td>
  </tr>
  <tr>
    <td>Total :</td>
    <td><input type="text" name="firstname" value="Mickey"></td>
  </tr>
</table>
<input type="submit" value="Submit">

  </div>
  <div class="Market">
    <form>
   <fieldset>
      <div>
         <h3>Mailing Address</h3>
         <label class="required">First Name: <input type="text" name="mailing_firstname" size="50" required /></label>
         <label class="required">Last Name: <input type="text" name="mailing_lastname" size="50" required /></label>
         <label>Organization: <input type="text" size="50" name="mailing_organization" /></label>
         <label class="required">Address: <input type="text" name="mailing_address" size="50" required /></label>
         <label class="required">City: <input type="text" name="mailing_address" size="50" required /></label>
         <label class="required">State: <input type="text" name="mailing_city" size="2" required /></label>
         <label class="required">ZIP Code: <input type="zip" name="mailing_zipcode" size="10" required /></label>
         <label class="required">Phone: <input type="phone_us" name="mailing_phone" size="12" required /></label>
         <label>Fax: <input type="phone_us" name="mailing_fax" size="12"/></label>
         <label>Mobile: <input type="phone_us" name="mailing_mobile" size="12" /></label>
         <label>Email: <input type="email" name="mailing_email" size="50" /></label>
      </div>
   </fieldset>
</form>
 ...

CSS

html, body {
  padding: 0;
  margin: 0;
}
.header{
  border-top: solid 3px #4074b5;
  background: rgba(0, 0, 0, 0.9);
  padding: 10px;
  padding-top: 5px;
}
.logo{
  color: #FFFFFF;
  text-shadow: 2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5,   0px -2px 0 #4074b5;
  font-size:35px;
}
.header > div{
  float:right;
  margin-right:10%;
}
.menu_button{
    display: inline-block;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #4074b5;
    text-decoration: none !important;
    margin-top: -10px;
    border-radius: 0 0 5px 5px;
    cursor:pointer;
}
.trading_ui{
   display: grid;
   grid-template-columns: auto auto auto;
   grid-gap: 5%;
   padding: 10px;
   background: #444;
}
.trading_ui > div {
  background:#fff;
  padding: 10px;
}
.trading_ui > div > form{
    display: grid;
  grid-template-columns: auto;
  grid-gap: 5%;
}
.trading_ui > div > table{
   margin: 5% 10%;
  width:80%;
}
.trading_ui > div > table > tr{
      display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5%;
}
.trading_ui input[type="submit"]{
  background:red;
  margin: 0 10%;
  width:80%;
  cursor: pointer;
  user-select: none;
  color: white;
  font-size: 16px;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  outline: none;
  background: rgb(112, 168, 0);
  border-color: rgb(112, 168, 0);
}
.trading_ui input[type="text"]{
    color: rgb(212, 212, 212);
    background: rgb(47, 56, 63);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(64, 75, 85);
    border-image: initial;
    padding: 0px 0px 0px 10px;
    outline: none;
    font-size:16px;
    width:100%;
}