JSFiddle - React, Tailwind, and code Playground

by divyanshu013

HTML

<script src="https://unpkg.com/preact/dist/preact.min.js"></script>

SCSS

$primary = #3949ab;
$secondary = #2e7d32;

html, body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 16px;
	font-weight: 200;
}

h1 {
	flex: 1;
	margin: 0;
	padding: 15px;
	font-size: 170%;
	//font-weight: 300;
	font-weight: inherit;
	text-align: center;
}

[brick] {
	position: relative;
	align-content: stretch;
	overflow: hidden;
	contain: strict;
}

[brick=app] {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
	flex-direction: row;
}

[brick=appbar] {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: $primary;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	color: white;
	z-index: 100;
}

[brick=appbar] + [brick] {
  //flex: 1 1 auto;
	position: absolute;
	left: 0;
	top: 60px;
	bottom: 0;
	width: 100%;
	overflow: auto;
	//flex-grow: 1;
}

[brick=list] {
	display: block;
	flex-direction: row;

	> :only-child {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
		transform: translateZ(0);
	}
}

[brick=ListItem] {
	height: 100px;
	padding: 10px;
	margin: 10px;
	background: white;
	box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

Babel + JSX

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

async function search(name) {
	let key = `s_${name}`;
	if (key in localStorage) return JSON.parse(localStorage[key]);
	let json = await (await fetch(`//api.github.com/search/repositories?q=${name}`)).json();
	localStorage[key] = JSON.stringify(json);
	return json;
}

class Demo extends Component {
	async componentDidMount() {
		let json = await search('preact'),
			results = json && json.items || [];
		this.setState({ results });
	}
	
	renderResult = result => (
		<div brick="ListItem">
			<div>
				<a href={result.html_url} target="_blank">
					{result.full_name}
				</a>
				🌟<strong>{result.stargazers_count}</strong>
			</div>
			<p>{result.description}</p>
		</div>
	);

	render({ }, { results=[] }) {
		return (
			<div brick="app">
				<header brick="appbar">
					<h1>Hello Containment</h1>
				</header>
				<section brick="list">
					<div>
						{ results.map(this.renderResult) }
					</div>
				</section>
			</div>
		);
	}
}

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