JSFiddle - React, Tailwind, and code Playground

by spitfire378

HTML

<div class="circle">
  FDM test test test test test
</div>

SCSS

html, body {
  height: 100%;
}

body {
  margin: 50px;
  background-color: blue;
  position: relative;

  
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
          opacity: .1;
      background-image: url('https://d2ffutrenqvap3.cloudfront.net/items/0z1U430R1t2U3w1h1I0M/logo-cloud-temple-white.svg');
      background-repeat: no-repeat;
      background-position: bottom right; 
      background-size: 200px;
  }
}

$main-color: blue;

.circle {
  $size: 150px;
  width: $size;
  height: $size;
  text-align: center;
  background-color: lighten($main-color, 10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
  position: relative;
  color: white;
   
   &:after {
     $offset: -10px;
    content: '';
    position: absolute;
    top: $offset;
    right: $offset;
    bottom: $offset;
    left: $offset;
    background-color: red;
    border-radius: 50%;
    z-index: -1;
    background: linear-gradient(to bottom, red, blue);
   }
}