JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

<header><p>Scroll down to see the magic!</p></header>
<section class="candy-wrapper">
  <article class="main"><h1>I have lots of content</h1><p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p><p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><div class="large-photo"></div><p>Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</p><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p></article><!-- Leave No Space 
  --><aside class="sidebar fixedsticky"><h2>Sticky!</h2><p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis...

CSS

/* formatting */
*, *:before, *:after {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	height: 100%;
	font-size: 100%;
}
body {
	height: 100%;
	font: 1em/1.5 Georgia, serif;
	background-color: #222;
	color: #fff;
}
h1 {
	font: 2.25em/1 Helvetica, sans-serif;
	margin-bottom: .667em;
}
h2 {
	font: 1.5em/1 Helvetica, sans-serif;
	text-transform: uppercase;
	margin-bottom: .667em;
}
p {
	margin-bottom: 1em;
}
.button {
	display: block;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
	color: #fff;
	background-color: #0071fc;
	padding: .5em
}
header, footer {
	background: #1a1a1a;
	padding: 1em;
	color: #fff;
	min-height: 10em;
	text-align: center;
}
footer {
	height: 100%;
}
.main {
	padding: 1.5em 3em 1.5em 1.5em;
}
.sidebar {
	padding: 2em 1.5em;
	background-color: #333;
}
.large-photo {
	height: 0;
	padding-top: 61.9%;
	background-color: #333;
	margin-bottom: 1em;
}
@media (min-width:43.75em) {

	/* responsive layout */
	.candy-wrapper {
		max-width: 60em;
		margin: 0 auto;
		position: relative;
	}
	.main {
		display: inline-block;
		width: 75%;
		vertical-align: top;
	}
	.sidebar {
		display: inline-block;
		width: 25%;
		vertical-align: top;
	}

	/* loaded fixed-sticky polyfill
	https://github.com/filamentgroup/fixed-sticky */
	.fixedsticky {
		top: 0;
	}
}

JavaScript

// loaded fixed-sticky polyfill
// https://github.com/filamentgroup/fixed-sticky

$( '.sidebar' ).fixedsticky();