JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class="box">
    <p class="richtung"> Überschrift 1</p>
		  <h3 class="name"> TEST1 </h3>
      <div class="panel">
			  <div class="beschreibung">
			    TEXT1
			  </div>
			  <div class="linkattribut">
			  Link: <a href="#" target="_blank"> testlink1 </a>
			  </div>
			</div>
		  <p class="space"> &nbsp; </p>
		  <h3 class="name"> TEST2 </h3>
      <div class="panel">
			  <div class="beschreibung">
			    TEXT2
			  </div>
			  <div class="linkattribut">
			  Link: <a href="#" target="_blank"> testlink2 </a>
			  </div>
			</div>
		  <p class="space"> &nbsp; </p>
		  <h3 class="name"> TEST3 </h3>
      <div class="panel">
			  <div class="beschreibung">
			    TEXT3
			  </div>
			  <div class="linkattribut">
			  Link: <a href="#" target="_blank"> testlink3 </a>
			  </div>
			</div>
		  <p class="space"> &nbsp; </p>
		  <h3 class="name"> TEST4 </h3>
      <div class="panel">
			  <div class="beschreibung">
			    TEXT4
			  </div>
			  <div class="linkattribut">
			  Link: <a href="#" target="_blank"> testlink4 </a>
			  </div>
			</div>
		  <p class="space"> &nbsp; </p>
  </div>
  <div class="box">
    <p class="richtung"> Überschrift 2</p>
		  <h3 class="name"> TEST5 </h3>
      <div class="panel">
			  <div class="beschreibung">
			    TEXT5
			  </div>
			  <div class="linkattribut">
			  Link: <a href="#" target="_blank"> testlink5 </a>
			  </div>
			</div>
		  <p class="space"> &nbsp; </p>
		  <h3 class="name"> TEST6 </h3>
      <div class="panel">
			  <div class="beschreibung">
			    TEXT6
			  </div>
			  <div class="linkattribut">
			  Link: <a href="#" target="_blank"> testlink2 </a>
			  </div>
			</div>
		  <p class="space"> &nbsp; </p>
		  <h3 class="name"> TEST7 </h3>
      <div class="panel">
			  <div class="beschreibung">
			    TEXT7
			  </div>
			  <div class="linkattribut">
			  Link: <a href="#" target="_blank"> testlink7 </a>
			  </div>
			</div>
		  <p class="space"> &nbsp; </p>
		  <h3 class="name">...

CSS

#container {
  display: flex;
  justify-content: space-around;
}

.box {
  border: 0.1vw solid black;
  border-radius: 1vw;
  width: 25vw;
  height: 40vw;
}

.richtung {
  padding: 0.5vw 0 0.5vw 0;	
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
}

.panel {
  display: none;
  margin: 0 auto 0 auto;
  width: 20vw;
  border-right: 0.1vw solid black;
  border-left: 0.1vw solid black;
  border-bottom: 0.1vw solid black;
  box-sizing: border-box;
}

.space {
    height: 0.4vw;
}

.name {
	font-size: 1vw;
	margin:0 auto 0 auto;
	padding-top: 0.1vw;
	width: 20vw;
	height: 1.6vw;
	text-align: center;
	cursor: pointer;
	background-color: YellowGreen;
	border: 0.1vw solid black;
	box-sizing: border-box;
}

.name:hover {
	background-color: black;
	color: YellowGreen;;
}

.beschreibung {
  padding-top: 0.3vw;
  width: 20vw;
  font-size: 1vw;
  text-align: center;
}

.linkattribut {
  padding: 0.8vw 1vw 0.8vw 1vw;
  width: 20vw;
  font-size: 1vw;
  font-weight: bold;
  box-sizing: border-box;
}


  .linkattribut a{
  padding-left: 3vw;
  list-style: none;
  text-decoration: none;
  color: #2cb5e8;
}

.linkattribut a:hover {
  color: red;
  letter-spacing: 0.1vw;
}

JavaScript

$(function () {
      $('.name').click(function () {
        $(this).next('div').slideToggle();
        $(this).parent().siblings().children().next().slideUp();
        return false;
        });
      });