JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Printable div (or you can just use any element) -->
<h1>This will not print!<h1>
<div id="printable">
    <style>h2{text-align: center;}</style>
    <h2>This will<br />print</h2>
</div>

<!-- Print link -->
<a id="printmodal" href="#">Print Me</a>

<!-- Modal div (intially hidden) -->
<div id="modal">
    <iframe id="printframe" />  
</div>

CSS

#modal {
    display: none;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 100px;
}
h1, h2 {
    text-align: center;
}

JavaScript

$(document).ready(function(){
    $('#printmodal').click(function(){
        
        // variables
        var contents = $('#printable').html();
        var frame = $('#printframe')[0].contentWindow.document;
        
        // show the modal div
        $('#modal').css({'display':'block'});
        
        // open the frame document and add the contents
        frame.open();
        frame.write(contents);
        frame.close();
        
        // print just the modal div
        $('#printframe')[0].contentWindow.print();
    });
});