JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="header">
<h1>THE BODAK</h1>
</div>


<ul>
  <li><a href="history.php">Back</a></li>
  <li><a href="#" class="link" id="link" >Anthony</a></li>
  <li><a href="#" class="link2" id="link2" >Ben</a></li>
  <li><a href="#" class="link3" id="link3" >Jacob</a></li>
  <li><a href="#" class="link4" id="link4" >Jesse</a></li>
  <li><a href="#" class="link5" id="link5" >Karmar</a></li>
  <li><a href="#" class="link6" id="link6" >Mitchell</a></li>
</ul>
<br>
<br>
<br>
<br>


	<h2>Anthony</h2>
	<div id="anthony" style="word-wrap: break-word; width: 100%" >Alias: Lysander Lucretius II</div></TD>
	<br>
	<div id="anthony2" style="word-wrap: break-word; width: 100%" >A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.</div></TD>
	<br>

</body>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #457585;
	margin-left: -1%;
	float:left;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #555;
    color: white;
}

#header {
	float:left;
	
	min-width:100.4%;
	background:#26596A;
    text-align:center;
    padding:5px;
	margin-top: -10px;
	margin-left: -10px;
}
#dice {
    line-height:30px;
    background-color:#457585;
    height:100%;
    width:10%;
    float:right;
    padding:5px; 
	margin-right: -0.4%;
	text-align:center;
	
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:100%;
    width:10%;
    float:right;
    padding:0; 
	text-align:center;
	margin-right: -7px;
}
#section {
    width:350px;
    padding:10px; 
	float:left;
}
html {
	height: 100%;
}
body {
    background-color:#6C929F;
	height: 80%;
}

JavaScript

$('li').click(function(){
$('h2').text($(this).find('a').text());
});