JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<p>Vyzvedněte si <a class="openModal" href="#couponRedeem1">váš kupón</a></p>
<div id="couponRedeem1" class="modaloverlay">
  <div class="couponModal">
    <a href="#close" class="close">&times;</a>
      <header>Váš kupón pro hru XXX YYY ZZZ.</header>    
    <div>
      <strong>Nejprve potřebujeme odsouhlasit podmínky použití:</strong><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p><p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p>
    </div>
  </div>
</div>

CSS

* {box-sizing: border-box}
body { background-color: tomato; font-family: sans-serif; padding: 5em;}

.modaloverlay { background: rgba(0, 0, 0, 0.8); opacity: 0;
  bottom: 0; left: 0; right: 0; top: 0;
  pointer-events: none;  position: fixed;  z-index: -1;  display: none;}
.modaloverlay:target {  display: block;  opacity: 1;  pointer-events: auto;  z-index: 99999;
}
.modaloverlay .couponModal { background-color: white; min-height: 300px; max-height:calc(100% - 2em); position: relative;  margin: 2em; padding: 3em;  overflow-y: scroll; -webkit-overflow-scrolling: touch;
display:flex; flex-direction:column}
.modaloverlay .couponModal header {font-weight:600; font-size:1.125em; padding: 0 0 .5em}
.modaloverlay .couponModal > div { padding: 1em; overflow-y: scroll; border: 2px solid #ea0000; width: 100%; height: 100%;}
.modaloverlay .close { background-color: #ea0000; color: white; font-size: 24px; padding: 8px 12px;  position: absolute; right: 0; text-align: center; text-decoration: none; top: 0; z-index: 1;}