Preview:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pop - Up</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
          Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 20rem;
      }

      .action {
        position: relative;
        padding: 8.3rem 0;
      }

      .default-btn-container {
        display: grid;
        text-align: center;
        justify-content: center;
      }

      .default-btn {
        padding: 0.9rem 1.7rem;
        background-color: #ec4899;
        border: none;
        outline: none;
        border-radius: 4px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
      }

      .popOver {
        display: none;
        background-color: #db2777;
        padding: 15px 9px;
        gap: 15px;
        border-radius: 10px;
        width: 20rem;
        color: #fff;
      }

      .popOver-title {
        text-transform: uppercase;
        font-weight: 600;
        color: rgb(202, 197, 197);
        border-bottom: 1px solid rgb(163, 161, 161);
        padding-bottom: 1rem;
      }

      .show-popOver {
        display: grid;
        transition: display 0.1s ease-in-out;
      }

      .pop-up {
        position: absolute;
        top: 10px;
        right: -110px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="action">
        <div class="default-btn-container">
          <button class="default-btn" id="default-button">Up pink</button>
        </div>
        <div class="popOver" id="popOver">
          <div class="popOver-title">Pink pop over title</div>
          <div>
            And here is some amazing content, it's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
    <script async>
      const defaultButton = document.getElementById('default-button');
      const popOver = document.getElementById('popOver');

      defaultButton.onclick = () => {
        popOver.classList.toggle('show-popOver');
        popOver.classList.add('pop-up');
      };
    </script>
  </body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter