React

by ken3desu

HTML

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

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.card,.card-content,.card-header,.card-footer {
  border: solid;
  margin: .5em;
  padding: .25em;
}

React

function HogeCard(props) {
  return <div className={'card'}>
    <div className={'card-header'}>Hoge</div>
    <div className={'card-content'}>
      <div>
        <p>define in Hoge</p>
        <p>define in Hoge</p>
      </div>
    </div>
    <div className={'card-footer'}></div>
  </div>;
}

function FugaCard(props) {
  return <div className={'card'}>
    <div className={'card-header'}><h1>Fuga</h1></div>
    <div className={'card-content'}>
      <p>define in Fuga</p>
    </div>
    <div className={'card-footer'}><h1>Fuga</h1></div>
  </div>;
}

function App() {
  return <div>
    <HogeCard/>
    <FugaCard/>
  </div>;
}

ReactDOM.render(<App/>, document.querySelector('#app'));