JSFiddle - React, Tailwind, and code Playground

by ryan Couch

HTML

<link rel="stylesheet" href="http://flydesignchicago.com/bnsf/css/styles.css">
<div class="content">
  <p class="medium semibold text">Add Contact</p>
  <div class="ui two column grid form">
    
    <div class="column">
      <div class="field super-label"><input type="text" name="" placeholder="First Name*"></div>
      <div class="field super-label"><input type="text" name="" placeholder="Last Name*"></div>
      <div class="field super-label"><input type="text" name="" placeholder="Company Name*"></div>
      <div class="field super-label"><input type="text" name="address" placeholder="Address*"></div>
      <div class="field super-label optional"><input type="text" name="address-2" placeholder="Address 2"></div>
      <div class="fields tight">
        <div class="super-label four wide field"><input type="text" name="zip" placeholder="ZIP*"></div>
        <div class="super-label twelve wide field"><input type="text" name="city" placeholder="City*"></div>
      </div>
      <div class="fields tight">
        <div class="field super-label eight wide">
          <select class="ui fluid selection dropdown" name="state">
            <option value="">State*</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option...

CSS

#wrapper {
}

#wrapper-inner {
}

#loading {
}

.crm-springboard {
}

.screen.active {
}

.ui.segment {
}

.crm-contacts {
}

.ui.segment.mt-0 {
}

.text-right {
}

.ui.button.primary {
}

.fas.fa-plus {
}

.semibold.mt-0.mb-10 {
}

.ui.form {
}

.field.super-label {
}

.ui.fluid.search.dropdown.form-control {
}

.mb-24 {
}

.pinnable {
}

.pin {
}

.fas.fa-thumbtack {
}

.title {
}

.action {
}

.fas.fa-ellipsis-h {
}

.unpinned.pin {
}

.screen {
}

.ui.segment.p-0 {
}

.left.schema {
}

.ui.very.padded.striped.midnight.borderless.no.border-radius.compact.table {
}

.text-center.px-5 {
}

.ui.checkbox {
}

.sortable.three.wide {
}

.sort {
}

.sortable {
}

.sortable.two.wide {
}

.sortable.four.wide {
}

.px-0 {
}

.ui.large.modal {
}

.content {
}

.medium.semibold.text {
}

.ui.two.column.grid.form {
}

.column {
}

.field {
}

.marker {
}

.dots {
}

.active {
}

.fields.tight.vertical-center {
}

.super-label.fourteen.wide.field {
}

.two.wide.field.text-center {
}

.fas.fa-plus-circle.fa-lg.color-cobalt {
}

.actions {
}

.ui.cancel.button {
}

.ui.approve.primary.button {
}

.field.super-label.optional {
}

.fields.tight {
}

.super-label.four.wide.field {
}

.super-label.twelve.wide.field {
}

.field.super-label.eight.wide {
}

.ui.fluid.selection.dropdown {
}

.super-label.eight.wide.field {
}

.ui.fluid.search.selection.dropdown {
}

.ui.icon.only.primary.button {
}

.fas.fa-plus-circle.fa-lg {
}

.crm-companies {
}

.ui.grid {
}

.stretched.row {
}

.four.wide.column {
}

.text-center.mb-20 {
}

.large.text {
}

.small.text.mb-10 {
}

.color-cobalt {
}

.fas.fa-star {
}

.medium.text {
}

.small.text {
}

.small.text.mb-14 {
}

.ui.tangerine.label.ml-10 {
}

.pl-20 {
}

.medium.text.mb-7 {
}

. {
}

.ui.large.cobalt.label {
}

.icon.close.color-white {
}

.ui.open.left.positioned.upper.right.overflow.dropdown.button {
}

.fas.fa-ellipsis-v.fa-lg {
}

.menu {
}

.item {
}

.twelve.wide.column {
}

.ui.segment.p-0.mt-0 {
}

.ui.buttons.lite.mb-0.px-20...