JSFiddle - React, Tailwind, and code Playground

by Codi Bezouka-Smith

HTML

<div id="app">
	<div class="content-block">
		
	</div>
</div>

SCSS

@mixin flex($direction, $align, $justify) {
	align-items: $align;
	display: flex;
	flex-direction: $direction;
	justify-content: $justify;
};

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

body {
	background: #C4C4C4;
}

#app {}

JavaScript

const result = [
	{
		id: 1,
		category: 'general',
		title: 'introductions',
		description: 'introduce yourself to the community.',
	},
	{
		id: 2,
		category: 'general',
		title: 'off topic',
		description: 'for anything and everything.',
	},
	{
		id: 3,
		category: 'gaming',
		title: 'gaming discussion',
		description: 'generalized discussion for all things gaming.',
	},
	{
		id: 4,
		category: 'gaming',
		title: 'PC gaming discussion',
		description: 'dedicated towards PC gaming.',
	},
];

let forums = [];

result.forEach(res => {
	forums.push(res);
})

console.log(forums);