JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outerclass">
	<div class="list-tab secure-dns">
		<a href="#secure-dns" class="tab">
			<h3>Secure DNS</h3>
		</a>
        	<div class="blox-promo-panel" id="secure-dns" style="display:none">
		<div class="blox-product-description">
			<h1>Protect Critical DNS Systems &amp; Block Malware</h1>
			<p>DNS attacks are at an all-time high and traditional DNS servers do not offer the protection you need. Find out how Infoblox can help protect your DNS and your business.</p>	
		</div>
		<div class="blox-product-cta">
			<a class="btn btn-silent" href="/products/secure-dns">Learn More</a>
		</div>
	</div>
</div>
	

</div>
	
<div class="outerclass">
	<div class="list-tab ddi">
		<a href="#ddi" class="tab">
			<h3>Network Services DNS, DHCP, IPAM</h3>
		</a>
        
        	<div class="blox-promo-panel" id="ddi" style="display:none">
		<div class="blox-product-description">
			<h1>Deliver Critical Network Services</h1>
			<p>Ensure high performance, resilient network services like DNS, DHCP, and IP Address Management.</p>	
		</div>
		<div class="blox-product-cta">
			<a class="btn btn-silent" href="/products/network-services-dns-dhcp-ipam">Learn More</a>
		</div>
	</div>
        
	</div>
	
</div>	
	
	
<div class="outerclass">
	<div class="list-tab cloud">
		<a href="#cloud" class="tab">
			<h3>Hybrid Cloud and Virtualization</h3>
		</a>
        
        	<div class="blox-promo-panel" id="cloud" style="display:none">
		<div class="blox-product-description">
			<h1>Automate Network Services for Cloud</h1>
			<p>Improve IT agility, reduce operating costs, and enable faster time to service.</p>	
		</div>
		<div class="blox-product-cta">
			<a class="btn btn-silent" href="/products/private-hybrid-cloud">Learn More</a>
		</div>
	</div>
        
</div>
	
	
	
	
	
<div class="outerclass">
	<div class="list-tab network-automation">
		<a href="#network-automation" class="tab">
			<h3>Network Automation</h3>
		</a>
        
        	<div class="blox-promo-panel"...

JavaScript

//$(".blox-promo-panel").hide();
$(".list-tab").on("hover", function() {
    $(".blox-promo-panel").hide();
   $(this).children(".blox-promo-panel").show();
});