JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">

  <div class="row justify-content-center align-items-center">
    <div class="form-group col-md-4">
      <form method="post" th:object="${redirectionDto}">

        <div class="form-group">
          <label for="urlinput">URL</label>
          <input type="text" id="urlinput" class="form-control" th:field="*{url}" name="urlinput" maxlength="255" />
        </div>

        <div class="form-group">
          <label for="date">Date:</label>
          <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
            <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" th:field="*{expireDate}" id="date" placeholder="Date" />
            <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
              <div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
            </div>
          </div>
        </div>

        <button class="btn btn-primary" type="submit">Submit form</button>
      </form>
    </div>
  </div>
</div>

CSS

.container .row {
  height: 100vh;
}