JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="field-min">

	<div class="blocks"></div>
		<div class="textblock">	
    		<div class="close">
    		</div>
		</div>


	<div class="blocks"></div>
		<div class="textblock">	
    		<div class="close">
    		</div>
		</div>

</div>

CSS

#field-min{

			width: 800px;
			height: 800px
			border: 1px solid black ;
		}

		.blocks {
			width: 50px;
			height: 50px;
			border: 1px solid black ;
			position: relative;
			margin: 40px;
			
		}

		.blocks:first-child {
			background-color: red;
		}


		.blocks:last-child {
			background-color: green;
		}

		.textblock {

				width: 100px;
				height: 100px;
				border: 1px solid black ;
				background-color: #E3A8A8;
				display: none;
				position: relative;
				border: 1px solid white ;
		}

		.close {
			width: 30px;
			height: 30px;
			float: right;	
			background-color: black;
		}

JavaScript

var show = function showBlock(){


			$('.blocks').on('click', $(this), (function(){
				$('.textblock').show();
			}));

			}();

		var hide = function hideBlock(){

	$('.close').on('click', $(this), (function() { 
    $('.textblock').hide("slow")
		}));
    
		}();