JSFiddle - React, Tailwind, and code Playground
by AnnMariePrice
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some Book Suggestions from David</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="books.css"/>
</head>
<body>
<h1>Some Book Suggestions from David</h1>
<ul class="booklist">
<li class="book">
<ul>
<li class="bookcover">
<a href="https://www.amazon.com/Web-Everyone-Designing-Accessible-Experiences/dp/1933820977">
<img src="https://books.google.com/books/content?id=Dno3DwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
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="https://www.amazon.com/Web-Everyone-Designing-Accessible-Experiences/dp/1933820977">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="https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515">
<img src="https://books.google.com/books/content?id=qahpAgAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
alt="Book Cover for Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) (Voices That Matter)"/>
</a>
</li>
<li class="author">Steve Krug</li>
<li class="title">
<a href="https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515">Don't...
CSS
body {
background-color: silver;
font-family: "georgia";
}
h1 {
text-align: center;
}
.date, .isbn {
font-size: .8em;
}
.publisher{
font-variant: small-caps;
}
.date{
padding-top: 25px
}
.author {
font-style: italic;
color: crimson;
}
a:link {
color: blue;
text-decoration: none
}
a:hover {
color: blue;
text-decoration: underline;
}
a:visited {
color: purple;
text-decoration: none
}
a:active {
color: red;
text-decoration: underline;
}
h1 {
border-style: solid;
background-color: white;
}
ul {
list-style: none;
}
.book {
border-style: solid;
background-color: white;
padding: 25px;
margin: 25px;
overflow: auto;
}
.bookcover {
float: right;
}