JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<h2>Full hour</h2>

<dl>
  <dt>unicode characters</dt>
  <dd>🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛</dd>
  <dt>escaped characters</dt>
  <dd>&#x1F550;&#x1F551;&#x1F552;&#x1F553;&#x1F554;&#x1F555;&#x1F556;&#x1F557;&#x1F558;&#x1F559;&#x1F55A;&#x1F55B;</dd>
  <dt>from CSS</dt>
  <dd class="fullhour"></dd>
</dl>

<h2>Half hour</h2>

<dl>
  <dt>unicode characters</dt>
  <dd>🕜🕝🕞🕟🕠🕡🕢🕣🕤🕥🕦🕧</dd>
  <dt>escaped characters</dt>
  <dd>&#x1F55C;&#x1F55D;&#x1F55E;&#x1F55F;&#x1F560;&#x1F561;&#x1F562;&#x1F563;&#x1F564;&#x1F565;&#x1F566;&#x1F567;</dd>
  <dt>from CSS</dt>
  <dd class="halfhour"></dd>
</dl>

CSS

.fullhour:before {
  content: "\1F550\1F551\1F552\1F553\1F554\1F555\1F556\1F557\1F558\1F559\1F55A\1F55B";
}

.halfhour:before {
  content: "\1F55C\1F55D\1F55E\1F55F\1F560\1F561\1F562\1F563\1F564\1F565\1F566\1F567";
}