JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-content show">
			<p>
				<span>Box 1 Inhalt - default</span>
			</p>
		</div>
    
    
    <div class="boxes">
    
      <div id="box-1"></div>
      <div id="box-2"></div>
      <div id="box-3"></div>
      <div id="box-4"></div>
      <div id="box-5"></div>
      
    </div>

CSS

.box-content {
  display: none;
  background: rebeccapurple;
  padding: 24px;
  color: #fff;
  
}

.show {
  display: flex;
}

.boxes div {
  width: 80px;
  height: 80px;
  background: #ccc;
  margin: 4px;
}

.boxes {
  display: flex;
  flex-direction: row;
  padding: 8px;
  
}

JavaScript

$("#box-1").click(function () {
        $('.box-content').addClass('show');
        $('.box-content').children('p').empty().append('Box 1 Inhalt');
    });

    $("#box-2").click(function () {
        $('.box-content').addClass('show');
        $('.box-content').children('p').empty().append('Box 2 Inhalt');
    });

    $("#box-3").click(function () {
        $('.box-content').addClass('show');
        $('.box-content').children('p').empty().append('Box 3 Inhalt');
    });

    $("#box-4").click(function () {
        $('.box-content').addClass('show');
         $('.box-content').children('p').empty().append('Box 4 Inhalt');
    });

    $("#box-5").click(function () {
        $('.box-content').addClass('show');
        $('.box-content').children('p').empty().append('Box 5 Inhalt');
    });