JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

const { render } = easyRender;
const { createAtom, createEffect, createSelector } = simplyReactive;

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

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

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

const RenderEffect = createEffect(() => render`
  <p>
  	<span>${A.get()}</span>
    <i style=${{padding: '5px'}}>*</i>
    <span>${B.get()}</span>
    <i style=${{padding: '5px'}}>=</i>
    <span>${Product.get()}</span>
  </p>
  <button click=${() => A.set(v => v + 1)}>A++</button>
  <button click=${() => B.set(v => v + 1)}>B++</button>
  <button click=${() => (A.set(2), B.set(3))}>Reset</button>
`);