JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spoiler-toptext">spoiler-toptext</div>
<div id="spoiler4jobs" style="display:none;">
    <div class="spoiler-zusatzleiste">spoiler-zusatzleiste</div>
    <div style="margin:20px 0; border-bottom:1px solid #ccc;padding:0 0 20px 0;">
        inhalt
    </div>
</div>
<button onclick="document.all.spoiler4jobs.style.display=''" class="bt-spoiler-jobs">bt hier</button>

CSS

.bt-spoiler-jobs {
font-size: 16px;
padding:3px 35px;
width:260px;
cursor: pointer;
background-color: #0072ff;
color: #fff;
display: block;
padding: 10px;
text-align: center;
text-transform: none;
border: none;
margin: 20px 0 0 0;
}

.bt-spoiler-jobs:hover {
font-size: 16px;
padding:3px 35px;
width:260px;
cursor: pointer;
background-color: #0000e2;
color: #fff;
display: block;
padding: 10px;
text-align: center;
text-transform: none;
}

#spoiler4jobs {
padding: 0 0 70px 0;
}
.angebot-gfx-pce {
width: 245px;
margin:0 20px 0 0;
}
.spoiler-toptext {
font-size: 23px;
margin:0 0 10px 0;
color: #000;
font-family: Maven Pro;
font-style: normal;
font-weight: normal;
}
.spoiler-toptext_light {
font-size: 16px;
margin:0 0 40px 0;
color: #777;
font-family: Maven Pro;
font-style: normal;
font-weight: normal;
}
.wpcf7-list-item first {
display: block;
float: left;
margin: 10px 20px 20px 0 !important;
width: 245px;
font-size: 20px !important;
color: #666;
}
.wpcf7-list-item {
display: block;
float: left;
margin: 10px 20px 20px 0 !important;
width: 245px;
font-size: 20px !important;
color: #666;
}
.wpcf7-list-item last {
display: block;
float: left;
margin: 10px 20px 20px 0 !important;
width: 245px;
font-size: 20px !important;
color: #666;
}
span.wpcf7-not-valid-tip {
margin: 0 0 30px 0 !important;
}