JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<script src="https://cdn.correctiv.org/correctivlokal/aerzte/data/bw_fachaerzte.json"></script>
<script src="https://cdn.correctiv.org/correctivlokal/aerzte/data/bw_hausaerzte.json"></script>
<script src="https://cdn.correctiv.org/correctivlokal/aerzte/data/bw_hausaerzte.json"></script>

<!doctype html>
<html lang="de">



<body>

    <main id="main" class="main correctiv" name="main">
        <form id="target">
            <fieldset>
                <div class="container">
                    <input id="plz_query" class="input__plz" name="input" type="number" min="0" max="99999" step="1" placeholder="z.B. 70173" pattern="[0-9]{5}" required>
                    <label class="label__plz" for="plz_query">Tragen Sie hier Ihre Postleitzahl ein.</label>
                    <form id="target_gemeinde">
                        <select id="gemeinde_query" class="input__gemeinde" onchange=" this.dataset.chosen = this.value; " data-chosen="0" required>
                            <option value="hidden" hidden>Wählen Sie Ihre Gemeinde.</option>
                        </select>
                    </form>
                    <label class="label__gemeinde" for="gemeinde_query">Postleitzahl uneindeutig!</label>
                    <input id="send_query" class="submit__plz" type="submit" value="Suchen">
                    <div class="break"></div>
                </div>
            </fieldset>
        </form>

        <section id="disclaimer" class="recherche">
            <div class="container__image">
                <img src="image/correctiv-logo_inverted.jpg">
            </div>
            <div class="container__text">
                <p>Dies ist eine Recherche von CORRECTIV.Lokal zum Thema Ärztemangel in Deutschland. Sie beruht auf den Zahlen der Landes-KVen und deren Neuberechnung der Versorgungsgrade im Jahr 2019</p>

                <p>Sie können die Rohdaten jederzeit <a href="data/aerzte_merged.json">hier</a> einsehen. </p>

                <p>Mehr über das...

CSS

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*Fun begins*/

/* ===============================================
   ================== INPUT FORM =================
   =============================================== */

.correctiv.main {
    padding: 0px 15px;
    width: 100%;
    height: 850px;
    overflow: hidden;

}

@media screen and (max-width: 750px) {
    .correctiv.main {
        height: 900px;
    }
}

@media screen and (max-width: 550px) {
    .correctiv.main {
        height: 950px;
    }
}

.correctiv form {
    font-family: 'Open Sans';
    display: block;
    max-width: 800px;
    margin: 70px auto 70px auto;
}

.correctiv form fieldset {
    margin: 0;
    border: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.correctiv form fieldset .container {
    display: block;
    width: 425px;
    margin: 0 auto;
}

.input__plz {
    display: inline-block;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin: 0px 0px 10px 0px;
    padding: 10px 30px 10px 40px;
    max-width: 300px;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    border: 0;
    -webkit-box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
}

.input__plz:focus {
    color: #4b515d;
    -webkit-box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
}

.label__plz {
    font-size: 14px;
    position: absolute;
    margin: 14px auto auto -265px;
    pointer-events:...