JSFiddle - React, Tailwind, and code Playground

by adamh

HTML

<h1>Page Title</h1>
<p>Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo <span>dignissim</span> congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In.</p>
<h2>Section heading</h2>
<p>Proin metus odio, aliquam eget molestie nec, gravida ut sapien. <a href="#">Phasellus quis</a> est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla.</p>
<img src="http://placehold.it/140x100/37c/eee" />
<pre>
p {
    margin: 1em 0;
}
</pre>

CSS

body {
    font-family: Helvetica, Arial;
    font-size: 14px;
    line-height: 1.6em;
    background: #f0f0f0;
    color: #000;
}

h1 {
    font-size: 24px;
    font-weight: bold;
    margin: 1em 0;
    text-shadow: #fff 1px 1px 0;
    color: #484848;
}

h2 {
    font-size: 21px;
    margin: 1em 0;
    text-shadow: #fff 1px 1px 0;
    color: #484848;
}

p {
    margin: 1em 0;
}

span {
    background: #fc0;
    padding: 2px 4px;
    border-radius: 2px;
}

img {
    margin: 1em 0;
    background: white;
    padding: 8px;
    box-shadow: #999 0 0 5px;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    border-radius: 2px;
    padding: 2px 4px;
    color: white;
    white-space: nowrap;
}

a:link {
    background: #37c;
}

a:visited {
    background: purple;
}

a:hover {
    background: navy;
}

a:active {
    background: red;
}

pre {
    background: white;
    padding: 10px;
    border: 1px solid #ddd;
}