React

index.html

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="http://localhost/React/intro/box.js"></script>
<link rel="stylesheet" href="http://localhost/React/intro/style.css">
</head>

<body>

<div id="p1">
</div>
<div id="p2">
</div>

</body>
</html>

box.js

<script>

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

}

ReactDOM.render(<Person name="Max" age="28"/>, document.querySelector('#p1'));

ReactDOM.render(<Person name="Manu" age="29"/>, document.querySelector('#p2'));

</script>

style.css

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

}