JSFiddle - React, Tailwind, and code Playground

by bjoerne

CSS

.div {
    width: 80%;
    height: 300px;
    margin: 50px auto;
    padding: 20px;
    font-size: 50px;
    font-family: sans-serif;
    color: white;
}
.div a {
    margin: 0 10px;
    color: white;
}
.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;
}

CoffeeScript

scrollToId = (id) ->
    $('html, body').animate({ scrollTop: $("##{id}").offset().top }, 'fast')
    
for i in [1..70]
    html = "<div id=\"div#{i}\" class=\"div div#{i % 7 + 1}\" class=\"div\">"
    html += '<div>'
    html += '<a class="first" href="#">first</a>'
    html += '<a class="last" href="#">last</a>'
    html += '</div>'
    html += "<p>#{i}</p>"
    html += '</div>'
    $('body').append html

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