JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<p><label for="date">DATE OF BIRTH</label><br /></p>
<div class="form-group">
  <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
    <input type="text" tabindex="4" placeholder="dd/mm/yyyy" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

JavaScript

$('#datetimepicker1').datetimepicker({
  useCurrent: true,
  format: 'DD/MM/YYYY',
  viewMode: 'decades',
  autoclose: true,
  defaultDate: new Date(0)
});
$('#datetimepicker1 input').mask("99/99/9999",{placeholder:"dd/mm/yyyy"});