JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <body>
    <div id="wrap" class="contentSection wrapper">
    <!-- SECTION 1 -->
            <div class="flip-container">
              <div class="flipper">
                <div class="front">
                  <div class="infowrapper first">
                    <div class="content img__wrap">
                      <img class="img__img" src="https://d2lsol421h6ysw.cloudfront.net/wp-content/uploads/2016/06/druckerei-rapp-druck-visitenkarte-heissfolienpraegung-silber.jpg">
                      <div class="img__description_layer">
                        <button class="hvr-radial-out buttonflip">
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hand-finger" width="50" height="50" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5" />
                            <path d="M11 11.5v-2a1.5 1.5 0 1 1 3 0v2.5" />
                            <path d="M14 10.5a1.5 1.5 0 0 1 3 0v1.5" />
                            <path d="M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                  <!-- front content -->
                </div>
                <div class="back">
                  <button class="hvr-radial-out fbutton"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-back" width="30" height="30" viewBox="0 0 24 20" stroke-width="1.5" stroke="black" fill="none"...

CSS

/* ALLGEMEINES */
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

body {
  height: 100%;
}

#wrap {
  scroll-margin-top: 130px;
}

button {
  cursor: pointer;
}

/* CONTENT */
/* allgemein */
.grid-container {
  display: grid;
}

.grid-container--fit {
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  grid-template-rows: 20em 20em 20em;
}

.grid-element {
  color: #fff;
  border: 2px solid;
  position: relative;
  overflow: hidden;
}

.uberschrift {
    margin-bottom: 1em;
}

.infowrapper {
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
}

.first {
  background-color: ;
  background-image: url ("https://d2lsol421h6ysw.cloudfront.net/wp-content/uploads/2016/05/druckerei-rapp-druck-offsetdruck-visitenkarte-blindpraegung.jpg");
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
}

.buttonflip {
  width: 100px;
  height: 100px;
  top: 0;
  border-radius: 50%;
  border: 2px solid white;
  background-color: rgba(0, 0, 0, 0) !important;
  overflow: hidden;
  color: white;
  transition: 0.1s;
  position: absolute;
  margin-top: 15em;
  outline: none;
}

.buttonflip:hover .icon {
  stroke: #1a1a1a;
  transition: 0.1s;
}

.infoflip {
  margin-top: -10em;
}

.infobild {
  margin-top: 10em;
}

/* flip the pane when hovered */

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 100%;
  height: 20em;
}


/* flip speed */

.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}


/* hide back of pane during swap */

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


/* front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

.fbutton {
  position: absolute;
  align-items: center;
  outline: none;
  border: 2px solid...

JavaScript

$('.flip-container .flipper button').click(function() {
  // flip back previous hovered element
  $('.flip-container.hover').toggleClass('hover');
  // flip current element
  $(this).closest('.flip-container').toggleClass('hover');
});

$('.fbutton').click(function() {
  // flip current element
  $(this).closest('.flip-container').removeClass('hover');
});