JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<nav>
  <ul>
  <li><a href="http://www.google.com" target="_blank">Link 1</a></li>
  </ul>
</nav>
<div class='headers text-blue'>
  <h1>
    Header
  </h1>
  <h2>
    Sub Header<i>[x]</i>
  </h2>
  <h3>
    Tertiary Header
  </h3>
</div>
<p>
  Hello there, this is a paragraph of text.
</p>
Hello, this is another paragraph of text with no container.
<hr />
<table border="10">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Test</td>
  </tr>
</table>
<img width="200" height="100" src="https://static.standard.co.uk/s3fs-public/thumbnails/image/2017/08/15/12/smileyfaceemoji1508a.jpg">

CSS

.headers {
  text-align: center;
}

.headers h1, .headers h2, .headers h3 {
  text-decoration: underline;
  display: block;
  margin: 0px auto;
  border: solid 1px #000000;
  padding: 3px;
  border-radius: 6px;
}

.headers h1:hover, .headers h2:hover, .headers h3:hover {
  background-color: rgba(0,0,0, .3);
  cursor: pointer;
}

.text-red {
  background-color: #00ff00;
}
.text-red h1 {
  color: #ff0000;
}

.text-red h2 {
  color: #aa0000;
}

.text-red h3 {
  color: #552200;
}

.text-blue h1 {
  color: #0000ff;
}

.text-blue h2 {
  color: #0000aa;
}

.text-blue h3 {
  color: #002255;
}

JavaScript

function headerClicked(whichHeader) {
	console.log(whichHeader);
	alert("You clicked header: " + whichHeader);
}

$(function() {
	$(document).on("click", "h1", function(e) {
  	headerClicked($(this).text());
  });
  	$(document).on("click", "h2", function(e) {
  	headerClicked($(this).html());
  });
  	$(document).on("click", "h3", function(e) {
  	headerClicked($(this).html());
  });
});