JSFiddle - React, Tailwind, and code Playground

by graaj

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <div id="todo">
  <p>
    <h3>
    Add New ToDo
    </h3>
    
 

        <div class="form-group">
          <div class="col-xs-4">
            <input type="text" class="form-control" placeholder="Add New ToDo Item">
            <button id="id-button" type="submit" class="btn btn-primary">
            Submit
            </button> 
          </div>
        </div>
 </div>

CSS

#todo {
    align-items: center;
    text-align: center;

}
#todo .form-group {
    align-items: center;
    margin: auto;
    

}

#id-button {
    margin: 10px;
}