JSFiddle - React, Tailwind, and code Playground

HTML

<div class="projects">
					<div class="edu block">
						<div class="text">
							1
						</div>
					</div>

					
					
					<div class="robo block">
						<div class="text">
							я должен быть синим если навести на 1 блок
						</div>
					</div>
					
					
					
					<div class="news block">
						<div class="text">
							я должен быть красным если навести на 5 блок
						</div>
					</div>
					
					
					<div class="vk block">
						<div class="text">
							4
						</div>
					</div>
					
					
					<div class="render block">
						<div class="text">
							5
						</div>
					</div>

CSS

.middle {
	position: absolute;
	top: 24%;
	left: -2px;
	width: 100%;
	z-index: 2;
	height: 61.5%;
}
.projects {
	width: 100px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-content: space-around;
}
.block {
	min-width: 300px;
	background: #fff;
	border: 0.5px solid #3a3a3a;
	border-radius: 4px;
	width: 100px;
	height: 50px;
	padding: 0;
}

.render:hover ~ .news {
	background-color: red;
}
.edu:hover ~ .robo {
	background-color: blue;
}