JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="circle circle-large"><p>Lorem</p></div>
<div class="circle circle-medium"><p>Ipsum</p></div>
<div class="circle circle-small"><p>Dolar</p></div>
<div class="circle circle-tiny"><p>Sit amet</p></div>

SCSS

.circle {
  background: #c8c8c8;
  border-radius: 50%;
  text-align: center;
}

p {
  display: inline-block;
  vertical-align: middle;
}

@mixin circle-($size, $value) {
  .circle-#{$size} {
    width: $value;
    height: $value;
  }
}

@include circle-('large', 512px);
@include circle-('medium', 256px);
@include circle-('small', 128px);
@include circle-('tiny', 64px);