JSFiddle - React, Tailwind, and code Playground

by Ken Sprague

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Some Book Suggestions from David</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="books.css" />
  </head>

  <body>
    <h1>Some Book Suggestions from David</h1>
    <ul class="booklist">
      <li class="book">
        <ul>
          <li class="bookcover">
            <a href="http://www.amazon.com/Web-Everyone-Designing-Accessible-Experiences/dp/1933820977%3FSubscriptionId%3D0G0R5XVDGE4W4B763702%26tag%3Dassociatetag%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1933820977">
                     <img src="http://ecx.images-amazon.com/images/I/41hCew7MqzL._SL160_.jpg"
                          alt="Book Cover for A Web for Everyone: Designing Accessible User Experiences"/>
                  </a>
          </li>
          <li class="author">Sarah Horton and Whitney Quesenbery</li>
          <li class="title">
            <a href="http://www.amazon.com/Web-Everyone-Designing-Accessible-Experiences/dp/1933820977%3FSubscriptionId%3D0G0R5XVDGE4W4B763702%26tag%3Dassociatetag%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1933820977">A Web for Everyone: Designing Accessible User Experiences</a>
          </li>
          <li class="publisher">Rosenfeld Media</li>
          <li class="date">January 2014</li>
          <li class="isbn">ISBN: 1933820977</li>
        </ul>

      </li>
      <li class="book">
        <ul>
          <li class="bookcover">
            <a href="http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/1491918055%3FSubscriptionId%3D0G0R5XVDGE4W4B763702%26tag%3Dassociatetag%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1491918055">
                     <img src="http://ecx.images-amazon.com/images/I/41n%2BtLM%2BxnL._SL160_.jpg"
                          alt="Book Cover for CSS: The Missing Manual"/>
                  </a>
          </li>
          <li class="author">David Sawyer McFarland</li>
       ...

CSS

body {
  background-color: lime;
  font-family: "arial", "arial black", "verdana";
}

h1 {
  margin-left: 10%;
  margin-right: 10%;
  padding: .25em;
  background-color: white;
  text-align: center;
  font-size: 2em;
  color: orange;
  border-width: thick;
  border-style: solid;
  border-color: orange;
}

ul {
  list-style-type: none;
}

.book {
  margin-left: 10%;
  margin-right: 10%;
  clear: right;
  text-align: left;
  background: white;
  padding: 1.5em;
  margin: 2.5em;
  border-width: medium;
  border-style: solid;
  border-color: orange;
  overflow: auto;
}

.book img {
  float: right;
  border: thin solid orange;
  padding: 1em;
}

.author {
  font-size: 1em;
  font-weight: bolder;
  font-style: italic;
  color: orange;
}

.title {
  font-size: 1em;
}

a:link {
  text-decoration: none;
  color: blue;
  background-color: white;
}

a:visited {
  text-decoration: underline;
  color: crimson;
  background-color: #ccc;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: blue;
}

a:active {
  text-decoration: underline;
  color: crimson;
  background-color: white;
}

.publisher {
  font-size: 1em;
  font-variant: small-caps;
  color: black;
  padding-top: 0em;
  padding-right: 0em;
  padding-bottom: 1em;
  padding-left: 0em;
}

.date,
.isbn {
  font-size: .80em;
  font-weight: bold;
  color: black;
}