JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.24.1/ramda.js"></script>

CSS

body {
  background: #333;
  color: #eee;
  font-family: sans-serif;
  margin: 1em;
}

pre {
  padding: 0.5em;
  background: #444;
}

code {
  font-family: monospace;
}

JavaScript

const p = (s) =>
  document.body.innerHTML += `<p>${format(s)}</p>`
const l = (title, ...args) =>
	[ title, `<pre><code>${ format(...args) }</code></pre>` ]
		.forEach(p)
const format = (...args) => args
	.map(x => typeof x === 'string' ? x : JSON.stringify(x))
	.join('<br>')
	.replace(/,\[/g, ',\n[')

const { concat, liftN } = R

const flip = () => [ [ 'h' ], [ 't' ] ]
const concatFlips = liftN(2, concat)
const twoFlips = concatFlips(flip(), flip())
const threeFlips = concatFlips(twoFlips, flip())

l('Two flips:', twoFlips)
l('Three flips', threeFlips)