JSFiddle - React, Tailwind, and code Playground
HTML
<div class="post">
<h1>Post title</h1>
<img src="https://image.flaticon.com/icons/svg/219/219424.svg" alt="">
<div class="post-info">
<a href="#">Post info</a>
<a href="#">Post info more</a>
</div>
</div>
<div class="post">
<h1>Post title</h1>
<img src="https://image.flaticon.com/icons/svg/219/219424.svg" alt="">
<div class="post-info">
<a href="#">Post info</a>
<a href="#">Post info more</a>
</div>
</div>
<div class="post">
<h1>Post title</h1>
<img src="https://image.flaticon.com/icons/svg/219/219424.svg" alt="">
<div class="post-info">
<a href="#">Post info</a>
<a href="#">Post info more</a>
</div>
</div>
<div class="post">
<h1>Post title</h1>
<img src="https://image.flaticon.com/icons/svg/219/219424.svg" alt="">
<div class="post-info">
<a href="#">Post info</a>
<a href="#">Post info more</a>
</div>
</div>
CSS
body {
margin: 0;
background: #eee;
font-family: Arial;
}
.post {
width: 80%;
margin: 10px auto;
background: #fff;
box-sizing: border-box;
padding: 20px;
position: relative;
}
img {
width: 35px;
position: absolute;
top: 10%;
background: #f5f5f5;
padding: 5px;
box-sizing: border-box;
right: 1%;
}
.post-info {
position: absolute;
top: 10%;
display: none;
background: #fff;
box-shadow: 0px 3px 5px rgba(0,0,0,.2);
right: 2%;
}
.post-info a {
display: block;
text-decoration: none;
color: #777;
padding: 6px 10px;
}
.post-info a:hover {
background: #f5f5f5;
}
.active {
display: block;
}
JavaScript
var btn = document.querySelectorAll('img');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = myFunc;
}
function closeAll() {
[].forEach.call(btn, function(n) {
n.nextElementSibling.classList.remove('active');
});
}
document.addEventListener('click', function(e) {
for (var t = e.target; t.classList; t = t.parentNode) {
if (t.classList.contains('post-info')) {
return;
}
}
closeAll();
});
function myFunc(e) {
closeAll();
e.stopPropagation();
var menu = this.nextElementSibling;
menu.classList.add('active');
}