<div id="app"></div>
body {
	height: 100vh;
	margin:0;
	display: grid;
	place-items: center;
}

.card {
	--x: -500px;
	--y: -500px;
	height: 60%;
	width: 70vw;
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
	flex-direction:column;
	background: radial-gradient(circle at var(--x) var(--y), #66a5ad 0%, #003b46 25%);
	border-radius: 15px;
	color: #fff;
}
const Hello = () => {
	const foo = e => {
		const x = e.pageX - e.currentTarget.offsetLeft;
		const y = e.pageY - e.currentTarget.offsetTop;
		e.currentTarget.style.setProperty("--x", `${x}px`);
		e.currentTarget.style.setProperty("--y", `${y}px`);
	};
	const doo = (e) => {
		e.currentTarget.style.setProperty("--x", `-500px`);
		e.currentTarget.style.setProperty("--y", `-500px`);
	}
	return (
		<div className="card" onMouseMove={foo} onMouseLeave={doo}>
			<h2>Heading</h2>
			<p>
				Lorem ipsum isd asdj aker kjdod klkda mnci sdejknw dflijewmkn sdfij sdfkj
				lkje bnasda meoi alknv asolijf lknsas loijaewr lkndf asdio welnr joapo knerw
				lkner knasdf oijerto knjdfao dfuiookj kojsdfi nwejro noaidsf njiewr
				nsdjfoadin ihjerwe
			</p>
		</div>
	);
};

ReactDOM.render(<Hello />, document.getElementById("app"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js