JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
 <div class="s22bt b-left Tblockb Tjblock">
			<p><span class="cc-ta goth">Secure </span> <span class="cc-ta goth ">Platform</span></p>
			<div class="platform_Slide">	
text hover here
			
				
			</div>
			<span class="play"></span>
    </div>

CSS

.play{
	height:30px;
	width: 30px;
	color: rgba(62, 173, 236,0.7);
	bottom:0.2em;
	left:46.7%;
	position: absolute;
	display: inline-block;
}
.play:before{
	content: '\f04b';
	font-family: "Font Awesome 5 Free"; 
	font-size: 18px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.pause{
	display: inline-block;
	height:30px;
	width: 30px;
	color: rgba(62, 173, 236,0.7);
	bottom:.6em;
	left:46.7%;
	position: absolute;
}
.pause:before{
	    content: '\f28b';
	font-family: "Font Awesome 5 Free"; 
	font-size:27px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

JavaScript

$('.platform_Slide').hover(function() {
    $('.play').toggleClass('pause');
  });