Markup for the mini stopwatch app using the WordPress block editor

stopwatch-markup.html

<!-- wp:group {"className":"stopwatch","layout":{"type":"constrained","contentSize":"400px"}} -->
<div class="wp-block-group stopwatch"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}},"border":{"radius":"15px"}},"backgroundColor":"accent-5","layout":{"type":"constrained","contentSize":"400px"}} -->
<div class="wp-block-group has-accent-5-background-color has-background" style="border-radius:15px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:outermost/icon-block {"iconName":"wordpress-swatch"} -->
<div class="wp-block-outermost-icon-block"><div class="icon-container" style="width:48px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z"></path></svg></div></div>
<!-- /wp:outermost/icon-block -->

<!-- wp:heading {"className":"stopwatch__time","uid":"gradient-text-26316"} -->
<h2 class="wp-block-heading stopwatch__time">00:00:00:000</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"stopwatch__controls","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group stopwatch__controls"><!-- wp:buttons {"className":"stopwatch__buttons"} -->
<div class="wp-block-buttons stopwatch__buttons"><!-- wp:button {"backgroundColor":"accent-4","className":"stopwatch__button stopwatch__button\u002d\u002dstart is-style-outline"} -->
<div class="wp-block-button stopwatch__button stopwatch__button--start is-style-outline"><a class="wp-block-button__link has-accent-4-background-color has-background wp-element-button">Start</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"base-3","className":"stopwatch__button stopwatch__button\u002d\u002dstop is-style-outline"} -->
<div class="wp-block-button stopwatch__button stopwatch__button--stop is-style-outline"><a class="wp-block-button__link has-base-3-background-color has-background wp-element-button">Pause</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"accent-3","className":"stopwatch__button stopwatch__button\u002d\u002dreset is-style-outline"} -->
<div class="wp-block-button stopwatch__button stopwatch__button--reset is-style-outline"><a class="wp-block-button__link has-accent-3-background-color has-background wp-element-button">Reset</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->