JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">

	<div class="icon" id="my-files">
		<div class="icon__img">
			<img class="icon__src" src="src/img/computer.png">
		</div>
		<div class="icon__title">
			<p class="icon__info">Мои документы</p>
		</div>
	</div>
	
	<div class="icon" id="my-computer">
		<div class="icon__img">
			<img class="icon__src" src="src/img/computer.png">
		</div>
		<div class="icon__title">
			<p class="icon__info">Мой компьютер</p>
		</div>
	</div>
	
</div>

CSS

body {
	padding: 20px;
	background-size: cover;
	/*background-image: url(../img/bg.jpg);*/
	width: 100%;
	height: 100%;
	font-family: sans-serif;

}

/* Window */
.window {
	width: 500px;
	height: 300px;
	/*position: absolute;*/
	border: 1px solid #f1f1f1;
	box-shadow: -5px 5px 10px 0px rgba(0,0,0,.1);
}
.window__hide {
	display: none;
}
.window-header {
	background: #0E9AE6;
	width: 100%;
	height: 30px;
}
.window-header__close {
	background-image: url(../img/close.png);
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	width: 15px;
	height: 15px;
	position: absolute;
	right: 8.5px;
	top: 7.5px;
	cursor: pointer;
}
.window-header__close:hover {
		opacity: .5;

}
/* Icon */
.icon {
	cursor: pointer;
	width: 60px;
	padding: 20px;
	position: relative;
	height: 100px;
	display: inline-block;
}

.icon:hover {
	box-shadow: inset 0px 0px 0px 1px #eee;
}
.icon__img {
	width: 100%;
}
.icon__src {
	width: 100%;
	height: 100%;
	display: block;
}
.icon__title {
	position: absolute;
	bottom: 20px;
	width: 60px;
	left: 50%;
	margin-left: -30px;
	font-size: 11px;
	text-align: center;
}
.icon__weight {
	color: #aaa;
	display: block;
	margin: 0 auto;
}
.icon__info {
	margin: 0;
	text-align: center;
}

JavaScript

/**
 * Module(function constructor)
 */

var WindowComponent = (function() {

	// Constructor
	function constructor(confs) {
		var self = this;

		this.action = confs.action;
		this.ID = confs.ID;
		this.height = confs.height;
		this.width = confs.width;


		// Private logic
		var app = document.querySelector('#app');

		// Main function for new window
		function createWindow(height, width, ID) {
			// var icon = 
			var template = '\
				<div id="' + ID + '" class="window window__hide">\
					<div class="window-header">\
						<div class="window-header__close"></div>\
					</div>\
				</div>\
			';
			// Add new window into body
			app.innerHTML += template;
		}

		// console.log(document.getElementById(this.ID))

		function openWindow(id) {
			document.querySelector(id).classList.remove('window__hide');
		}


		this.init = function() {
			createWindow(this.height, this.width, this.ID);
			document.querySelector(this.action).addEventListener('click', function() {						document.getElementById(self.ID).classList.remove('window__hide');
			});
		}

		// Init section
		this.init();
	}

	return constructor;

	// Public methods

}());







var myFiles = new WindowComponent({
	action: '#my-files',
	ID: 'myFiles',
	width: '200',
	height: '200',
});
var myComputer = new WindowComponent({
	action: '#my-computer',
	ID: 'myCompWindow',
	width: '200',
	height: '200',
});