JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<div class="features_left">
	<div class="feature" data-highlight="#feature_1_highlight">
		<div class="features_heading highlight">Title 1</div>
 		<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
    <div class="feature" data-highlight="#feature_2_highlight">
    	<div class="features_heading">Title 3</div>
    	<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
    <div class="feature" data-highlight="#feature_3_highlight">
    	<div class="features_heading">Title 5</div>
    	<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
</div>
<div class="features_image">
  
    <img src="http://lorempixel.com/300/300/technics" >
        
    <div id="feature_1_highlight" class="feature_highlight" style="top:50px; left:50px;"></div>
    <div id="feature_2_highlight" class="feature_highlight" style="top:150px; left:100px;"></div>
    <div id="feature_3_highlight" class="feature_highlight" style="top:200px; left:50px;"></div>
    <div id="feature_4_highlight" class="feature_highlight" style="top:250px; left:150px;"></div>
    <div id="feature_5_highlight" class="feature_highlight" style="top:50px; left:200px;"></div>
    <div id="feature_6_highlight" class="feature_highlight" style="top:150px; left:150px;"></div>

</div>
<div class="features_right">
	<div class="feature" data-highlight="#feature_4_highlight">
		<div class="features_heading">Title 2</div>
    	<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
   ...

CSS

.features_left, .woocommerce .features_right {
	width:295px;
	height:380px;
	float:left;
	margin-bottom:30px;
}
	.features_heading {
		text-transform:uppercase;
		font-weight:800;
		font-size:.8em;
		width:100%;
		padding-bottom:5px;
	}
	
	.features_desc {
		font-size:.8em;
		width:100%;
		padding-bottom:45px;
		line-height:1.5;
	}

.features_image {
	width:380px;
	height:380px;
	float:left;
	margin:0 20px;
	position:relative;
}
	.features_image img{
		width:380px;
	}
	.feature_highlight {
		position:absolute;
		width: 40px; 
		height: 40px; 
		background: rgba(206,65,37,0.50);
		border:4px solid #CE4125;
		-moz-border-radius: 20px; 
		-webkit-border-radius: 20px; 
		border-radius: 20px;
		z-index:10;
		display:none;
	}

JavaScript

$(document).ready(function(){
    $('.feature').mouseover(function(){
        $(this).find('.features_heading').css('color', '#CE4125');
        $($(this).attr("data-highlight")).css('display', 'inherit');
    }).mouseout(function(){
        $(this).find('.features_heading').css('color','#56534F');
        $($(this).attr("data-highlight")).css('display', 'none');
    });
});