JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Assignment 1</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>My Fine Web Page</h1>
<h2>An Exploration of CSS Selectors</h2>
</header>
<nav>
<ul>
<li><a href="http://www.google.com/" target="_blank">Home</a></li>
<li><a href="http://www.yahoo.com" target="_blank">About</a></li>
<li><a href="http://www.google.com/" target="_parent">Products</a></li>
<li><a href="http://www.yahoo.com" target="_parent">Services</a></li>
<li><a href="http://www.google.com/" target="_self">Contact</a></li>
</ul>
</nav>
<aside id="left">
<h2>What they're saying about us</h2>
<blockquote title="testimonials">
<p>"CSS coding is endlessly fun. I have such a great time doing it."</p>
<cite>DGMD student</cite>
</blockquote>
<blockquote>
<p>"I will be so glad when this assignment is over. "</p>
<cite>Another student</cite>
</blockquote>
<blockquote>
<p>"Do you really need so many classes and IDs after learning these cool selectors?"</p>
<cite>Jen Kramer</cite>
</blockquote>
</aside>
<main>
<h2>First Heading</h2>
<p><em>Lorem ipsum dolor sit amet</em>, consectetur adipiscing elit. <strong class="featured">Donec a feugiat mi.</strong> In sagittis congue blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <a href="pdffile.pdf">Integer massa massa</a>, facilisis auctor ultricies non, convallis sed massa. Duis iaculis dignissim nisi id pretium. Mauris orci turpis, interdum quis condimentum at, mattis non mauris. Vestibulum faucibus lectus sit amet velit venenatis sed ultricies lectus ullamcorper. Maecenas lectus arcu, venenatis mattis...
CSS
* {
font-family: 'Open Sans', sans-serif;
color: #545454;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Consolas', sans-serif;
color: #5585fc;
}
main > p+h2:nth-child(2) {
color: red;
}