<div id="root">
    <!-- This is your app. -->
</div>
<div id="portal">
    <!-- This is your notification. -->
</div>
body {
  background: #E6E6FA;
  color: #F08080;
}

.notification {
  background: #FFF0F5;
  color: #F08080;
  float: right;
  padding: 20px;
  border-radius: 4px;
}
class App extends React.Component {
  // control hiding / showing the notification with app state
  state = {
    showNotification: false,
  }

  componentDidMount() {
    // so that the notification popup is delayed
    window.setTimeout(() =>  {
      this.setState({
        showNotification: true,
      });
    }, 3000);
  }

  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        {
          this.state.showNotification && 
            <NotificationContainer>
              <Notification/>
            </NotificationContainer>
        }
      </div>
      
    );
  }
}

class NotificationContainer extends React.Component {
  render() {
    const domElement = document.getElementById('portal');
    return ReactDOM.createPortal(
      this.props.children,
      domElement
    );
  }
}

class Notification extends React.Component {
   render() {
      return (
        <div className="notification"> 
          The world says hello back!
        </div>
      )
   }
}

function renderReact() {
  ReactDOM.render(
    <App/>,
    document.getElementById('root')
  );
}

renderReact();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js