React.js 4

<script type="text/babel">
        (() =>{

            function Counter(){
            return <div>0</div>
        }

            ReactDOM.render(
                <div>
                    <Counter/>
                    <Counter/>
                    <Counter/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <div>0 {props.color}</div>
        }

            ReactDOM.render(
                <div>
                    <Counter color="red"/>
                    <Counter color="yellow"/>
                    <Counter color="blue"/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <div style={{backgroundColor:props.color}}>0</div>
        }

            ReactDOM.render(
                <div>
                    <Counter color="red"/>
                    <Counter color="yellow"/>
                    <Counter color="blue"/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <li style={{backgroundColor:props.color}}>0</li>
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

[ccs]
body {
font-size:16px;
font-family: Verdana, sans-serif;
}

.container {
width: 330px;
margin: 20px auto;
}

.container ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap:wrap;
}

.container li {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
cursor: pointer;
user-select: none;
border-radius: 5px;
margin: 0 5px 10px;
}
[/ccs]