<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

div { border: 1px dotted black; }

.view  { display: grid; grid-template-rows: 1fr 2fr 9fr 3fr; }
.modal { display: grid; grid-template-rows: 1fr 2fr 2fr 3fr; }
.nav   { display: grid; grid-template-columns:  1fr 1fr 1fr; }
.control {
  display: grid;
  grid-template-areas: "left right" "left right" "footer footer";
}

.f1 { display: flex; justify-content: flex-start; align-items: flex-start; }
.f2 { display: flex; justify-content: center;     align-items: flex-start; }
.f3 { display: flex; justify-content: flex-end;   align-items: flex-start; }
.f4 { display: flex; justify-content: flex-start; align-items: center;     }
.f5 { display: flex; justify-content: center;     align-items: center;     }
.f6 { display: flex; justify-content: flex-end;   align-items: center;     }
.f7 { display: flex; justify-content: flex-start; align-items: flex-end;   }
.f8 { display: flex; justify-content: center;     align-items: flex-end;   }
.f9 { display: flex; justify-content: flex-end;   align-items: flex-end;   }

.

function Spacer({boxClass, text, color}) {
  return (
    <div style={{background: color}} className={boxClass}>
      {text}
    </div>
  )
}

function ComboBox({boxClass,data,text}) {
  const options = data.map(dt=> {
    return <option key={dt} value={dt}>{dt}</option>
  })
  return(
    <div className={boxClass}>
      <label>
        {text}
        <select>
          {options}
        </select>
      </label>        
    </div>
  )
}

function Button({boxClass, text}) {
  return (
    <div className={boxClass}>
      <button>{text}</button>
    </div>
  )
}

/*===========================================================*/
const datalist = ['Home', 'Setting', 'About'];

ReactDOM.render(
  (
  <div className="view">
    <Spacer text="Header" color="yellow" boxClass="f5" />
    <ComboBox data={datalist} boxClass="f6" text="navigate "/>
    <Spacer text="Content" color="wheat" boxClass="f5" />
    <div className="control">
      <Button text="Button" boxClass="f7" />
      <Button text="Button2" boxClass="f5" />
    </div>
  </div>
  ),
  document.getElementById('root')
);