JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="booking-form-wrapper">
  <form id="booking_form" action="" method="get">
    <div class="form-group">
      <label for="booking_name" class="form-label">Name<span>*</span></label>
      <input type="text" placeholder="Your Name" class="form-input" id="booking_name" name="name" required />
    </div>
    <div class="form-group">
      <label for="booking_email" class="form-label">Email<span>*</span></label>
      <input type="email" placeholder="Your Email" class="form-input" id="booking_email" name="email" required />
    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="booking_hire_start" class="form-label">Hire start date<span>*</span></label>
        <input type="date" class="form-input" id="booking_hire_start" name="start" required />
      </div>
      <div class="form-group">
        <label for="booking_hire_end" class="form-label">Hire end date<span>*</span></label>
        <input type="date" class="form-input" id="booking_hire_end" name="end" required />
      </div>
    </div>
    <input type="hidden" name="vehicle_id" value="" />
    <button type="submit" class="btn btn-red">Book now</button>
  </form>
</div>

<div class="cars">
  <div class="car-info" data-vehicle-id="62">

    <div class="model">
      <strong>VOLKSWAGEN</strong><br />
      MK7.5 GOLF GTI
    </div>

    <button class="btn btn-block btn-blue" data-action="booking-form">Click here to book</button>

  </div>
  <div class="car-info" data-vehicle-id="24">

    <div class="model">
      <strong>AUDI</strong><br />
      R8 V10 PLUS
    </div>

    <button class="btn btn-block btn-blue" data-action="booking-form">Click here to book</button>

  </div>
  <div class="car-info" data-vehicle-id="45">

    <div class="model">
      <strong>SEAT</strong><br />
      LEON 1P
    </div>

    <button class="btn btn-block btn-blue" data-action="booking-form">Click here to book</button>

  </div>
  <div class="car-info" data-vehicle-id="28">

    <div...

CSS

BODY {
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  padding: 15px;
  margin: 0;
}

*,
::after,
::before {
  box-sizing: border-box;
}

.form-label {
  display: block;
  margin-bottom: .5rem;
}

.form-label SPAN {
  color: red;
  margin-left: .125rem;
}

.form-input {
  display: block;
  width: 100%;
  height: calc(1.5rem + .75rem + 2px);
  padding: .25rem .5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: black;
  border: 1px solid grey;
  border-radius: .25rem;
  margin-bottom: 1rem;
}

.form-input::placeholder {
  color: silver;
}

.form-input[type="date"]::-webkit-datetime-edit {
  font-family: 'Helvetica', sans-serif;
  color: silver;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .form-group {
  position: relative;
  padding-right: 5px;
  padding-left: 5px;
  flex-basis: 0;
  flex-grow: 1;
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .25rem .5rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-blue {
  background-color: blue;
}

.btn-red {
  background-color: red;
}

.booking-form-wrapper {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  z-index: 100;
  justify-content: center;
}

.booking-form-wrapper FORM {
  display: block;
  width: 100%;
  max-width: 400px;
}

.cars {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

.cars > .car-info {
  position: relative;
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.cars > .car-info .model {
  margin: 0 0 .5rem 0;
  padding: 0;
}