<div id="root"></div>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.box {
  width: 300px;
  h1 {
    font-size: 20px;
    margin: 0 0 1rem 0;
  }
}
View Compiled
import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'

const images = [
  'https://images.pexels.com/photos/10295057/pexels-photo-10295057.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load',
  'https://images.pexels.com/photos/22614123/pexels-photo-22614123/free-photo-of-a-field-of-red-and-yellow-tulips.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
  'https://images.pexels.com/photos/23512402/pexels-photo-23512402/free-photo-of-three-candles-on-a-table-with-books.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load',
  'https://images.pexels.com/photos/22667947/pexels-photo-22667947/free-photo-of-plant-in-a-hall.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load'
]

function App() {
  const [image, setImage] = React.useState(0);
  return (
    <div>
      <div>
        <button onClick={() => setImage(0)}>1</button>
        <button onClick={() => setImage(1)}>2</button>
        <button onClick={() => setImage(2)}>3</button>
        <button onClick={() => setImage(3)}>4</button>
      </div>
      <img src={images[image]} />
    </div>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"))
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.