JSFiddle - React, Tailwind, and code Playground

HTML

<script>

function require() {}

var items = [];

for (var i = 0, l = 1000; i < l; i++) {
	items[i] = { id: i.toString(), value: i };
}

var dataProvider1 = {
	getNext: function(count, after, query) {
		if (count === void 0) {
			count = 50;
		}

		var filteredItems = query ? items.filter(function(item) {
			return item.value.toString().indexOf(query) != -1;
		}) : items;
		var from = after ? filteredItems.findIndex(function(item) {
			return item.id == after;
		}) + 1 : 0;

		return new Promise(function(resolve) {
			setTimeout(function() {
				resolve({
					items: filteredItems.slice(from, from + count),
					total: filteredItems.length
				});
			}, 500);
		});
	}
};

</script>

<h1>opal-button</h1>

<opal-code-listing>
	<div class="opal-code-listing__example-html">
		<opal-button>Button</opal-button>
		<opal-button type="action">Button</opal-button>
		<opal-button type="danger">Button</opal-button>
		<opal-button type="action" checkable checked>Button</opal-button>
		<opal-button disabled>Button</opal-button>
		<opal-button type="action" disabled>Button</opal-button>
	</div>
	<script class="opal-code-listing__example-js">
		require('opal-components/dist/opal-button');
	</script>
</opal-code-listing>

<opal-code-listing>
	<div class="opal-code-listing__example-html">
		<opal-button size="s">Button</opal-button>
		<opal-button type="action" size="s">Button</opal-button>
		<opal-button type="danger" size="s">Button</opal-button>
	</div>
	<script class="opal-code-listing__example-js">
		require('opal-components/dist/opal-button');
	</script>
</opal-code-listing>

<h1>opal-sign-button</h1>

<opal-code-listing>
	<div class="opal-code-listing__example-html">
		<opal-sign-button sign="plus"></opal-sign-button>
		<opal-sign-button sign="plus">Button</opal-sign-button>
		<opal-sign-button sign="minus"></opal-sign-button>
		<opal-sign-button sign="minus">Button</opal-sign-button>
	</div>
	<script...

CSS

html, body {
	background: #fff;
	color: hsl(0,0%,20%);
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	padding: 50px;
}