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;
    transition: all .4s;
	}
  .records:hover .shapes {
    position: absolute;
		top: 22px;
		right: 10px;
  }
  
	.changeshape {
		position: absolute;
		top: 22px;
		right: 10px;
	}