JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<div class="records">
			<h3>records title</h3>
			<p>record details</p>
			<button>click me</button>
			<div class="shapes">
				<p>1</p>
			</div>
		</div>
		<div class="records">
			<h3>records title</h3>
			<p>record details</p>
			<button>click me</button>
			<div class="shapes">
				<p>1</p>
			</div>
		</div>
		<div class="records">
			<h3>records title</h3>
			<p>record details</p>
			<button>click me</button>
			<div class="shapes">
				<p>1</p>
			</div>
		</div>
	</div>

CSS

.wrapper {
		float: left;
		width: 100%;
		overflow: hidden;
	}
	.records {
		border: 1px solid #ddd;
		width: 20%;
		float: left;
		margin-right: 3%;
		position: relative;
	}
	.shapes {
		height: 63px;
		width: 63px;
		background: grey;
		border-radius: 100%;
		text-align: center;
		padding-top: 10px;
		margin-top: 10px;
		position: absolute;
		top: 67px;
		right: 10px;
	}
	.changeshape {
		position: absolute;
		top: 22px;
		right: 10px;
	}

JavaScript

let boxes = document.getElementsByClassName("records");
	for (let i = 0; i < boxes.length; i++) {
		boxes[i].addEventListener("mouseover", showFullShape);
		boxes[i].addEventListener("mouseout", normalShape);
	}
	function showFullShape(e) {
		elem = e.target.querySelector(".shapes");
		elem.classList.add("changeshape");
	}

	function normalShape(e) {
		elem = e.target.querySelector(".shapes");
		elem.classList.remove("changeshape");
	}