JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button>

<div id="table"></div>


<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">  
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ex ligula, egestas ac purus in, mattis maximus tellus. Sed turpis purus, consectetur id pulvinar ac, fermentum vel tellus. Pellentesque in libero mi. Maecenas auctor lobortis purus, eu viverra nibh maximus eu. Sed maximus eget nisi a tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum eu sapien bibendum, suscipit eros a, placerat eros. Nunc nec quam eu quam porttitor auctor nec nec lectus. Mauris molestie arcu urna, eu rutrum odio bibendum eget. Suspendisse id libero erat. Mauris mollis, nibh eget tincidunt efficitur, leo lacus laoreet ante, quis rutrum turpis massa non dolor. Vestibulum luctus congue massa, id tempor odio accumsan in. Etiam nisi ex, pharetra nec sollicitudin eget, rhoncus eu massa. Curabitur sagittis euismod lacus, finibus vulputate nisi. Phasellus dapibus nunc id neque commodo posuere nec nec leo.</p>
    </div>
  </div>
</div>

CSS

#table{
  border: solid 1px red;
  height: 500px;
  width: 500px;
  
}


.modal-dialog {
  position:fixed;
  top:auto;
  right:auto;
  left:auto;
  bottom:0;
  
}