React

HTML

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

CSS

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

#app {
}

.card {
   	background: white;
    padding: 30px;
    border-radius: 10px;
    width: 130px;
    display: block;
    float: left;
    margin: 0 10px;
    color: #555555;
}

.card strong {
  display: block;
  font-size: 20px;
  margin-bottom: 20px;
  color: #000000;
}

React

class TodoApp extends React.Component {
  render() {
    return (
      <div>
         <div className="App">
      <Card title="Card 1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Card>
      <Card title="Card 2">
        Donec dapibus porta sem, a tincidunt neque imperdiet non. Nunc ligula
        nibh, faucibus a ex nec, ullamcorper tristique libero. Vestibulum
        finibus, mauris tincidunt iaculis tristique, lacus ipsum egestas justo.
      </Card>
      <Card title="Card 3">
        Mauris ultrices tempus orci id suscipit. Integer feugiat commodo felis,
        ac euismod lacus faucibus sed.{" "}
      </Card>
    </div>
      </div>
    )
  }
}

const Card = ({ title, children }) => {
	return (
  	<div className="card">
  	  <strong>{title}</strong>
      {children}
  	</div>
  )
};

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