JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Сайты на заказ</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="Main.css">
</head>
<body>
    
    <div class="head-box">
        
        <div class="content content1">
            
            <h1 id="about-me-h1" class="uppercase content-head">обо мне</h1>
            
            <div class="in-content">
      
              <span class="close">X</span>

              <p>asdasdsd</p>
              <p>asdasdsd</p>
              <p>asdasdsd</p>

            </div>
            
        </div>
        
        <div class="content content2">
            
            <h1 id="services-h1" class="uppercase content-head">услуги</h1>
            
            <div class="in-content">
      
              <span class="close">X</span>

              <p>asdasdsd</p>
              <p>asdasdsd</p>
              <p>asdasdsd</p>

            </div>
            
        </div>
        
        <div class="content content3">
            
            <h1 id="portfolio-h1"...

CSS

/* GLOBAL */
*{
    margin: 0;
    padding: 0;
}
.paddingtop-50{
    padding-top: 50px;
}
.uppercase{
    text-transform: uppercase;
}
.p-btn{
    text-align: center;
}
/* GLOBAL END */
/* CONTENT */
body{
    background: #000;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
.head-box{
    background: #000;
    height: 100vh;
    width: 100vw;
}
.content{
    height: 100vh;
    width: 25vw;
    float: left;
    color: #fff;
}
/* CONTENT */
.content1{
    background: url(https://us.123rf.com/450wm/ssilver/ssilver1609/ssilver160900042/64515123-dark-slate-background.jpg?ver=6) bottom left no-repeat;
    background-size: cover;
    transition: .6s;
    cursor: pointer;
}
.content1:hover{
    background: url(https://us.123rf.com/450wm/ssilver/ssilver1609/ssilver160900042/64515123-dark-slate-background.jpg?ver=6) top center no-repeat;
    background-size: cover;
    transition: .6s;
}
.content2{
    background: url(https://image.freepik.com/vetores-gratis/fundo-de-couro-escuro_23-2147491255.jpg) top left no-repeat;
    background-size: cover;
    transition: .6s;
    cursor: pointer;
}
.content2:hover{
    background: url(https://image.freepik.com/vetores-gratis/fundo-de-couro-escuro_23-2147491255.jpg) center center no-repeat;
    background-size: cover;
    transition: .6s;
}
.content3{
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnYHVmE8TsPDJKITaKpwZW2jFr28HvtYH86_mj_w7f4ZxvnCqo) top right no-repeat;
    background-size: cover;
    transition: .6s;
    cursor: pointer;
}
.content3:hover{
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnYHVmE8TsPDJKITaKpwZW2jFr28HvtYH86_mj_w7f4ZxvnCqo) center center no-repeat;
    background-size: cover;
    transition: .6s;
}
.content4{
    background: url(https://allpolus.com/uploads/posts/2014-10/1413446029_u2qjkgtozwtfuir.jpeg) top right no-repeat;
    background-size: cover;
    transition: .6s;
    cursor: pointer;
}
.content4:hover{
   ...

JavaScript

$(".content").click(function(){
		$(".content").addClass("dysplay-none1");
  	$(this).removeClass("dysplay-none1").addClass("opened");
});
$(document).on("click", '.close', function() {
		$(".content.opened").removeClass("opened");
    $(".content.dysplay-none1").removeClass("dysplay-none1");
});