JSFiddle - React, Tailwind, and code Playground

by Carson Evans

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>carc1n0gen.sh</title>
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-size: 16px;
		}

		a {
			color: #4FAAF1;
			text-decoration: none;
		}

		a:hover {
			border-bottom: 1px dotted #fff;
			border-color: #4FAAF1;
		}

		a::before {
			content: '[';
		}

		a::after {
			content: ']';
		}

		input[type=text],
		textarea {
			padding: 0.25rem;
			background-color: transparent;
			border: none;
			color: #fff;
			font-size: 1rem;
		}

		input[type=text] {
			border-bottom: 1px dashed #fff;
			font-family: monospace;
		}

		textarea {
			border: 1px dashed #fff;
			display: block;
		}

		button {
			padding: 0;
			background-color: transparent;
			border: none;
			color: #20CC71;
			font-family: monospace;
			font-size: 1rem;
			border-bottom: 1px solid transparent;
		}

		button::before {
			content: '[';
		}

		button::after {
			content: ']';
		}

		button:hover {
			border-bottom: 1px dotted #20CC71;
		}

		li {
			list-style-type: none;
		}

		li::before {
			content: '- ';
		}

		.wrapper {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: url(bg.jpg);
			background-size: cover;
		}

		.terminal-window {
			width: 768px;
		}

		.terminal-window-title {
			position: relative;
			padding: 0.25rem;
			background-color: #3A3A38;
			border-radius: 4px 4px 0 0;
			text-align: center;
			font-family: Helvetica;
			font-weight: 600;
			color: #AEAEAC;
		}

		.circle {
			position: absolute;
			top: 6px;
			content: '';
			width: 15px;
			height: 15px;
			border-radius: 25px;
		}

		.circle-red {
			left: 5px;
			background-color: #FE5F5A;
		}

		.circle-yellow {
			left: 30px;
			background-color: #FEC141;
		}

		.circle-green {
			left: 55px;
			background-color: #35CB4B;
		}

		.terminal-window-output {
			padding: 0.25rem;
			height:...