JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

CSS

.person {
  display: inline-block;
  border: 1px solid #eee;
  box-shadow: 0 2px 2px #ccc;
  width: 200px;
  padding: 20px;
  margin: 10px;
}
h1 {
  margin: 0;
}

Babel + JSX

function Person(props){
  return (
  <div className='person'>
    <h1>{props.name}</h1>
    <p>Your Age: {props.age}</p>
  
  </div>
  );
}

var app = (
  <div>
    <Person name='Max' age='29' />
    <Person name='Mariya' age='28' />
  </div>
);

ReactDOM.render(app,
  document.querySelector('#app'));