<div id="app"></div>
.undo-redo-btns{
  display:flex;
  gap:1em;
  justify-content:center;
  margin-bottom:1em;
}

.counter-section{
  display:flex;
  gap:1em;
  justify-content:center;
}

/*
* https://frontendeval.com/questions/undoable-counter
*
* Create a simple counter with undo/redo functionality
*/
import {useState} from "https://esm.sh/react";

const App = () => {
  const [count,setCount]=useState(0);
  return (
    <div>
      <div className="undo-redo-btns">
        <button>Undo</button>
        <button>Redo</button>
      </div>
      <div className="counter-section">
        <button>-100</button>
        <button>-10</button>
        <button>-1</button>
        <p></p>
        <button>+100</button>
        <button>+10</button>
        <button>+1</button>
      </div>
    </div>
  )
}

ReactDOM.render(<App />, 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/17.0.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js