JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<article class="post">
    <header>
        <h3>Post Title's Shouldn't Be h3's</h3>
    </header>
    <section class="full-post">

<p>Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor. With gusto. We're also Santa Claus! Kif might!</p>
        <p>Hello Morbo, how's the family? Why am I sticky and naked? Did I miss something fun? I videotape every customer that comes in here, so that I may blackmail them later. Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase.</p><p>How much did you make me? These old Doomsday Devices are dangerously unstable. I'll rest easier not knowing where they are. You know, I was God once. It's toe-tappingly tragic!</p>
<p>Belligerent and numerous. I'll tell them you went down prying the wedding ring off his cold, dead finger. Interesting. No, wait, the other thing: tedious. Hey, what kinda party is this? There's no booze and only one hooker.</p>
<p>Moving along&hellip; I'm Santa Claus! No! I want to live! There are still too many things I don't own! No! The cat shelter's on to me. You can see how I lived before I met you. No argument here.</p>
    </section>
</article>

CSS

* { margin: 0; padding: 0; }

body { 
    max-width: 600px;
    width: 90%;
    margin: 0 auto; 
    font: 1em/1.5 sans-serif;
    color: #333;
}

h3 { 
    font: 1.5em/1em serif; font-weight: bold; color: #000; 
    background: #e5e5e5;
    background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
    padding: .5em;
    position: relative;
    text-shadow: 0 -1px 0 rgba(255,255,255,.25);
    margin-bottom: 1.5em;
    margin-left: -2em;
    box-shadow: inset -1px -1px rgba(0,0,0,.15), inset 1px 1px rgba(0,0,0,.15), 3px 4px 7px rgba(0,0,0,.1);
}

h3::after { 
    content:"";
    width: 0;
    height: 0;
    line-height: 0;
    border-left: 1em solid transparent;
    border-top: .75em solid #d9d9d9;
    bottom: -.75em;
    left: 0;
    position: absolute;
}

p { 
    margin-bottom: 1.5em;
}

p:first-child { 
    font-size: 1.25em; line-height: 1.2em; color: #222; }

.post { 
    background: #ddd;
    margin: 4.5em auto; 
    padding: 1.5em;
    box-shadow: inset -1px -1px rgba(0,0,0,.5), inset 1px 1px rgba(0,0,0,.5);
}