JSFiddle - React, Tailwind, and code Playground

by SlurmMcKenzie

HTML

<div class="popup">
<h2>
Wir laden zum Fest
</h2>
<div class="flyer">
<img src="https://crello.com/de/create/flyers/images/flyers-memorable-banner.png">
</div>

</div>

SCSS

.popup{
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.8);
  h2{
    width: fit-content;
    margin: auto;
  }
  .flyer{
  
 height: 80vh;
width: 60%;
    margin: auto;
  img{
      display: block;
      margin: auto;
      width: auto;
      height: 100%;
  }
    }
}

JavaScript

$( ".popup" ).click(function() {
  $( this ).fadeOut();
});