JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/simply-reactive/cdn/simply-reactive.js"></script>
<div id="root"></div>

JavaScript

const { createAtom, createEffect, createSelector } = simplyReactive;

const A = createAtom({
  default: 2,
});

const B = createAtom({
  default: 3,
});

const Product = createSelector({
  get: () => A.get() * B.get(),
});


const createElement = (type, { getText, onClick, children }) => {
  const El = document.createElement(type);
  if (children) {
  	children.forEach(child => El.append(child));
  }
  if (onClick) {
    El.onclick = onClick; 
  }
  createEffect(() => {
  	if (getText) {    
  		El.innerText = getText();
    }
	});
  return El;
}

const App = createElement('div', {
	children: [
  	createElement('button', {
      getText: () => 'A++',
      onClick: () => A.set(v => v + 1),
    }), 
    ' ', 
    createElement('button', {
      getText: () => 'B++',
      onClick: () => B.set(v => v + 1),
    }), 
    createElement('p', {
      children: [
      	createElement('span', {
          getText: A.get,
        }), 
        ' * ', 
        createElement('span', {
          getText: B.get,
        }), 
        ' = ', 
        createElement('span', {
          getText: Product.get,
        })
      ]
    })
 	]
});

document.body.append(App);