JSFiddle - React, Tailwind, and code Playground

by t2t2

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<div id="app">
	<h2>plumbr bingo</h2>

	<div class="card">
		<div class="tile-wrapper" v-for="item in hand">
			<tile :item="item"></tile>
		</div>
	</div>
</div>

<script type="text/x-template" id="tile-template">
	<div class="tile" :title="item" :class="{checked}" @click="checked = !checked">
		<p class="tile-text" v-text="item"></p>
	</div>
</script>

SCSS

$background: #fff;
$primary: #009CD5;
$padding: 5px;

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

*:before, *:after {
  box-sizing: inherit;
}


body {
	background-color: $background;
	color: $primary;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

h2 {
	text-align: center;
}

.card {
	align-content: stretch;
	display: flex;
	flex-wrap: wrap;
	max-width: 900px;
	margin: 2rem auto;
}
.tile-wrapper {
	align-content: stretch;
	display: flex;
	flex: 0 0 20%;
	max-width: 20%;
	padding: 5px;
	width: 20%;
}
.tile {
	align-items: center;
	box-sizing: border-box;
	border: 1px solid $primary;
	cursor: pointer;
	display: flex;
	flex: 0 0 100%;
	justify-content: center;
	min-height: (900px / 5);
	padding: $padding;
	overflow-x: auto;
	width: 100%;
	
	@media (max-width: 900px) {
		min-height: 20vw;
	}
	@media (min-width: 750px) {
		font-size: 17px;
	}
	@media (min-width: 800px) {
		font-size: 18px;
	}
	@media (min-width: 850px) {
		font-size: 19px;
	}
	@media (min-width: 900px) {
		font-size: 20px;
	}

	&.checked {
		background-color: $primary;
		border-color: $background;
		color: $background;
	}
}
.tile-text {
	margin: 0;
	text-align: center;
}

Babel + JSX

function allSquares() {
    return [
        'Portal is slow/down (during meeting)',
        'Druid',
        'Kafka',
        'Backend plebs',
        'Transaction assembler',
        'Outofmemory',
        'Random swearing',
        'Random swearing in russian',
        'Ivo insulting people',
        'Microsevice',
        'Threshold',
        'Amazon bills',
        '30 Day View',
        'Nikem trying to understand how things work',
        'Ago forgot about the meeting',
        'Demo Plans?',
        'Volli doing java during meeting',
        'Meeting going over time while everyone is hungry',
        'Ivo needs to take a shit in the middle of the meeting',
        'What about hosted?',
        'Nikem is hungry',
        'La Dolce Vita',
        'твою мать',
        'Marten says stupid shit',
        //'jira',
        //'Unable to setup video call',
    ]
}

function getHand() {
	var hand = _(allSquares()).shuffle().slice(0, 24).value()
	hand.splice(12, 0, 'Free Square!')
	return hand
}

const app = new Vue({
	el: '#app',
	components: {
		tile: {
			template: '#tile-template',
			data() {
				return {
					checked: this.item === 'Free Square!'
				}
			},
			props: ['item']
		}
	},
    data() {
        return {
			hand: getHand()
		}
    }
})