JSFiddle - React, Tailwind, and code Playground

by santosonit

HTML

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<div class="row flex-nowrap d-flex align-items-center">
  <div style="width: 37%" class="form-group col-sm col-md-3"><select class="form-control" id="taskList" placeholder="Pick a task">
      <option value=""></option>
      <option value="review and approve on page recommendations">Review and approve</option>
      <option value="review and approve technical seo recommendations">Review</option>
    </select></div>
  <div style="width: 15%" class="form-group col-sm col-md-2"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
  <div style="width: 10%" class="form-group col-sm col-md-2"><input type="link" class="form-control" placeholder="Paste a link"></div>
  <div style="width: 32%" class="form-group col-sm col-md-3"><input type="text" class="form-control" placeholder="Notes"></div>
  <div style="width: 7%" class="form-group col-sm col-md-1"><button id="addTask" type="submit"...