JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Print Part of a Page With jQuery</title>
    </head>
    <body>
     
    <h1>
    Print Part of a Page With jQuery
    </h1>
     
    <p>
    <a>Print Bio</a>
    </p>
     
    <div class="printable">
     
    <h2>
    Jen Rish
    </h2>
     
    <p>
    Jen Rish, upcoming fitness and figure model has some
    crazy developed legs!
    </p>
     
    <p>
    <img
    src="jen_rish_crazy_legs.jpg"
    width="380"
    height="570"
    alt="Jen Rish Has Amazing Legs!"
    />
    </p>
     
    <p>
    I bet she does some <strong>serious squatting</strong>!
    </p>
     
    </div>
     
    </body>
    </html>

CSS

body {
    font-family: verdana ;
    font-size: 14px ;
    }
     
    h1 {
    font-size: 180% ;
    }
     
    h2 {
    border-bottom: 1px solid #999999 ;
    }
     
    .printable {
    border: 1px dotted #CCCCCC ;
    padding: 10px 10px 10px 10px ;
    }
     
    img {
    background-color: #E0E0E0 ;
    border: 1px solid #666666 ;
    padding: 5px 5px 5px 5px ;
    }
     
    a {
    color: red ;
    }

JavaScript

// Create a jquery plugin that prints the given element.
    jQuery.fn.print = function(){
    // NOTE: We are trimming the jQuery collection down to the
    // first element in the collection.
    if (this.size() > 1){
    this.eq( 0 ).print();
    return;
    } else if (!this.size()){
    return;
    }
     
    // ASSERT: At this point, we know that the current jQuery
    // collection (as defined by THIS), contains only one
    // printable element.
     
    // Create a random name for the print frame.
    var strFrameName = ("printer-" + (new Date()).getTime());
     
    // Create an iFrame with the new name.
    var jFrame = $( "<iframe name='" + strFrameName + "'>" );
     
    // Hide the frame (sort of) and attach to the body.
    jFrame
    .css( "width", "1px" )
    .css( "height", "1px" )
    .css( "position", "absolute" )
    .css( "left", "-9999px" )
    .appendTo( $( "body:first" ) )
    ;
     
    // Get a FRAMES reference to the new frame.
    var objFrame = window.frames[ strFrameName ];
     
    // Get a reference to the DOM in the new frame.
    var objDoc = objFrame.document;
     
    // Grab all the style tags and copy to the new
    // document so that we capture look and feel of
    // the current document.
     
    // Create a temp document DIV to hold the style tags.
    // This is the only way I could find to get the style
    // tags into IE.
    var jStyleDiv = $( "<div>" ).append(
    $( "style" ).clone()
    );
     
    // Write the HTML for the document. In this, we will
    // write out the HTML of the current element.
    objDoc.open();
    objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
    objDoc.write( "<html>" );
    objDoc.write( "<body>" );
    objDoc.write( "<head>" );
    objDoc.write( "<title>" );
    objDoc.write( document.title );
    objDoc.write( "</title>" );
    objDoc.write( jStyleDiv.html() );
    objDoc.write(...