JSFiddle - React, Tailwind, and code Playground

HTML

<title>FAQs</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="faqs.js"></script>   	

</head>

<body>
	<section id="faqs">
		<h1>jQuery FAQs</h1>
		<h2><a href="#" id="first_link">What is jQuery?</a></h2>
		<div>
			<p>jQuery is a library of the JavaScript functions that you're most likely 
			   to need as you develop web sites.
			</p>
		</div>
		<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
		<div>
			<p>Three reasons:</p>
			<ul>
				<li>It's free.</li>
				<li>It lets you get more done in less time.</li>
				<li>All of its functions are cross-browser compatible.</li>
			</ul>
		</div>
		<h2><a href="#">Which is harder to learn: jQuery or JavaScript?</a></h2>
		<div>
			<p>For most functions, jQuery is significantly easier to learn 
			    and use than JavaScript. But remember that jQuery is JavaScript.
			</p>
		</div>
	</section>
</body>

CSS

/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	border: 3px solid blue;
}
section {
	padding: 15px 25px;
}
h1 { 
	font-size: 150%;
}
h2 {
	font-size: 120%;
	padding: .25em 0 .25em 25px;
	cursor: pointer;
	background: url(images/plus.png) no-repeat left center;
}
h2.minus {
	background: url(images/minus.png) no-repeat left center;
}
a {
	color: black;
	text-decoration: none;
}
h2:hover {background-color: #ccccff;}
a:focus, a:hover {
	color: blue;
}
div {
	display: none;
}
div.open {
	display: block;
}
ul {
	padding-left: 45px;
}
li {
	padding-bottom: .25em;
}
p {
	padding-bottom: .25em;
	padding-left: 25px;
}

JavaScript

h2.addEventListener("click", function() { alert("alert");});