JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class="quote-rec-page">
            <div class = "quote-details">
                <label for = "section" class="Segment">Quote Details</label>    
            </div>
            <div class ="btn-toolbar">
                <button type="button">Edit</button>
                <button type="button">Delete</button>
                <button type="button">Create PDF</button>
                <button type="button">Email Quote</button>
                <button type="button">Start Sync</button>
            </div>
            <form>
                <div class ="quote-detail-section-left">
                    <div>
                        <label for="quoteNum" class ="field-label">Quote Number</label>
                        <input type="text" class="quote-input"  tabindex="1" id="quoteNumber"/>
                    </div>
                    <div>
                        <label for="quoteName" class ="field-label">Quote Name</label>
                        <input type="text" class="quote-input"  tabindex="2" id="quoteName"/>
                    </div>
                    <div>
                        <label for="oppName" class ="field-label">Opportunity Name</label>
                        <input type="text" class="quote-input"  tabindex="3" id="oppName"/>
                    </div>
                    <div>
                        <label for="accName" class ="field-label">Account Name</label>
                        <input type="text" class="quote-input"  tabindex="4" id="accName"/>
                    </div>
                </div>
                <div class ="quote-detail-section-right">
                    <div>
                        <label for="expDate" class ="field-label">Expiration Date</label>
                        <input type="date" class="quote-input"  tabindex="5" id="expDate"/>
                    </div>
                    <div>
                        <label for="sync" class ="field-label">Syncing</label>
                        <input type="checkbox"...

CSS

div.btn-toolbar{
  position:relative;
  top:100px;
  left:40%;
  width:400px;
}
div.quote-details{
  position:relative;
  top:122px;
  left:250px;
  font-weight:bold;
  font-size:15px;
}
div.quote-detail-section-left{
  float:left;
  margin-top : 145px;
  margin-left: 100px;
  width:35%;
}
input.quote-input{
  padding:4px;
}
label.field-label{
  float:left;
  font-weight:bold;
  display:inline-block;
  margin-left : 40px;
  width:50px;
  clear:both;
}
div.quote-detail-section-right{
  float:right;
  margin-top : 145px;
  margin-right: 80px;
  width:35%;
}