JSFiddle - React, Tailwind, and code Playground

by Codi Bezouka-Smith

HTML

<body>
<!-- markdown-it -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js" type="text/javascript"></script>
<main>
	<form role="form">
		<textarea name="content" id="content"></textarea>
		<input type="submit" value="create" />
	</form>
	<section>
		<h1>input</h1>
		<p class="input"></p>
		
		<h1>output</h1>
		<p class="output"></p>
	</section>
</main>
</body>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;700&family=Roboto:wght@300;400;700&display=swap');

$font-archivo: 'Archivo', sans-serif;
$font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
$font-roboto: 'Roboto', sans-serif;

$color-primary: rgb(0,0,0)
$color-secondary: rgb(255,255,255)

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

.container {
	margin: 0 auto;
	max-width: 85%;
}

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

body {
	@extend .container;
	main { font-family: $font-roboto }
}

main {
	form {
		@include flex(column,flex-start,flex-start);
		input[type="submit"] {
			background: $color-primary;
			color: $color-secondary;
			padding: 4px 8px;
		}
		textarea {
			border: 1px solid $color-primary;
			font-family: $font-mono;
			min-width: 100px;
			padding: 4px 8px;
			resize: vertical;
			width: 100%;
		}
	}
	section {
		h1 {
			font-family: $font-archivo
		}
		.input {
			font-family: $font-mono;
		}
	}
}

JavaScript

const md = window.markdownit()