JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bull bull-blok1"><a class="show-blok1" href="#blok1">Show</a></div>
<div class="bull bull-blok2"><a class="show-blok1" href="#blok2">Show</a></div>

<div id="blok1" 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 id="blok2" 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>

CSS

.blokken{position:absolute; z-index:2; width:210px; background:url(/img/bg-fles-blok.jpg) 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;}

JavaScript

//function to check if window with is less than 767
var checkSize = function(){
    if ($(window).width() < 767) {
        $(".blok1").hide();
    }else{
        $(".blok1").show();
    }
}
//runs the checkSize function on resize
$(window).resize(function() {
   checkSize();
});

//click funtion for a tags with show-blok class
$('.show-blok1').on('click', function(){
    //gets the href attribut of the current link
    var showDiv = $(this).attr('href');
    //displays the appropriate div ID by using the href attribute of the link
    $(showDiv).show();
});

//executes the checkSize funtion on first load
checkSize();