JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div class="document-preferences">
  <div class="tab-header">
    <span>DOCUMENT PREFERENCES</span>
    <span>FILE PREVIEW</span>
  </div>

  <div class="section-heading">SECTION HEADING</div>

  <div class="signature-order-instruction">
    Signature order is indicated with ...
    To change the order, drag and drop the items to indicate a new order
  </div>

  <div class="document-preferences-item">
    <span class="item-number"><span>1</span></span>
    <span>Add Assignee(s)</span>
    <span>Due Date</span>
    <button class="delete-button">×</button>
  </div>

  <!-- Repeat the .document-preferences-item for each item -->

  <div class="add-signature-trigger">
    <span>+</span>
  </div>

  <div class="advanced-preferences">
    Advanced Preferences
  </div>

  <div class="section-heading">SECTION HEADING</div>

  <div class="signature-instructions">
    Signature Instructions
    <textarea placeholder="Type additional instruction"></textarea>
  </div>

  <button class="save-preferences">SAVE PREFERENCES</button>
</div>

CSS

// ****************************************************************************
// Start - New for Advanced Upload
// ****************************************************************************
/* needed for modal to flex widgets */
.modal-header .close {
  display:none;
}

.drop-zone-over {
  border: 2px #00A4FF !important;
  border-radius: 10px;
  border-style: dashed !important;
}

.dtech-active-uploading-modal-cover-relative {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1000;
  background: rgba(0, 0, 0,  0.8)
}

.dtech-upload-modal{
  background-color: #F5F7F9;
  margin: -5px -15px;
}
.dtech-upload-modal-widget-body {
  background-color: #F5F7F9;
  padding: 5px 15px;
  margin-bottom: 0px;
}

.dtech-upload-disclaimer-box{
  background-color: #F5F7F9;
  margin: 5px;
  padding: 10px;
  border: 1px solid #D9D9D9;
}
.dtech-upload-file-header {
  padding: 15px 0px;
  border-bottom: 1px solid #e5e5e5;
}
.dtech-upload-properties-header {
  padding: 17px 0px 15px 0px;
  border-bottom: 1px solid #e5e5e5;
}

.dtech-upload-empty-over-here-text{
  align-items:center;
  justify-content:end;
  color: #949494;
  font-size: 24px;
}

.dtech-upload-img-wrapper{
  align-items:center;
}

.dtech-upload-empty-img{
  height:140px;
  width:209px;
  padding:20px;
}

.dtech-upload-select-document-text{
  align-items:center;
  justify-content:start;
  color: #949494;
  font-size: 14px;
}

.dtech-uploading-center-wrapper{
  background-color: #1E1E1E;
  padding: 50px;
  border-radius: 10px;
}
.dtech-uploading-your-files{
  text-align:center;
  color: #FFFFFF;
  font-size: 20px;
}

.dtech-uploading-files-img-wrapper{
  padding:20px 0px 20px 0px;
}

.dtech-uploading-take-a-second-text{
  text-align:center;
  color: #FFFFFF;
  font-size: 14px;
}

.dtech-upload-file-row{
  display: flex;
  align-items:center;
}
.dtech-upload-file-item {
  margin: auto;
  background-color: #ffffff;
  width: 300px;
  padding: 10px;
  margin: 5px;
  border: 2px solid #D9D9D9;
 ...