JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <button>Sehr-Gut</button>
        <button>Gut</button>
        <button>Befriedigend</button>
        <button>Ausreichend</button>
        <button>Mangelhaft</button>
    </div>
<div>
    <button>ABC</button>
</div>

CSS

.md-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 50%;
        max-width: 630px;
        min-width: 320px;
        height: auto;
        z-index: 2000;
        /* visibility: hidden; */
        text-align: center;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }


    .md-content {
        color: #fff;
        background: #e74c3c;
        position: relative;
        border-radius: 3px;
        margin: 0 auto;
    }