React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

body {
  // background: #20262E;
  font-family: Helvetica;
  margin: 0;
}

.section {
  min-height: 300px;
  padding: 50px;
}

.light {
  background: white;
}

.dark {
  background-color: darken(#20262E, 7%);
  background-image: url(
    https://i.dlpng.com/static/png/1481489_preview_preview.png
  );
  background-opacity: 0.2;
  color: white;
}

.section-title {
  font-size: 30px;
  margin-bottom: 20px;
}

.section-title-underline {
  width: 100px;
  height: 2px;
  background-color: tomato;
}

.section-title__primary {
  font-weight: bold;
}

React

class TodoApp extends React.Component {
  render() {
    return (
      <div>
        <section class='section light'>

        </section>
        <section class='section dark'>
          <h3 class='section-title section-title__primary'>
            One Two Three
          </h3>
          <div class='section-title-underline' />
        </section>
        <section class='section light'>

        </section>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))