JSFiddle - React, Tailwind, and code Playground

by nowrap

HTML

<div id="pp_openantrag_banner_linkage">
    <img id="pp_openantrag_banner_header" src="http://dl.dropboxusercontent.com/u/22741570/Piraten/openantrag/top.jpg" alt="openantrag.de" border="0" width="160" height="46" />
    <div id="pp_openantrag_banner_sprite"><div id="pp_openantrag_banner_text">openantrag.de</div></div>
</div>

CSS

@font-face {
    font-family: 'BebasNeue';
    src: url('http://openantrag.de/Fonts/BebasNeue-webfont.eot');
    src: url('http://openantrag.de/Fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),    
    url('http://openantrag.de/Fonts/BebasNeue-webfont.woff') format('woff'),
    url('http://openantrag.de/Fonts/BebasNeue-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 

* {
    padding: 0;
    margin: 0;
    border: 0;
}

#pp_openantrag_banner_header {
    display: block;
}

#pp_openantrag_banner_linkage {
    cursor: pointer;
}

#pp_openantrag_banner_sprite {
    height: 167px;
    width: 160px;
    background: url('http://dl.dropboxusercontent.com/u/22741570/Piraten/openantrag/sprite.jpg') no-repeat 0 0;
}

#pp_openantrag_banner_text {
    float: left;
    font-family: BebasNeue,Helvetica,Arial,sans-serif;
    letter-spacing: 1px;
    font-size: 12px;
    color: white;
    margin-top: 148px;
    margin-left: 20px;
    height: 19px;
    line-height: 19px;
    padding-top: 1px;
}

JavaScript

$(document).ready(function() {
    var pp_openantrag_banner_timer;
    var pp_openantrag_banner_current = 0;
    var pp_openantrag_banner_apiUrl = "https://www.piratenpartei-hessen.de/node-jsonp-proxy/?url=http://www.openantrag.de/api/";
    
    var pp_openantrag_banner_links = new Array();
    pp_openantrag_banner_links[0] = "http://openantrag.de/";
    pp_openantrag_banner_links[1] = "http://openantrag.de/list";
    pp_openantrag_banner_links[2] = "http://openantrag.de/tags";
    pp_openantrag_banner_links[3] = "http://openantrag.de/api";
    pp_openantrag_banner_links[4] = "http://openantrag.de/feedback";

    var pp_openantrag_banner_texts = new Array();
    pp_openantrag_banner_texts[0] = "{x} Parlamente";
    pp_openantrag_banner_texts[1] = "{x} Anträge";
    pp_openantrag_banner_texts[2] = "{x} Themen";
    pp_openantrag_banner_texts[3] = "Viele Schnittstellen";
    pp_openantrag_banner_texts[4] = "Deine Verbesserungsidee";

    $("#pp_openantrag_banner_linkage").on("click", function() {
        window.open(pp_openantrag_banner_links[pp_openantrag_banner_current], '_blank');
    });

    function pp_openantrag_banner_updateSprite() {
        $("#pp_openantrag_banner_text").html(pp_openantrag_banner_texts[pp_openantrag_banner_current]);
        $('#pp_openantrag_banner_sprite').css('background-position-y', pp_openantrag_banner_current*-167+"px");
    }
    
    function pp_openantrag_banner_timerHandler() {
        pp_openantrag_banner_current++;
        if (pp_openantrag_banner_current > 4)
            pp_openantrag_banner_current = 0;
        pp_openantrag_banner_updateSprite();
    }

    function pp_openantrag_banner_startAnimation() {
        pp_openantrag_banner_updateSprite();
        pp_openantrag_banner_timer = window.setInterval(pp_openantrag_banner_timerHandler, 5000);
    }
    
    function pp_openantrag_banner_loadParlamente() {
        $.ajax({
            type: 'GET',
            url: pp_openantrag_banner_apiUrl +...