JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/js/flat-ui.min.js"></script>
<form class="form form-horizontal">
  <div class="form-body">
    <h4 class="form-section">工作人员信息</h4>
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <label for="salesDepartment" class="col-md-3 control-label">营业部</label>
          <div class="col-md-9">
            <input type="input" class="form-control" id="salesDepartment" placeholder="">
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group">
          <label for="customeManager" class="col-md-3 control-label">客户经理</label>
          <div class="col-md-9">
            <input type="input" class="form-control" id="customerManager" placeholder="">
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="form-group">
          <label for="CoO" class="col-md-3 control-label">业务主管</label>
          <div class="col-md-9">
            <input type="input" class="form-control" id="CoO" placeholder="">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <label for="remark" class="col-md-1 control-label">备注</label>
          <div class="col-md-11">
            <textarea id="remark" rows="10" class="form-control"></textarea>
          </div>
        </div>
      </div>
    </div>
    <h4 class="form-section">车辆融资信息</h4>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="step1field0" class="col-md-4 control-label">经销商/4S店名称</label>
         ...

CSS

.form .form-section {
  margin: 30px 0px 30px 0px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e7ecf1;
}

.bg-green {
  background-color: #1abc9c!important;
}

JavaScript

// Checkboxes and Radio buttons
    $('[data-toggle="checkbox"]').radiocheck();
    $('[data-toggle="radio"]').radiocheck();