JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Modal for delete user -->
  <div class="modal fade" id="modal-delete-user" tabindex="-1" role="dialog" aria-labelledby="modal-delete-user" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="modal-delete-user-title">Are you sure?</h4>
        </div>
        <div class="modal-body">
          <p>Username “Danne” will be deleted.</p>
          <p>Type DELETE to confirm.</p>
          <div class="form-group">
            <input type="text" class="form-control" id="type-delete" autofocus=""/>
          </div>
          <button type="button" class="btn btn-danger btn-block">CONFIRM</button>
          <button type="button" class="btn btn-default btn-xs btn-block" data-dismiss="modal">Take me back</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal for delete user -->


<div class="form-group">
                <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#modal-delete-user"><i class="glyphicon glyphicon-trash text-warning"></i> Delete</button>
              </div>

JavaScript

$(document).ready(function() {

//  focus input on modal user delete open
//  $('#modal-delete-user').on('shown.bs.modal', function(e) {
//    $('#type-delete').focus();
//  })
    
});