JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<!--DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>phloe.industries™</title>
		<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
		<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png" /-->
		<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
		<style>
		
		</style>
	<!--/head>
	<body-->
		<main>
			<h1 aria-label="phloe industries">
				<svg viewBox="0 0 184 60" fill="none" xmlns="http://www.w3.org/2000/svg">
				  <path d="M80 4c0-1.8856 0-2.8284.5858-3.4142C81.1716 0 82.1144 0 84 0h4c1.8856 0 2.8284 0 3.4142.5858C92 1.1716 92 2.1144 92 4v40c0 1.8856 0 2.8284-.5858 3.4142C90.8284 48 89.8856 48 88 48h-4c-1.8856 0-2.8284 0-3.4142-.5858C80 46.8284 80 45.8856 80 44V4z" fill="#fff"/>
				  <path fill-rule="evenodd" clip-rule="evenodd" d="M96.077 26.4317C96 27.214 96 28.1426 96 30c0 1.8574 0 2.786.077 3.5683.7482 7.5964 6.758 13.6065 14.355 14.3547.782.077 1.711.077 3.568.077s2.786 0 3.568-.077c7.597-.7482 13.607-6.7583 14.355-14.3547C132 32.786 132 31.8574 132 30c0-1.8574 0-2.786-.077-3.5683-.748-7.5964-6.758-13.6065-14.355-14.3547C116.786 12 115.857 12 114 12s-2.786 0-3.568.077c-7.597.7482-13.6068 6.7583-14.355 14.3547zm12.227.0376C108 27.2043 108 28.1362 108 30s0 2.7956.304 3.5307a4.001 4.001 0 002.165 2.1648C111.204 36 112.136 36 114 36s2.796 0 3.531-.3045a4.001 4.001 0 002.165-2.1648C120 32.7956 120 31.8638 120 30s0-2.7957-.304-3.5307a4.001 4.001 0 00-2.165-2.1648C116.796 24 115.864 24 114 24s-2.796 0-3.531.3045a4.001 4.001 0 00-2.165 2.1648zM136 30c0-1.8574 0-2.786.077-3.5683.748-7.5964 6.758-13.6065 14.355-14.3547C151.214 12 152.143 12 154 12s2.786 0 3.568.077c7.597.7482 13.607 6.7583 14.355 14.3547C172 27.214 172 28.1426 172 30c0 1.8574 0 2.786-.077 3.5683C171.78 35.0162 170.476 36 169.021 36h-2.546c-2.311 0-3.466 0-4.343.463a3.9983 3.9983 0 00-1.669...

CSS

* {
				padding: 0;
				margin: 0;
			}
			html {
				height: 100%;
				font: 400 12px/1.25 "Raleway", /*-apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",*/ sans-serif;
			}
			@media screen and (min-height: 320px) {
				html {
					font-size: calc(12px + 4 * ((100vh - 320px) / 704));
				}
			}
			@media screen and (min-height: 1024px) {
				html {
					font-size: 16px;
				}
			}
			body {
				display: flex;
				justify-content: center;
				align-items: stretch;
				min-height: 100%;
				background: #222;
				margin: 0;
				color: #CCC;
			}
			main {
				width: calc(100vh * (1 / 1.61803398875));
				min-width: 280px;
				text-align: center;
				_display: flex;
				flex-flow: column wrap;
				
			}
			h1 {
				flex: 0 0 auto;
				position: relative;
				margin: 0;
				padding: 0;
			}
			h1::after {
				content: "";
				display: block;
				padding-bottom: 100%;
			}
			h1 > * {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transform: scale(0.1) translateX(3.25%);
				vertical-align: top;
			}
			.details {
				_border-top: thin solid #666;
				flex: 1 1 auto;
				justify-content: center;
				align-items: flex-end;
				align-content: center;
				_display: flex;
				_max-width: calc(100vw - 40px);
				margin: 0 auto;
				_padding: 20px 0;
				flex-flow: row wrap;
				
			}
			p {
				text-transform: uppercase;
			}
			p, ul {
				font-size: 0.8em;
				width: 100%;
				text-align: left;
				letter-spacing: 0.025em;
				word-spacing: 0.025em;
			}
			ul {
				margin-top: 0.5em;
			}
			ul, li {
				display: inline-block;
			}
			p > span i::before, 
			li + li::before {
				content: "/";
				margin: 0 1em;
				color: #666;
			}
			a {
				color: inherit;
				text-decoration-color: #666;
				transition: 0.1s color ease-in-out, 0.1s text-decoration-color ease-in-out;
			}
			a:hover {
				color: #FFF;
				text-decoration-color: #CCC;
			}
      
      .box {
       ...