JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="g-liner centered">
  <div class="form-wrapper g-half">
    <div class="admin-form">
      <form method="post">
        <div class="form-item">
          <label for="firstName">First Name:</label>
          <input type="text" id="firstName" name="firstName" required />
        </div>
      </form>
    </div>
  </div>
    <div class="form-wrapper g-half">
    <div class="user-form">
      <form method="post">
        <div class="form-item">
          <label for="firstName">First Name:</label>
          <input type="text" id="firstName" name="firstName" required />
        </div>
      </form>
    </div>
  </div>
</div>

CSS

html {
  padding: 0px;
  margin: 0px;
  font-size: small;
  font-family: Verdana, Arial, sans-serif;
  color: #000000;
  background-color: #ffffff;
}

.g-liner {
  padding: 1rem;
  margin: auto;
}

.g-half {
  max-width: 35%;
  width: 600px;
}

.centered {
  margin: 0px auto;
  text-align: center;
}

.form-item {
  display: block;
}

label {
  display: inline-block;
  min-width: 140px;
}

.form-wrapper {
  text-align: left;
  margin: 0px auto; /* center the form contents */
  display: inline-block;
}

input[type='text'],
select,
textarea {
  padding: .2rem;
  border-radius: .3rem;
  border: inset 1px rgba(0, 0, 0, .4); /* black with semi-transparency */
}

.admin-form input[type='text'] {
  color: #6767ad;
}

.user-form input[type='text'] {
  color: #67ad67;
}