JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<body onLoad="load_animations()">
    <div id="slider_wrapper">
        <div id="header_images">
            <img src="http://www.abejanegra.com/images/slider_1.svg" class="header_image" color="#054065">
            <img src="http://www.abejanegra.com/images/slider_2.svg" class="header_image" color="#17191e">
            <img src="http://www.abejanegra.com/images/slider_1.svg" class="header_image" color="#3f0731">
        </div>
    </div>
</body>

CSS

#slider_wrapper {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    opacity: 0;
}
#slider_wrapper #header_images {
    position: relative;
    min-width: 802px;
    max-width: 940px;
    height: 280px;
    margin: 0 auto;
    overflow: hidden;
}
.header_image {
    opacity: 0;
	position: absolute;
	width: 100%;
	height: auto;
}

JavaScript

function load_animations() {
        var $j = jQuery.noConflict();
        if (!$j.browser.msie) {
			$j('#header_images').css({
                height: '280px',
                opacity: '0'
            })
            $j('#slider_wrapper').css({
                height: '280px',
                opacity: '0'
            });
            $j('#overlay_bg').css({
                height: '468px'
            });
            $j('#header_controls_left').animate({
                opacity: '1'
            });
            $j('#header_controls_right').animate({
                opacity: '1'
            });
            $j('#header_images').stop().animate({
                opacity: '1'
            }, 400, 'easeOutQuad');
            $j('#header_images > .header_image:first-child').stop().animate({
                opacity: '1'
            }, 400, 'easeOutQuad');
            $j('#slider_wrapper').stop().animate({
                opacity: '1'
            }, 400, 'easeOutQuad');
        } else {        
			$j('#header_images').css({
                height: '280px'
            });
            $j('#slider_wrapper').css({
                height: '280px'
            });
            $j('#overlay_bg').css({
                height: '468px'
            });
            $j('#header_images .header_image').stop().animate({
                opacity: '0'
            }, 0);
            $j('#header_images .header_image:first-child').stop().animate({
                opacity: '1'
            }, 0);
        }
        var header_count = $j("#header_images > .header_image").size();
        var current_project = 1;
        var header_color = $j('.header_image').attr('color');
        $j('#slider_wrapper').css({
            'background-image': 'none',
            'background-color': header_color
        });
        if (!$j.browser.msie) {
            $j('#overlay_bg').click(function(event) {
                var link_target = $j('#header_images > img:nth-child(' + current_project + ')').attr('target');
     ...