JSFiddle - React, Tailwind, and code Playground

HTML

<a class="pp-block-button" href="#" onclick="return false"></a>
             <div class="popup-block">
                <div class="info_block">
                    <a class="close" title="Закрыть">X</a>
                    <h2>Заголовок</h2>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                </div>
            </div>

CSS

div.popup-block{
		position: absolute;
		display:none;
		width: 300px;//размеры будут выставлены на фул скрин
		height: 300px;
		top:0;
		background:#fff;
		z-index: 100;
	}
	.pp-block-button {
		background: url('../images/icons_map.png') no-repeat red;
		width: 43px;
		height: 43px;
		position: absolute;
		bottom: 50px;
		right: 50px;
		transform: scale(0.8);
		transition: all 0.3s;
	}
	.pp-block-button:hover {		
		transform: scale(1);
	}	
	.info_block {
		width: 100%;
		margin:0;
		padding:0;
		position: relative;
		height:100%;
	}
		a.close {
			cursor:pointer;
			position: absolute;
			top: 5px;
			right: 5px;
			z-index: 10;
      font-size: 40px;
      color:red;
		}

JavaScript

$(function(){

    $(".pp-block-button").click( function(){
      $(this).next(".popup-block").toggle("fast")
    });
    $(".close").click( function(){
      $(this).parents(".popup-block:first").hide("fast")
    });
  });