JSFiddle - React, Tailwind, and code Playground

HTML

<section class="services-border">
            <div class="services">
                <div id="service-1" class="service left">
                    <div class="service-info">
                        <img id="docs" src="assets/img/transparent.png">
                        <div class="service-info-text">
                            <button class="info-1 btn">
                                <span>i</span>
                            </button>
                            <h4>Наведение порядка<br> в делах</h4>
                            <span>Аудит документов и платежей на предмет:</span>
                            <ul>
                                <li><span>соблюдения необходимых формальностей ипроцедур,</span></li>
                                <li><span>наличия всех оригиналов договоров, актов,</span></li>
                                <li><span>легализация зависших платежей.</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="service-detail-info">
                        <div class="border border-left"></div>
                    </div>
                </div>
                <div id="service-2" class="service right">
                    <div class="service-info">
                        <img id="notebook" src="assets/img/transparent.png">
                        <div class="service-info-text">
                            <button class="info-2 btn">
                                <span>i</span>
                            </button>
                            <h4>Оптимизация<br> договорных отношений </h4>
                            <ul>
                                <li><span>Доработка, латание дыр и улучшение условий основных типовых договоров вашей компании</span></li>
                                <li><span>Оформление сотрудников на оптимальных условиях ведения деятельности и налогообложения</span></li>
                                <li><span>Составление...

CSS

.services-border {
  width: 100%;
  height: 540px;
}
/* line 40, ../scss/_content.scss */
.services-border > .services {
  width: 1240px;
  height: 270px;
  left: 50%;
  position: absolute;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/* line 46, ../scss/_content.scss */
.services-border > .services > .right {
  float: right;
}
/* line 48, ../scss/_content.scss */
.services-border > .services > .right > .service-info {
  right: 0;
}
/* line 51, ../scss/_content.scss */
.services-border > .services > .right > .service-detail-info {
  left: 0;
}
/* line 53, ../scss/_content.scss */
.services-border > .services > .right > .service-detail-info > .border {
  float: right;
  margin-right: 10px;
}
/* line 59, ../scss/_content.scss */
.services-border > .services > .left {
  float: left;
}
/* line 61, ../scss/_content.scss */
.services-border > .services > .left > .service-detail-info {
  right: 0;
}
/* line 63, ../scss/_content.scss */
.services-border > .services > .left > .service-detail-info > .border {
  float: left;
  margin-left: 10px;
}
/* line 69, ../scss/_content.scss */
.services-border > .services > .service {
  width: 620px;
  height: 270px;
}
/* line 72, ../scss/_content.scss */
.services-border > .services > .service > .service-info {
  position: absolute;
  z-index: 1;
  margin-top: 30px;
}
/* line 76, ../scss/_content.scss */
.services-border > .services > .service > .service-info > img {
  float: left;
}
/* line 79, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text {
  float: left;
  width: 480px;
  margin-left: 30px;
  color: #3f4147;
  font-size: 11pt;
  font-family: "GothamProReg";
}
/* line 86, ../scss/_content.scss */
.services-border > .services > .service > .service-info > .service-info-text > span {
  display: inline-block;
}
/* line 89, ../scss/_content.scss...

JavaScript

$(".info-1").on("click", function() {
    $("#service-2").css("visibility", "hidden");
    $("#service-4").css("visibility", "hidden");
    $(".info-4").closest(".service").children(".service-detail-info").fadeOut(500);
    $(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
        $("#service-2").css("visibility", "visible");
        $("#service-4").css("visibility", "visible");
    });
});
$(".info-2").on("click", function() {
    $("#service-1").css("visibility", "hidden");
    $("#service-3").css("visibility", "hidden");
    $(".info-4").closest(".service").children(".service-detail-info").fadeOut(500);
    $(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
        $("#service-1").css("visibility", "visible");
        $("#service-3").css("visibility", "visible");
    });
});
$(".info-3").on("click", function() {
    $("#service-4").css("visibility", "hidden");
    $("#service-2").css("visibility", "hidden");
    $(".info-1").closest(".service").children(".service-detail-info").fadeOut(500);
    $(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
        $("#service-2").css("visibility", "visible");
        $("#service-4").css("visibility", "visible");
    });
});
$(".info-4").on("click", function() {
    $("#service-1").css("visibility", "hidden");
    $("#service-3").css("visibility", "hidden");
    $(".info-2").closest(".service").children(".service-detail-info").fadeOut(500);
    $(this).closest(".service").children(".service-detail-info").fadeToggle(500, "linear", function(){
        $("#service-1").css("visibility", "visible");
        $("#service-3").css("visibility", "visible");
    });
});