<div id="app"></div>
const styles = {
    border: "1px solid #ccc",
    borderRadius: "5px",
    padding: "17px",
    margin: "7px",
};

// This component creates a new tag called <Image>
function Image(props) {
    return (
        <div className="image">
            <img style={styles} src={props.src} alt={props.alt} />
        </div>
    );
}

ReactDOM.render(
    <Image src="https://placekitten.com/200/200" alt="cat" />,
    document.getElementById("app")
);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js