JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://chrismagiera.de/dev/js/responsiveslides.min.js"></script>
<div class="scroll-down"><a href="#content"></a></div>
		

<div class="rslides_container">
		
    <ul class="rslides" id="slider4">
        <li class="slide"><img src="http://chrismagiera.de/dev/img/IMG_20140125_121738.jpg" /></li>
    </ul>

</div>

		
<section id="subsite" role="main">
		
    <div class="span2" id="content">
			
		<p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.</p>
			
	</div>

    <div class="span2">
			
		<p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some...

CSS

body {
	margin: 0;
	background: #e2e2e2;
}

section {
	margin: 0 auto;
	width: 1020px;
}

.span2 {
	float: left;
	margin: 0 10px;
    width: 490px;
}

.scroll-down,
.scroll-down a {
	display: block;
    position: absolute;
	width: 50px;
	height: 65px;
}

.scroll-down {
	bottom: -25px;
    left: 50%;
    margin-left: -25px;
    z-index: 1000;
    background: url('http://chrismagiera.de/dev/img/arrow-down.svg') no-repeat;
}



.rslides_container {
	position: relative;
	float: left;
	width: 100%;
}

.rslides {
	position: relative;
	display: block;
	float: left;	list-style: none;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
}

.rslides li {
	-webkit-backface-visibility: hidden;
	position: relative;
	display: block;
	float: left;
	width: 100%;
	left: 0;
	top: 0;
}

.rslides img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
	margin-bottom: 10px;
}

JavaScript

$(window).scroll(function() {
    var i = $(".slide");
    if(i.height() < $(this).height()) { $('.scroll-down').hide(); return; }
	if ($(this).scrollTop()>0){
		$('.scroll-down').fadeOut(800);
	}
    else {
		$('.scroll-down').fadeIn();
	}
});

$('.scroll-down a').on('click', function(event){     
	event.preventDefault();
	$('html,body').animate({scrollTop:$(this.hash).offset().top}, 600);
});