JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="content" role="main">
    <div class="prev">&#8593;</div>
    <div class="next">next</div>
            
                        <nav id="nav-above">
            <h3 class="assistive-text">Post navigation</h3>
            <div class="nav-previous"><a href="http://twentyelevendemo.wordpress.com/page/2/"><span class="meta-nav">←</span> Older posts</a></div>
            <div class="nav-next"></div>
        </nav><!-- #nav-above -->
    
                                
                    
    <article id="post-29" class="post-29 post type-post status-publish format-standard sticky hentry category-uncategorized">
        <header class="entry-header">
                            <hgroup>
                    <h2 class="entry-title"><a href="http://twentyelevendemo.wordpress.com/2011/05/04/featured-posts-in-twenty-eleven/" title="Permalink to Featured Posts in Twenty&nbsp;Eleven" rel="bookmark">Featured Posts in Twenty&nbsp;Eleven</a></h2>
                    <h3 class="entry-format">Featured</h3>
                </hgroup>
            
                        <div class="entry-meta">
                <span class="sep">Posted on </span><a href="http://twentyelevendemo.wordpress.com/2011/05/04/featured-posts-in-twenty-eleven/" title="3:23 pm" rel="bookmark"><time class="entry-date" datetime="2011-05-04T15:23:31+00:00" pubdate="">May 4, 2011</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="http://twentyelevendemo.wordpress.com/author/themedemos/" title="View all posts by Theme Buster" rel="author">Theme Buster</a></span></span>            </div><!-- .entry-meta -->
            
                    </header><!-- .entry-header -->

                <div class="entry-content">
            <p>Twenty Eleven uses Sticky Posts to power the Featured Post area on the Showcase Page Template. And it’s pretty easy to use. Just publish a Sticky Post and it’ll show up in the Featured Post area. If you add a...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}:focus{outline:0;}body{background:#fff;line-height:1;}ol, ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption, th, td{font-weight:normal;text-align:left;}blockquote:before, blockquote:after,
q:before, q:after{content:"";}blockquote, q{quotes:"" "";}a img{border:0;}article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block;}body{padding:0 2em;}#page{margin:2em auto;max-width:1000px;}#branding hgroup{margin:0 7.6%;}#access div{margin:0 7.6%;}#primary{float:left;margin:0 -26.4% 0 0;width:100%;}#content{margin:0 34% 0 7.6%;width:58.4%;}#secondary{float:right;margin-right:7.6%;width:18.8%;}.singular #primary{margin:0;}.singular #content,
.left-sidebar.singular #content{margin:0 7.6%;position:relative;width:auto;}.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title{margin:0 auto;width:68.9%;}.singular .image-attachment .entry-content{margin:0 auto;width:auto;}.singular .image-attachment .entry-description{margin:0 auto;width:68.9%;}.page-template-showcase-php #primary,
.left-sidebar.page-template-showcase-php #primary{margin:0;}.page-template-showcase-php #content,
.left-sidebar.page-template-showcase-php #content{margin:0 7.6%;width:auto;}.page-template-showcase-php section.recent-posts{float:right;margin:0 0 0 31%;width:69%;}.page-template-showcase-php #main .widget-area{float:left;margin:0 -22.15% 0 0;width:22.15%;}.error404 #primary{float:none;margin:0;}.error404 #primary #content{margin:0...

JavaScript

$(function () {
    var post = $('article[id^=post-]');
    $('#next').click(function () {
        var pos = post.next().position();
        $('body').scrollTop(pos.top);
    })
})