JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
        <div class="container">
            <h2>Modal</h2>
            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Unidade</button>
            <input type="text" class="form-control unidade-input" name="unidade">
            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <label class="modal-title">Unidade</label>

                        </div>
                        <div class="modal-body">
                            <table class='table'>
                            <tr><td>L1 C1</td><td>L1 C2</td></tr>
                            <tr><td>L2 C1</td><td>L2 C2</td></tr>
                            <tr><td>L3 C1</td><td>L3 C2</td></tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </body>

CSS

.modal .modal-dialog { width: 50%; } a