<link href="https://fonts.googleapis.com/css2?family=Gotu&display=swap" rel="stylesheet">
<div id="root">
</div>
<img src="https://goo.gl/Umyytc" class="y"/>
<div class="text-center">
    <h3>Designed and Coded By-</h3>
    <h4>G.S.</h4>
  </div>

body{
  font-family: 'Gotu', sans-serif;
  color:white;
  text-align:center;
  background: url("https://www.xmple.com/wallpaper/striped-dual-blue-gingham-black-1920x1080-c2-000000-4682b4-l-328-a-60-f-13.svg")
}
.col-sm{
  height:50vh;
}
.x{
  background:#2471A3;
}
.y{
  width:360px;
}
.text-center{
  margin-top:25px;
}

const initialMarkdown=`# Welcome to my React Markdown Previewer!
`
marked.setOptions({
  breaks: true,
});

class App extends React.Component{
  constructor(props)
  {
  super(props)
  this.state={
    markdown:initialMarkdown
  }
  }
  handleChange =(e) => this.setState({markdown: e.target.value})
  
   
  
  render(){
    return (
      <div className="container">
    <h1>Markdown Previewer</h1>
        <div className='row'>
          <div className="col-sm">
            <textarea className="col-sm x" value={this.state.markdown} onChange={this.handleChange} />
          </div>
          <div className="col-sm">
            < div className="text-center col-sm" dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}}/>
          </div>
          </div>
        </div>
    )
  }
}
ReactDOM.render(<App/>, document.getElementById('root'))