JSFiddle - React, Tailwind, and code Playground

HTML

<code><pre>||~3~Title that spans three columns~3~||
||**Name**|
|**Description**|
|**Date**||
||Bacon|
|Bacon is a type of cured meat made from unicorn trees harvested in the [South Pacific](http://en.wikipedia.org/bacon_island)|
|4/10/2013||
||`3`Beat`3`|
|To strike: I beat my neighbor's meat until it was tender enough to put in my mouth.|
|4/11/2013||
||Exhausted: I'm beat, I had to carry boxes of cured South Pacifc meat by-products at work all day.|
|4/12/2013||
||To win: I finally beat Minecraft on hard mode, the final boss fight had too many quick time events.|
|4/13/2013||

[which kitten is better](http://kittenwars.com)</code></pre>
    
<table><tr>
<td colspan="3">Title that spans three columns</td>
</tr><tr>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr><tr>
<td>Bacon</td>
<td>Bacon is a type of cured meat made from unicorn trees harvested in the <a href="http://en.wikipedia.org/bacon_island">South Pacific</a></td>
<td>4/10/2013</td>
</tr><tr>
<td rowspan="3">Beat</td>
<td>To strike: I beat my neighbor's meat until it was tender enough to put in my mouth.</td>
<td>4/11/2013</td>
</tr><tr>
<td>Exhausted: I'm beat, I had to carry boxes of cured South Pacifc meat by-products at work all day.</td>
<td>4/12/2013</td>
</tr><tr>
<td>To win: I finally beat Minecraft on hard mode, the final boss fight had too many quick time events.</td>
<td>4/13/2013</td>
</tr></table>

<a href="http://kittenwars.com">which kitten is better</a>

CSS

table{margin-bottom:10px;}
table tr td, table tr th {border:1px solid #CCC;font-family:sans-serif;}
table tr:first-of-type td {text-align:center;font-size:1.5em;font-weight:bold;}
table tr td:first-of-type {vertical-align:top;}
a{font-family:sans-serif;}
pre{border:1px solid #000;padding:2px;overflow:scroll;width:100%;}