JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<div id="content">
<!-- lightbox drawer for payment -->
<div class="lightbox-drawer">
<h5>Payment Detail</h5>
<div class="form-group">
<select name="pmtmethod"><option value="null">Select Payment Method</option><option value="cc">Credit Card</option><option value="chk">Check</option><option value="tx">Bank Transfer</option><option value="csh">Cash</option></select>
</div>
<div class="form-group">
<input name="refnum" placeholder="Reference Number">
</div>
<div class="form-group">
<textarea name="paynotes" placeholder="Payment Notes"></textarea>
</div>

</div><!--drawer-->


</div>

CSS

#content {
  width: 500px;
  border: 1px solid black;
  margin: 0 auto;
  background-color: #FFF;
  overflow-x: hidden;
  min-height: 500px;
  position: relative;
}
.lightbox-drawer h5 { 
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  margin: 0 0 10px;
}
.lightbox-drawer { 
  width: 40%;
  border: 1px solid #696969;
  height: 100%;
  padding: 15px;
  background: #ececec;
  position: abosolute;
  right: 0;
  top: 0;
}

.lightbox-drawer input,
.lightbox-drawer textarea,
.lightbox-drawer select {
  width: 95%;
  margin: 5px 0;
  padding: 2px 4px;
}
.lightbox-drawer textarea {
  height: 60px;
}