JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Pre- and Post Travel Form Help</h1>

<div id="postTravel" name="postTravel">
     <h2 id="ptVerbiage">1 Post Travel</h2>

    <img id="imgPostTravel" name="imgPostTravel" src="/_layouts/images/TravelFormHelp/posttravelpdf.png" alt="post Travel image" height="275" width="350">
</div>
<button id="btnHide">Hide the Post Travel label above</button>
    <button id="btnOn">On click handler</button>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: Candara, Calibri, serif;
    max-width: 75%;
    margin: auto;
    background-color: lightyellow;
    line-height: 1;
}
h1 {
    font-family: Baskerville, 'Palatino Linotype', Verdana, sans-serif;
    color: dodgerblue;
    text-shadow: -4px 4px 3px rgba(0, 0, 0, .5);
    font-size: 3em;
}
img {
    border-width: 12px;
    border-color: navy;
}
.hide {
    visibility: hidden;
    display: none;
}
.topleftimage {
    width: 610px;
    height: 460px;
}
.toprightimage {
    width: 37.5%;
    height: 460px;
}
.centerimage {
    width: 95%;
    height: 95%;
}
.bottomimage {
    width: 95%;
    height: 95%;
}
.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
}

JavaScript

$('#btnHide').click(function() {
    alert('you mashed the button');
});

$( "#btnOn" ).on( "click", function() {
  alert('you mashed the on click button');
});
$( "#ptVerbiage" ).hover(function() {
    console.log('in');
    $(this).text('yep!');
  }, function() {
    console.log("out");
    $(this).text('nope!');
  });