JSFiddle - React, Tailwind, and code Playground

by ruslyrossi

HTML

<link rel="stylesheet" href="https://www.lokalocal.com/assets/css/bootstrap.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700"></script>
<div class="col-lg-12 booking-form">



  <h1>Booking Information</h1>

  <form id="form-booking">
    <input type="hidden" name="_token" value="5OM61kSkaMP8n4gY2G9SG9od2Syr4OVpSz4hpVrT">
    <div class="row">
      <div class="col-lg-6">
        <div class="form-group">
          <label for="usr">First name*</label>
          <input type="text" class="form-control" id="name" name="name" value="John Doe" required="">
          <span class="error-form" id="error-name" style="display: none">
                        <strong>First name is required</strong>
                      </span>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="form-group">
          <label for="usr">Last name*</label>
          <input type="text" class="form-control" id="last_name" name="last_name" value="" required="">
          <span class="error-form" id="error-last_name" style="display: none;">
                        <strong>Last name is required</strong>
                      </span>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="usr">Email address*</label>
      <input type="text" class="form-control" id="email" name="email" value="[email protected]" required="">
      <span class="error-form" id="error-email" style="display: none">
                    <strong>Email address is required</strong>
                  </span>
    </div>

    <div class="form-group">
      <label for="usr">Mobile number*</label>
      <input type="text" class="form-control" id="phone" name="phone" value="012-345334532" required="">
      <span class="error-form" id="error-phone" style="display: none">
                    <strong>Mobile number is required</strong>
                  </span>
    </div>

    <div class="form-group">
    ...

CSS

.booking-form form input {
  padding: 18px;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.booking-form form select {
  -webkit-border-radius: 0;
  border-radius: 0;
  height: 39px;
}

.booking-form form input[type="submit"] {
  background-color: #F04675;
  width: 100%;
  padding: 10px;
  color: #fff;
  border: 1px solid #F04675;
  font-size: 17px;
  margin-bottom: 10px;
  border-radius: 0;
}

.booking-form form button.btn-apply {
  background: #F04675;
  border: 1px solid #F04675;
  width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  padding: 7px 30px;
}