JSFiddle - React, Tailwind, and code Playground

HTML

<section id = "allideas">
<section class="ideaContent">
		<section class="ideator">		
		 	<span class = "name">
		 	 John Mayer 
		 	</span>	 	
		</section>
		<section class = "ideaWrapper">
		    <section class = "idea">
		    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vitae suscipit elit, non rutrum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at pellentesque risus.
		    </section>
		    <section class="ideaStatus">
		    <span class="spantitle">Status</span>
		    <span class="spanContent">In Process</span>
		    </section>
		</section>
		<section class = "suggWrapper">
			<section class = "suggestion">
			 here is my suggestion
			</section>
		</section>	
		 <section class="ideatorInfo">
			<span><img class="myimg" alt=":"/></span>
		 	<span class = "name">
		 	 John Mayer 
		 	</span>
		 	<span class="spantitle">Email: </span>
		 	<span class="spanContent">[email protected]</span>
		 	<span class="spantitle">SAP ID: </span>
		 	<span class="spanContent">JM0001</span>	
		    <span class="spantitle">Designation: </span>
		 	<span class="spanContent">Vice President</span>	
		 	<span class="spantitle">Department:</span>
		 	<span class="spanContent">Digital Marketing</span>	  
		</section>		
	</section>


<section class="ideaContent">
		<section class="ideator">
		<span><img class="myimg" alt=":"/></span>
		 	<span class = "name">
		 	 Lily Wills 
		 	</span>		 
		</section>
		<section class = "ideaWrapper">
		    <section class = "idea">
		    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus libero nibh, in fermentum quam venenatis eu. Vivamus eu eros erat. Pellentesque tempus libero tellus. Class aptent taciti sociosqu ad litora torquent per conubia...

CSS

.ideatorInfo{	
	border-bottom: 1px solid;
    font-size: 1.5em;
    padding-bottom: .3em;	
}

.ideator{
    background-color:#c4dfe6;
    cursor:pointer;
    margin-bottom:.5em;
}

.ideator:hover{
   background-color:#003b46;
    color:white;
}

.ideaContent{
    margin: 3em;
    padding: 1em;    
}

JavaScript

$(function() {        
    //$(".ideatorInfo").dialog({autoOpen:false});
   $( ".ideatorInfo" ).hide(); 
    $(document).on('click','.ideator', function(){
        var $elem = $(this).parent().find(".ideatorInfo");
        var $copy = $elem.clone();
        $copy.appendTo(document.body).show().dialog({autoOpen:false}).dialog('open');
   });
 });