JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id="btn-lokal-anmelden" style="width: 100px; height: 100px; background-color: red;">
</div><!-- https://jsfiddle.net/loeneberga/37svj4gb/45/ -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
  background-color: #fd5064;
  font-family: inherit;
  font-size: inherit;
  color: #fff;
  clear: left;
}
  input#mc-embedded-subscribe.button {
  background-color: #1d4664;
  border-radius: 0;
}
.hide {
  display: none;
}
.show {
  display: block;
}
</style>
<div id="mc_embed_signup">
<form action="https://correctiv.us12.list-manage.com/subscribe/post?u=74b23e1b0af8c36eb217e01c1&amp;id=0f6b751766" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<h2>Mitmachen</h2>
<div class="indicates-required"></div>
<div class="mc-field-group">
	<label for="mce-FNAME">Vorname (optional)</label>
	<input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="z.B. Hans">
</div>
<div class="mc-field-group">
	<label for="mce-LNAME">Nachname (optional)</label>
	<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="z.B. Leyendecker">
</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Emailadresse
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="z.B. [email protected]">
</div>
<div class="mc-field-group input-group">
    <strong>Tätigkeit
</strong>
    <ul><li><input type="radio" value="Journalist" name="PROFESSION" id="mce-PROFESSION-0"><label for="mce-PROFESSION-0">Journalist</label></li>
<li><input type="radio" value="Experte" name="PROFESSION" id="mce-PROFESSION-1"><label for="mce-PROFESSION-1">Experte</label></li>
</ul>
</div>
<div class="mc-field-group">
	<label for="mce-MEDIUM">Medium (optional)</label>
	<input type="text" value="" name="MEDIUM" class="" id="mce-MEDIUM"...

CSS

#gallery-1 img {
  border: 0px !important;
}

div#mc_embed_signup, 
div#mc_embed_signup form, 
div#mc_embed_signup form div,
div#mc_embed_signup form div h2,
div#mc_embed_signup form div div {
  height: 0px;
  min-height: 0px;
}



div#mc_embed_signup.form-fadein, 
div#mc_embed_signup.form-fadein form, 
div#mc_embed_signup.form-fadein form div,
div#mc_embed_signup.form-fadein form div h2,
div#mc_embed_signup.form-fadein form div div {
  height: auto;
  min-height: auto;
}

.wm-flex {
  display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: flex-start;
}

input.activ:hover, input.inactiv:hover {
  cursor: pointer;
}

input.activ.wg-button_all:hover {
  cursor: auto;
}

input.activ {
  background-color: #fff;
  transition: .5s
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}

input.inactiv {
  background-color: #f5f5f5;
  transition: .5s
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}

input.wg-button {
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  width: 20%;
  border-radius: 0;
  border: 0px transparent;
  padding: 20px 0;
}

.wg-button_klein, .wg-button_all {
  display: none;
}

@media only screen and (max-width: 1050px) {
  input.wg-button#wgb-hamburg {
    display: none;
  }
  input.wg-button_klein#wgb-hamburg_klein, input.wg-button_all.wg-button {
    display: inline-block;
  }
}

@media only screen and (max-width: 600px) {
  input.wg-button {
    font-size: 85%;
  }
}

@media only screen and (max-width: 500px) {
  input.wg-button {
    font-size: 80%;
  }
}

@media only screen and (max-width: 400px) {
  input.wg-button {
    font-size: 75%;
  }
}

@media only screen and (max-width: 350px) {
  input.wg-button {
    font-size: 70%;
  }
}

input.wg-button:focus {
    outline: none;
}

input.wg-button_all {
  width: 100%;
  font-size: 175%;
  background-color: #f5f5f5;
}

.wg-container {
  height: auto;
  width: 100%;
 ...

JavaScript

function wghamburg() {
  var element = document.getElementById("wgb-hamburg");
    element.classList.add("activ");
    element.classList.remove("inactiv");
    var element = document.getElementById("wgb-hamburg_klein");
      element.classList.add("inactiv");
      element.classList.remove("activ");
    var element = document.getElementById("wgb-berlin");
      element.classList.add("inactiv");
      element.classList.remove("activ");
      var element = document.getElementById("wgb-duesseldorf");
        element.classList.add("inactiv");
        element.classList.remove("activ");
        var element = document.getElementById("wgb-heidenheim");
          element.classList.add("inactiv");
          element.classList.remove("activ");
          var element = document.getElementById("wgb-minden");
            element.classList.add("inactiv");
            element.classList.remove("activ");
  var element = document.getElementById("wg-hamburg");
    element.classList.add("show");
    element.classList.remove("hide");
    var element = document.getElementById("wg-berlin");
      element.classList.add("hide");
      element.classList.remove("show");
      var element = document.getElementById("wg-duesseldorf");
        element.classList.add("hide");
        element.classList.remove("show");
        var element = document.getElementById("wg-heidenheim");
          element.classList.add("hide");
          element.classList.remove("show");
          var element = document.getElementById("wg-minden");
            element.classList.add("hide");
            element.classList.remove("show");
}
function wghamburgklein() {
  var element = document.getElementById("wgb-hamburg");
    element.classList.add("inactiv");
    element.classList.remove("activ");
    var element = document.getElementById("wgb-hamburg_klein");
      element.classList.add("activ");
      element.classList.remove("inactiv");
    var element = document.getElementById("wgb-berlin");
     ...