class Course extends React.Component {
  render() {
return (
<div  >

    <div className="coursecontent">
        <h3>{this.props.coursename}</h3>
        <h4> {this.props.status} {this.props.progress}</h4>
    </div>
    <button className="coursecontent">Start exercise</button>


</div>
);
}
}

class Welcomebox extends React.Component {

render() {
    return <h1>Welcome Naomi</h1>;
}
}

ReactDOM.render( < Welcomebox />, document.getElementById('welcomebox'));

class Coursebox extends React.Component {
   render() {
return (
<div className="box-field">


    <Course coursename="Negotiation" progress= "20%" status="Progress"/>
    <Course coursename="Frontend" progress="56%" status="Progress"/>
    <Course coursename="Food" status="Progress" progress="43%"/>

</div>

);
  }
}


class Newsbox extends React.Component {
render(){
    return (
        <div className="box-field" className="newsbox">
            <h3>News</h3>
        </div>
    );
    }
 }


 class Dashboardbox extends React.Component {
render(){
    return(
        <div className="dashboardbox">

</div>
    );
    }
 }

ReactDOM.render( < Dashboardbox />, document.getElementById('dashboardbox'));

.box-field,
.newsbox {
width: 45%;
background-color: lightgrey;
font-family: arial;
margin-left: 30px;
height: 80%;
padding: 5px 10px 10px 10px;
border-radius: 10px;
display: inline-block;

}

class Course extends React.Component {
  render() {
    return (
     <div class="panel panel-default">
       <div class="panel-heading">{this.props.coursename}</div>
         <div class="panel-body">
          <h4> {this.props.status} {this.props.progress}</h4>
            <button className="coursecontent">Start exercise</button>
         </div>
       </div>
    </div>
  );
 }
}