<div id="root"></div>
.App{
  background:#f5f5f5;
  height:90vh;
  margin:auto;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-family:Roboto;
}

button{
  padding: 1em;
    border: 5px solid pink;
    background: white;
    color: #E91E63;
    font-weight: bold;
    cursor: pointer;
    transition: box-shadow .5s ease;
    box-shadow: 0px 0px 4px 0px #909090;
  
}
button:hover{
  box-shadow:0px 0px 0px 0px #909090;
}
.message-box{
      max-width: 500px;
    text-align: justify;
    font-size: 12px;
    line-height: 1.5;
    padding: 3em;
    background: #dedede;
    margin-top: 1em;
    box-sizing: border-box;
    font-weight: 600;
}

.message-box{
  opacity:0;
  transition:opacity .25s ease;
}
.fade-enter-active{opacity:0;}
.fade-enter-done{opacity:1;}
.fade-exit-active{opacity:1;}
.fade-exit-done{opacity:0;}
const {CSSTransition} = ReactTransitionGroup;

class Example extends React.Component {
  
    constructor(props){
      super(props)
      this.state = {
        active:false
      }
    }
  render(){
      const {active} = this.state
      return(
          <div className="App">
            <button className="button" onClick={()=> this.setState({active: !active})}>
              Click Me
          </button>
        <CSSTransition in={active} timeout={{
              enter:500,
                exit:250
            }} classNames="fade">
            <div className="message-box">
                                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
          </CSSTransition>
          </div>
      )
  }
}


ReactDOM.render(<Example/>, document.getElementById("root"))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/4.0.0/react-transition-group.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.2.0/styled-components.min.js