JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle"><img src="https://dcnetworks.ie/wp/wp-content/uploads/2017/11/placeholder-logo-2-300x167.png" style="width: 300px;"/></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="font-size: 35px;">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h2>Lorem lorem lorem <br />
                   Ipum ipsum</h2>
            </div>
            <div class="modal-footer popup-buttons-wrap">
                <button type="button" class="btn visit-button"><h3>Visit Site</h3></button>
                <button type="button" class="btn close-button" data-dismiss="modal"><h3>Close</h3></button>
            </div>
        </div>
    </div>
</div>

CSS

.modal-title{
        text-align: center;
    }
    .modal-content{
        background-color: #063242;
        height: 500px;
        width: 750px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .modal-body{
        text-align: center;
        color: #fff;
        display: flex;
        justify-content: center;
    }
    .modal-body h2{
        width: 60%;
        border-left: 3px solid #E52149;
        border-right: 3px solid #ADD13D;
        font-weight: 400;
    }
    .modal-header{
        border-bottom: 0;
    }
    .modal-footer{
        border-top: 0;
        text-align: center;
    }
    .modal-header .close{
        color: #fff;
        position: absolute;
        top: 25px;
        right: 25px;
    }
    .visit-button{
        border: 3px solid #E52149;
        background-color: transparent;
        margin-right: 55px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .visit-button h3{
        margin: 0;
        color: #fff;
        font-weight: 400;
        padding: 3px;
    }
    .visit-button:hover{
        background-color: #E52149;
        color: #fff;
    }
    .close-button{
        border: 3px solid #ADD13D;
        background-color: transparent;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .close-button h3{
        margin: 0;
        color: #fff;
        font-weight: 400;
        padding: 3px;
    }
    .close-button:hover{
        background-color: #ADD13D;
        color: #fff;
    }