JSFiddle - React, Tailwind, and code Playground

by yuzhou0602

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<form method="get" class="form-inline" action="#">

  <label for="date_start" class="mr-2 float-left">From</label>
  <div class="input-group date mr-5" id="dateStart" data-target-input="nearest">
    <div class="input-group-append" data-target="#dateStart" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
    </div>
    <input type="text" name="dateStart" value="2020-03-17" class="form-control datetimepicker-input" data-target="#dateStart" autocomplete="off">
  </div>

  <label for="date_end" class="mr-2 float-left">To</label>
  <div class="input-group date mr-5" id="dateEnd" data-target-input="nearest">
    <div class="input-group-append" data-target="#dateEnd" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></div>
    </div>
    <input type="text" name="dateEnd" value="2020-03-24" class="form-control datetimepicker-input" data-target="#dateEnd" autocomplete="off">
  </div>

  <button class="btn btn-primary btn-md-top-pad">View Notifications <i class="fas fa-chevron-right" aria-hidden="true"></i></button>

</form>