JSFiddle - React, Tailwind, and code Playground
HTML
<div style="position:relative"> <a style="cursor: pointer" id="view_1" >View 1</a>
<div
class="contact_box box_1" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV A</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson Button</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-66558741</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: [email protected]</td>
</tr>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("a").click(function() {
$('.contact_box').hide();
$(this).next('div').show();
});
});
</script>
<br>
<br>
<div style="position:relative"> <a style="cursor: pointer" id="view_2">View 2</a>
<div class="contact_box box_2"
style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV B</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-88542215</td>
...
CSS
.contact_box {
border: 1px solid #ddd;
min-height: 84px;
padding: 10px 0 10px 10px;
width: 410px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
position:absolute;
top:0px;
left:39px;
background-color:#fff;
}
.table_contact tr td {
padding:3px 2px 0 4px;
border:0px;
}
.company_name {
background-color:#1283C6;
padding:3px 4px;
color:#fff;
font-weight:bold;
}
.left {
float:left;
}