JSFiddle - React, Tailwind, and code Playground

by Chad Drummond

HTML

<div class="circle-banner">
  <div class="circle-banner__container">
    <h1 class="circle-banner__content">Available Now!</h1>
  </div>
</div>

SCSS

$borderColor: #000;
$borderStyle: dashed;
$borderWidth: 1px;
$borderSpacing: 5px;
$bannerBgColor: #fc0;
$bannerSize: 200px;
$transform: rotate(10deg);

.circle-banner {
  position: relative;
  border-radius: 100%;
  padding: $borderSpacing;
  border: $borderStyle $borderWidth $borderColor;
  width: $bannerSize;
  height: $bannerSize;
}

.circle-banner__container {
  background-color: $bannerBgColor;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  display: flex;
}

.circle-banner__content {
  margin: auto;
  color: white;
  text-align: center;
  font-family: Georgia;
  transform: $transform;
}