JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<html>
<body>
<p><span class="cihi-custom-legend-circle"></span ><p class="textClass">&nbsp;Q1</p>
<p><span class="cihi-custom-legend-box"></span><p class="textClass">&nbsp;Q1</p>
</body>
</html>

CSS

.cihi-custom-legend-circle {
   height: 14px;
  width: 14px;
  background-color: #bbb;
  border-radius: 50%;
  border-style: solid;
  border-color: black;
  display: inline-block;
}

.cihi-custom-legend-box {
   height: 14px;
  width: 14px;
  background-color: #bbb;
  border-style: solid;
  border-color: black;
  display: inline-block;
}

.textClass {
  font-size: attr(data-fontsize)px;
}