JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bull bull-blok1"><a href="javascript:showMe();">Show</a></div>
<div class="bull bull-blok2"><a href="javascript:showMe2();">Show</a></div>
<div class="bull bull-blok3"><a href="javascript:showMe3();">Show</a></div>
<div class="blokken blok1">
<div class="text"><div class="padx"><p>Lorem ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here.</p></div></div>
</div>
<div class="blokken blok2">
<div class="text"><div class="padx"><p>Lorem ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here.</p></div></div>
</div>
<div class="blokken blok3">
<div class="text"><div class="padx"><p>Lorem ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here.</p></div></div>
</div>
CSS
.blokken{position:absolute; z-index:2; width:210px; background:center bottom #f1f1f1; font-size: 11px; line-height:15px; letter-spacing: -0.8px;}
.bull{position:absolute; -moz-border-radius: 24px; -webkit-border-radius: 24px; -khtml-border-radius: 24px; border-radius:24px; height:24px; width:24px; border:3px solid #fff; background-color:#c5ad7d; z-index:3;}
.bull a{display:block; height:24px; width:24px; text-indent:-999px; overflow:hidden;}
.blokken .text{color:#000;}
.blokken .text .padx{padding:8px 6px 5px 10px;}
.bull-blok1{left:197px; top:166px;}
.blok1{left:260px; top:140px;}
.bull-blok2{left:197px; top:266px;}
.blok2{left:260px; top:240px;}
.bull-blok3{left:197px; top:366px;}
.blok3{left:260px; top:340px;}
JavaScript
$(window).resize(function() {
checkWindow();
});
$(window).load(function() {
checkWindow();
});
function checkWindow(){
if ($(window).width() < 767)
{$(".blokken").hide()}
else
{$(".blokken").show()}
}
function showMe(){
jQuery(".blok1").show();
}
function showMe2(){
jQuery(".blok2").show();
}
function showMe3(){
jQuery(".blok3").show();
}