JSFiddle - React, Tailwind, and code Playground

by DustyWhite

HTML

<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.mysite.com/" target="_blank" class="special">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>&quot;CSS coding is endlessly fun. I have such a great time doing it.&quot;</p>
      <cite>DGMD student</cite>
    </blockquote>
    <blockquote>
      <p>&quot;I will be so glad when this assignment is over. &quot;</p>
      <cite>Another student</cite>
    </blockquote>
    <blockquote>
      <p>&quot;Do you really need so many classes and IDs after learning these cool selectors?&quot;</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 rhoncus sed, vulputate nec sem. Donec euismod, <strong>nisi vitae molestie</strong> pretium, nisi eros vehicula libero, nec <em>make me green and bold</em>.</p>
    <h2>Second Heading</h2>
    <p>Tempus id bibendum a, condimentum eu enim. Nam non nunc in leo tincidunt posuere....

CSS

/* In line 34 (starts “Tempus id bibendum a”), set the first letter of that paragraph to bold, 3em, and float it such that the text wraps around it. */

main p:nth-of-type(2):first-letter {
  font-weight: bold;
  font-size: 3em;
  float: left;

}

*/
/* For the months in the table, make them purple, not bold, and left-aligned. */

td~th {
  color: purple;
  font-weight: normal;
  text-align: left;
}




/* For all of the table cells, provide a small amount of space between the words and their container. In a second declaration, create a pink box with two lines going around the entire table. */

th,
td {
  padding: .5em;
}

table {
  border: double pink .5em;
}



/* On line 32, make the phrase "make me green and bold," green and bold. Do not use an nth-child or nth-of-type selector. */

strong+em {
  color: green;
  font-weight: bold;
}



/* For all links that go offsite EXCEPT the links in the navbar, indicate this with the phrase “(external link)” after each link. */

/* You may do this in no more than two declarations. */

a[ href^="https"]:after {
  content: " (external link)";
}

/* or . . . */

a[ href^="http"]:not(nav ul li a):after {
  content: " (external link)";
}



/* Make an orange line separate the header from the rest of the web page. Center the text in the header.
 */

header {
  text-align: center;
  border-bottom: 2px orange solid;

}



/* Make the words “give me a purple background” in line 83 (but no other text on the page) have a purple background and white text. */

main p:last-of-type>em {
  color: white;
  background-color: purple;
}



/* Using a single declaration block, set all elements to a sans-serif typeface, with dark grey text.

In a second declaration block, set all headings to a shade of blue and a monospace font. (Be sure to mention a system typeface as well as the generic.) */

body {
  font-family: sans-serif;
  color: rgba(0, 0, 0, .65);
}

h1,
h2 {
  color: blue;
  font-family: "Courier New", Courier, monospace;
}



/*...