JSFiddle - React, Tailwind, and code Playground

by Jason Miller

HTML

<script src="https://unpkg.com/preact"></script>
<script src="https://unpkg.com/preact-scroll-viewport"></script>

CSS

html, body {
  background: #fff;
  font: 16px/1.21 'Helvetica Neue',arial,sans-serif;
  font-weight: 300;
}

.list {
	margin-top: 200px;
	background: #FFF;
}

.row {
	position: relative;
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 20px;
	box-shadow: inset 0 -1px 0 #DDD;
	overflow: hidden;
}

Babel + JSX

const { h, Component, render } = preact; /** @jsx h */


// 100,000 rows of static data
const DATA = [];
for (let x=1e5; x--; ) DATA[x] = `Item #${x+1}`;

DATA[0] = 'This is ' + DATA.length.toLocaleString() + ' rows';


class Demo extends Component {
	render() {
		return (
			<ScrollViewport class="list" overscan={20}>
				{ DATA.map( row => <div class="row">{row}</div> ) }
			</ScrollViewport>
		);
	}
}


render(<Demo />, document.body);