JSFiddle - React, Tailwind, and code Playground

by zhangchi

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				background-color: #eee;
			}
			* {
				margin: 0;
				padding: 0;
				box-sizing: content-box;
			}
			.main {
				background-color: white;
				box-shadow: 0 2px 4px 0px #333;
				width: 960px;
				height: 720px;
				padding: 20px 40px;
			}
			.wrapper {
				margin: 0 auto;
				width: 960px;
				height: 720px;
				position: relative;
			}
			.selection {
				border: 1px #33a3dc solid;
				background-color: #33a3dc;
				opacity: 0.3;
				display: none;
				position: fixed;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="main" id="main">
				<div class="paragraph">你好啊</div>
			</div>
			<div class="selection" id="selection"></div>
		</div>
		<script>
			let selectionShow = false;
			let selectionRect = {
				x: 0,
				y: 0,
				w: 0,
				h: 0,
			};
			let mainEl = document.getElementById("main");
			let eventContext = window;
			function redrawSelection() {
				let selectionEl = document.getElementById("selection");
				if (!selectionShow) {
					selectionEl.style.display = selectionShow
						? "block"
						: "none";
				} else {
					selectionEl.style.display = selectionShow
						? "block"
						: "none";
				}
				let mainElOffsetX = 0; //mainEl.getBoundingClientRect().x;
				let mainElOffsetY = 0;
				if (selectionRect.w < 0) {
					selectionEl.style.left =
						mainElOffsetX +
						selectionRect.x +
						selectionRect.w +
						"px";
					selectionEl.style.width = Math.abs(selectionRect.w) + "px";
				} else {
					selectionEl.style.left =
						mainElOffsetX + selectionRect.x + "px";
					selectionEl.style.width = selectionRect.w + "px";
				}
				if (selectionRect.h < 0) {
					selectionEl.style.top =
						mainElOffsetY +
						selectionRect.y +
						selectionRect.h...