JSFiddle - React, Tailwind, and code Playground

by spritle

HTML

<span data-votes="10">votes</span> &nbsp;
<span data-comments="99">comments</span> &nbsp;

SCSS

//colors
$white: #ffffff;
$theme_green: #83d3c9;
$comments_bg: #8bb0cd;
$fontsize: 0.75em;
$shape_height: 2em;

[data-votes]:before {
  content: attr(data-votes);
  display: inline-block;
  font-size: $fontsize;
  width: $shape_height;
  height: $shape_height;
  line-height: $shape_height;
  text-align: center;
  //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  border-radius: 50%;
  background: $theme_green;
  vertical-align: middle;
  margin-right: 1px;
  margin-bottom: 5px;
  color: $white;
  text-transform: uppercase;
}

[data-comments]:before {
  content: attr(data-comments);
  display: inline-block;
  font-size: $fontsize;
  width: $shape_height;
  height: $shape_height;
  line-height: $shape_height;
  text-align: center;
  border-radius: 50%;
  background: $comments_bg;
  vertical-align: middle;
  margin-right: 1px;
  margin-bottom: 5px;
  color: $white;
  text-transform: uppercase;
}