JSFiddle - React, Tailwind, and code Playground

by Ajmal Afif

HTML

<main id="MAIN_1">
	<nav id="NAV_2">
		<div id="DIV_3">
			<div id="DIV_4">
				<a href="/product" id="A_5"></a>
				<div id="DIV_6">
					<div id="DIV_7">
						<svg id="svg_8">
							<path id="path_9">
							</path>
						</svg>
						<div id="DIV_10">
							Notion
						</div>
					</div>
				</div>
			</div>
			<div id="DIV_11">
			</div>
			<div id="DIV_12">
				<a href="/product" id="A_13"></a>
				<div id="DIV_14">
					Product
				</div><a href="/pricing" id="A_15"></a>
				<div id="DIV_16">
					Pricing
				</div><a href="/mobile" id="A_17"></a>
				<div id="DIV_18">
					iOS
				</div><a href="/desktop" id="A_19"></a>
				<div id="DIV_20">
					Desktop
				</div>
				<div id="DIV_21">
				</div><a href="/login" id="A_22"></a>
				<div id="DIV_23">
					Log in
				</div>
			</div>
			<div id="DIV_24">
				<div id="DIV_25">
					<div id="DIV_26">
						<div id="DIV_27">
							<input type="email" placeholder="Enter email..." id="INPUT_28" />
						</div>
						<div id="DIV_29">
							Sign up
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="DIV_30">
		</div>
	</nav>
	<div id="DIV_31">
	</div>
	<div id="DIV_32">
		<img src="/front/desktop/hero-desktop.png" id="IMG_33" alt='' />
		<div id="DIV_34">
			Notion for Mac &amp; Windows
		</div>
		<div id="DIV_35">
			Work offline, collaborate in real-time, write without distractions.
		</div>
		<div id="DIV_36">
		</div>
		<div id="DIV_37">
			<a href="https://desktop-release.notion-static.com/Notion-0.1.14.dmg" rel="noopener noreferrer nofollow" id="A_38"></a>
			<div id="DIV_39">
				<svg id="svg_40">
					<path id="path_41">
					</path>
				</svg>Download for Mac
			</div><a href="https://desktop-release.notion-static.com/Notion%20Setup%200.1.14.exe" rel="noopener noreferrer nofollow" id="A_42"></a>
			<div id="DIV_43">
				<svg id="svg_44">
					<path id="path_45">
					</path>
				</svg>Download for Windows
			</div>
		</div>
		<div id="DIV_46">
		</div>
		<div id="DIV_47">
			<div...

CSS

#MAIN_1 {
    box-sizing: border-box;
    color: rgb(4, 4, 2);
    cursor: default;
    display: flex;
    height: 2526.08px;
    max-width: 100%;
    text-decoration: none solid rgb(4, 4, 2);
    text-size-adjust: 100%;
    width: 960px;
    column-rule-color: rgb(4, 4, 2);
    align-items: center;
    perspective-origin: 480px 1263.03px;
    transform-origin: 480px 1263.03px;
    fill: rgb(4, 4, 2);
    caret-color: rgb(4, 4, 2);
    background: rgb(255, 254, 252) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(4, 4, 2);
    flex-flow: column nowrap;
    font: normal normal 400 normal 17px / 22.95px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    margin: 0px 536.5px;
    outline: rgb(4, 4, 2) none 0px;
    padding: 54px 30px 0px;
}/*#MAIN_1*/

#NAV_2 {
    bottom: 418px;
    box-sizing: border-box;
    color: rgb(4, 4, 2);
    cursor: default;
    display: flex;
    height: 54px;
    left: -7.5px;
    min-height: auto;
    min-width: auto;
    position: fixed;
    right: -7.5px;
    text-decoration: none solid rgb(4, 4, 2);
    text-size-adjust: 100%;
    top: 0px;
    width: 2048px;
    z-index: 99;
    column-rule-color: rgb(4, 4, 2);
    align-items: center;
    justify-content: center;
    perspective-origin: 1024px 27px;
    transform-origin: 1024px 27px;
    fill: rgb(4, 4, 2);
    caret-color: rgb(4, 4, 2);
    background: rgb(255, 254, 252) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(4, 4, 2);
    flex-flow: column nowrap;
    font: normal normal 400 normal 15px / 20.25px -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    outline: rgb(4, 4, 2) none 0px;
}/*#NAV_2*/

#DIV_3 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(4, 4, 2);
    cursor: default;
    display: flex;
    height: 52.0781px;
    left:...