JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<p>It has been said (too many times, perhaps) that a picture is worth a thousand words; actually, sometimes images are even more valuable than that, and can be worth a googleplex of words (depending on the picture, and depending on the words, of course).</p>

<p>Consider the difference in impact between this short list of books:</p>

<ul>
<li><cite>Cow County Chip</cite> by T.R. "Ticket Ted" Shannon</li>
<li><cite>Autobiography of Mark Twain, Volume II</cite> by Samuel Langhorne Clemens</li>
<li><cite>Still Casting Shadows</cite> by B. Clay Shannon</li>
</ul>

<p>...and this one, which adds corresponding images:</p>

<ul>
<li><cite>Cow County Chip</cite> by T.R. "Ticket Ted" Shannon</li>
<a href="http://www.amazon.com/exec/obidos/ASIN/1481708139/garrphotgall-20" target="_blank"><img width="108" height="144" src="http://ecx.images-amazon.com/images/I/41lP80NwgqL._SL160_.jpg" /></a>
<li><cite>Autobiography of Mark Twain, Volume II</cite> by Samuel Langhorne Clemens</li>
<a href="http://www.amazon.com/exec/obidos/ASIN/B00DCCQEBW/garrphotgall-20" target="_blank"><img width="108" height="144" src="http://ecx.images-amazon.com/images/I/51WYQ9ZeYJL._SL160_.jpg" /></a>
<li><cite>Still Casting Shadows</cite> by B. Clay Shannon</li>
<a href="http://www.amazon.com/exec/obidos/ASIN/B0010APQBM/garrphotgall-20" target="_blank"><img width="108" height="144" src="http://ecx.images-amazon.com/images/I/510YtCn4odL._SL160_.jpg" /></a>
</ul>

<p>The latter is much more impressive, right? So it's really the combination of words and pictures that has the greatest impact. So how can you add image links like that to your HTML? Easy!</p>

<p>Just use one of these as a template:</p>

<p>For books and movies:</p>
<p>&lt;a href="http://www.amazon.com/exec/obidos/ASIN/~/garrphotgall-20" target="_blank"&gt;&lt;img width="108" height="144" src="http://ecx.images-amazon.com/images/I/~._SL160_.jpg" /&gt;&lt;/a&gt;
</p>

<p>For recordings (MP3s, CDs):</p>
<p>&lt;a...