JSFiddle - React, Tailwind, and code Playground

HTML

<button id="checkout">checkout</button>
<!-- Modal -->
<div class="modal fade" id="cartMessage" tabindex="-1" role="dialog" aria-labelledby="cartMessageLabel">
    <div class="modal-dialog" role="document">
        <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="cartMessageLabel">Minimum Order Requirements Not Met</h4>

            </div>
            <div class="modal-body">The minimum order quantity is:
                <ul>
                    <li>3 Cases of Beer</li>
                    <li>6 Bottles of Wine</li>
                    <li>6 Bottles of Spirits.</li>
                </ul>Please add more to your shopping cart before checking out</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JavaScript

$('#checkout').on('click', function (evt) {
    var total = 5
    if (total < 6) {
        $('#cartMessage').modal()
        evt.preventDefault();
    }
});