JSFiddle - React, Tailwind, and code Playground

by bjoerne

HTML

<script src="http://immediatres.de/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05"></script>
<script src="http://immediatres.de/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.7.2"></script>
<script src="http://immediatres.de/wp-content/themes/immediatres/js/navigation.js?ver=1.0"></script>
<div id="main">
    <div id="template">
        <div id="div__i__" class="div div__i7__">
            <div>
                <span>__i__</span>
                <a class="first" href="#">first</a>
                <a class="last" href="#">last</a>
            </div>
            <div class="img-container clearfix">
                <img src="http://www.cheers-up-the-blue.de/img/welpe_animation.gif" />
                <img src="http://www.hundezucht-von-der-sturmhoehe.de/cc_welpen_animation05.gif" />
            </div>
            <div class="time"></div>
        </div>
    </div>
</div>

CSS

.div {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    font-size: 50px;
    font-family: sans-serif;
    color: white;
}
.div a {
    margin: 0 5px 0;
    color: white;
}
.img-container {
    margin-top: 10px;
}
.img-container img {
    float: left;
}
.div1 {
    background-color: #FF0000;
}
.div2 {
    background-color: #FF7F00;
}
.div3 {
    background-color: #FFFF00;
}
.div4 {
    background-color: #00FF00;
}
.div5 {
    background-color: #0000FF;
}
.div6 {
    background-color: #4B0082;
}
.div7 {
    background-color: #8F00FF;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

CoffeeScript

scrollToId = (id) ->
    $('html, body').animate({ scrollTop: $("##{id}").offset().top }, 'fast')
    
template = $('#template').html()
$('#template').remove()

for i in [1..500]
    i7 = i % 7 + 1
    replaced = template.replace /__i__/g, i
    replaced = replaced.replace /__i7__/g, i7
    $('#main').append replaced

$('.first').on 'click', (event) ->
    event.preventDefault()
    $('html, body').animate({ scrollTop: $('#div1').offset().top }, 'slow')
$('.last').on 'click', (event) ->
    event.preventDefault()
    $('html, body').animate({ scrollTop: $('#div500').offset().top }, 'slow')

scheduleUpdateTime = ->
    setInterval updateTime, 1000
    
updateTime = ->
    $('.time').html(new Date().getTime())
    
scheduleUpdateTime()