JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flip-container" >
    <div class="flipper" style="min-height:308px;">
        
        <article class="front">
            <img onclick="settings(this)" title="Nastavení Ankety" src="https://student.sps-prosek.cz/~eisead11it/web/Anketa/Obrazky/Settings.svg">
             <h1>Anketa č.7<br>&nbsp;&nbsp;&nbsp;Ponožky v číslech</h1>

            <p class="Nick">Firma: Ponožkáři</p>
            <form action="#" method="GET" name="qPonožky v číslech">
                <table>
                    <tbody>
                        <tr>
                            <td>Kolik máte ponožek?</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="number" id="input2.0" min="0" max="999" name="q16" required="required">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="submit" id="form2">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
            	
        </article>
        
        <article class="back">
            <h1>A</h1>
             <h1>Really</h1>
             <h1>long</h1>
             <h1>text</h1>
             <h1>node</h1>
             <h1>displayed?</h1>
        </article>
    </div>
</div>

CSS

/* if you dont like perspective delete this */
.flip-container {
    perspective: 1000;
    -webkit-perspective: 1000;
}
/* here is the trigger on hover */
 .flip-container:hover .flipper, .flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container, .front, .back {
     width: 246.66666px;
 
}
/* flip speed goes here */
 .flipper {
    -webkit-transition: 0.6s;
     -ms-transition: 0.6s;
     -o-transition: 0.6s;
     -moz-transition: 0.6s;
     transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

 .front, .back {
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

 .front {
    background:white;
    z-index: 2;
}

 .back {
     margin-left:-40px;
    background:white;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
article {
    position: relative;
    padding: 10px;
    margin: 20px;
    -webkit-box-shadow: 0px 0px 10px 3px rgba(000, 000, 000, 0.3);
    box-shadow: 0px 0px 10px 3px rgba(000, 000, 000, 0.3);
}
article>img {
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0.3;
}
article>img:hover{
    opacity: 0.6;
}