JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head><!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Moment JS-->
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<!--Bootstrap js-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--bootstrap datetimepicker js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<!--bootstrap datetimepicker css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<!--bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="card-body">
<div class="card-title">Book an Appointment</div>
<div class="card-text">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" class="form-control" name="firstname" id="firstname">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Last Name</label>
<input type="text" class="form-control" name="lastname" id="lastname">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" class="form-control" name="email" id="email">
</div>
</div>
<div class='col-md-12'>
<div class="form-group">
<label class="control-label">Appointment...