JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'>


<ul class="quote">
    <li>think different.</li>
    <li>stay hungry, stay foolish.</li>
    <li>Just get rid of the crappy stuff and <br/> focus on the good stuff.</li>
    <li>That's been one of my mantras -- focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains.</li>
    <li>We've never worried about numbers. In the market place, Apple is trying to focus the spotlight on products, because products really make a difference. Ad campaigns are necessary for competition; IBM's ads are everywhere. But good PR educates people; that's all it is. You can't con people in this business. The products speak for themselves.</li>
    <li>The most compelling reason for most people to buy a computer for the home will be to link it into a nationwide communications network. We're just in the beginning stages of what will be a truly remarkable breakthrough for most people--as remarkable as the telephone.</li>
    <li>"We've kept our marriage secret for over a decade."
-- Jobs' answer to Kara Swisher asking about the "greatest misunderstanding" in Jobs' relationship with Bill Gates.</li>
    <li>It's really hard to design products by focus groups. A lot of times, people don't know what they want until you show it to them.</li>
    <li>Picasso had a saying: 'Good artists copy, great artists steal.' We have always been shameless about stealing great ideas...I think part of what made the Macintosh great was that the people working on it were musicians, poets, artists, zoologists and historians who also happened to be the best computer scientists in the world.</li>
    <li>You can't connect the dots looking forward; you can only...

CSS

body {
    font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial;
    min-width: 1000px;
    margin-top: 40px;
}

.quote {
    font-family: 'Waiting for the Sunrise';
    font-size: 3em;
    color: #252525;
    text-align: center;
    text-shadow: rgba(0,0,0,0.1) 0px 1px 1px;
    min-width: 800px;
    max-width: 1000px;
    margin: auto;
    min-height: 230px;
}
.quote li {
    display: none;
    margin-bottom: 30px;
}
.quote li.view {display: block;}
.quote.all li {display: block;}
.new {
    margin: 20px auto;
    width: 100px;
    height: 100px;
    color: #888;
    line-height: 100px;
    cursor: pointer;
}

JavaScript

jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
});

$.fn.none = function () {
    return this.length == 0;
}

$(document).ready(function() {
    $('ul.quote li').addClass('no');
    
    $('ul.quote li.no:random').addClass('view').removeClass('no');
    
    $('.new').click(function() {
        $('ul.quote li.view').removeClass('view');
        $('ul.quote li.no:random').addClass('view').removeClass('no');
        $('ul.quote li.no').none(function() {
            $('ul').hide();
            $('.new').hide();
            $('.message').show();
        });
    });
});