JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <h1 class="signup-header-text">SIGN UP</h1>
  <div class="clear"></div>
  <form class="signup-form" action="#" method="post">
    <div id="first_step">
      <div class="form">
        <label for="gender">You are:</label>
        <br />
        <select id="gender" name="gender" size="2">
          <option value="1">Male</option>
          <option value="2">Female</option>
        </select>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
      <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
    </div>
  </form>
<div id="progress_bar">
       <div id="progress"></div>
       <div id="progress_text">0% Complete</div>
</div>
</div>

CSS

#container {
    height: 410px;
    min-height: 410px;
    min-width: 756px;
    width: 756px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -205px; /* Half the height */
    margin-left: -378px; /* Half the width */
    background: #e9e5e5;
    border: solid #dcdcdc 2px;
    outline: solid #c4c4c4 1px;
    -webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
    -moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
    box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
    text-align: center;
}