JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<script src="http://xoxco.com/projects/code/aware/aware.js"></script>
<div id="wrapper">
    	<h1 class="morning">Good Morning!</h1>

    	<h1 class="afternoon">Good Afternoon!</h1>

    	<h1 class="nighttime">Good Evening!</h1>

    	<h1>
			The design of this page<Br/>
			responds to the time<br/>
			where you're sitting right now.</h1>

    <form>
        <p>Change the time</p>
        <p id="time">12</p>
        <input id="time_of_day" type="range" min="0" max="24" />
    </form>
    	<h2>Alter the layout or content of your site<br />
			based on the time of day<br />
			and a bunch of other "reader aware" attributes<br />
			with no server side code:
		</h2>

</div>

CSS

body {
    font-family:'helvetica';
}
#wrapper {
    width: 90%;
    max-width: 1024px;
    margin: 0px auto;
    overflow: visible;
    text-align: center;
}
h1 {
    font-size: 24px;
}
h2 {
    font-size: 20px;
}
#time_of_day {
    width: 50%;
}
#time {
    font-weight: bold;
    font-size: 40px;
    margin:0;
}
/* Hide messages by default */
 h1.morning, h1.afternoon, h1.nighttime {
    display: none;
}
/* special styles for day time */
 body.daytime {
    color: #369;
    background-color: #FFF;
}
body.morning {
    background-image: -webkit-linear-gradient(#f1d97a 0%, #ffffff 25%)
}
body.morning.earlymorning {
    background-color: #333;
    background-image: -webkit-linear-gradient(#333 0%, #f1d97a 90%);
}
body.earlymorning h1, body.earlymorning h2 {
    color: #FFF;
}
.morning h1.morning {
    display: block;
}
.morning .h1.earlymorning {
    display: none;
}
.morning.earlymorning .h1.morning {
    display: block;
}
.afternoon h1.afternoon {
    display: block;
}
/* special styles for night time */
 body.nighttime {
    color: #fff;
    background-color: #333;
}
body.nighttime h1, body.nighttime h2 {
    color: #610a8d;
}
body.nighttime a {
    color: #8331cb;
}
.nighttime h1.nighttime {
    display: block;
}
body.night {
    background-image: -webkit-linear-gradient(#000 0%, #333 60%)
}
body.latenight {
    background-image: -webkit-linear-gradient(#000 0%, #333 90%)
}
body.latenight h1 {
    color:fuchsia;
}
body.latenight h2 {
    color: #e806f7;
}
body.latenight a {
    color: #07ff56;
}

JavaScript

$(function () {
    $().aware();
});

$(function () {
    function showTime(time) {
        m = ' AM';
        if (time >= 12 && time < 24) {
            m = ' PM';
        }
        if (time > 12) {
            time -= 12;
        }
        if (time == 0) {
            time = 12;
        }
        time = time + m;
        $('#time').html(time);
    }

    $('#time_of_day').on('change', function () {
        $('body').removeClass();
        showTime($(this).val());
        $().time_of_day($(this).val());

    });

    $('#time_of_day').val(new Date().getHours());
    showTime(new Date().getHours());

})