JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="TFTBmodalContainer">
  <style>
    #TFTBmodalContainer {
      position: fixed;
      display: table;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
    }
    
    #TFTBmodalContainer .TFTBmodalBG {
      display: table-cell;
      background: rgba(0, 0, 0, 0.8);
      text-align: center;
      vertical-align: middle;
    }
    
    #TFTBmodalContainer .TFTBmodalBG .TFTBmodal {
      background: white;
      padding: 30px;
      display: inline-block;
      border-radius: 3px;
      font-weight: normal;
      position: relative;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    }
    
    #TFTBmodalContainer .TFTBmodalBG .TFTBmodal h2 {
      font-size: 25px;
      line-height: 25px;
      margin-top: 0;
      margin-bottom: 15px;
    }
    
    #TFTBmodalContainer .TFTBmodalBG .TFTBmodal p {
      font-size: 18px;
      line-height: 22px;
    }
    
    #TFTBmodalContainer .TFTBmodalBG .TFTBmodal a {
      display: block;
      width: 200px;
      height: 30px;
      font-size: 15px;
      line-height: 30px;
      text-transform: capitalize;
      text-align: center;
      margin: 5px auto 0;
      text-decoration: none;
      color: #be2025;
      border: 3px solid #be2025;
      clear: both;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-weight: bold;
    }
    
    #TFTBmodalContainer .TFTBmodalBG .TFTBmodal a:hover {
      background: #be2025;
      color: #ffffff;
    }
  </style>
  <div class="TFTBmodalBG">
    <div class="TFTBmodal">
      <h2>Duplicate To Another Funnel</h2>
      <p>The "Duplicate To" option is only available in the plus edition.</p>
      <a href="https://thefunneltoolbox.com/the-helper-plus">Go Plus!</a>
    </div>
  </div>
</div>