JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<div class="grid-parent" 
    x-data="{
        raw: '',
		transformed: '',
		transformInput() {
			if(!this.raw) return false;
			this.transformed = JSON.stringify(this.raw);
		}
    }">
	<div class="mid-grid">
		<div>
			<h2>Input</h2>
			<textarea x-model="raw"></textarea>
		</div>
		<div>
			<h2>Output</h2>
			<textarea x-model="transformed"></textarea>
		</div>
	</div>
	<button x-on:click="transformInput">Transform</button>
</div>

CSS

* {
	box-sizing: border-box;
}
textarea {
	display: block;
	min-height: 500px;
	width: 100%;
}
button {
	display: block;
	width: 100%;
	padding: 20px;
	margin: 20px 0
}
.grid-parent {
	display: block;
	padding: 20px;
}
.mid-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}