JSFiddle - React, Tailwind, and code Playground

by TigerAsks

HTML

<div class="logo"></div>

CSS

.logo {
  width: 120px;
  height: 120px;
  background-color: #ffbd2d;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo::before,
.logo::after {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
}

.logo::before {
  width: 60px;
  height: 60px;
  top: 0;
  left: 0;
}

.logo::after {
  width: 20px;
  height: 20px;
  top: 20px;
  left: 50%;
  margin-left: -10px;
}

.logo::before {
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #ffbd2d, 0 0 0 8px #fff, 0 0 0 10px #ffbd2d;
}

.logo::after {
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #ffbd2d, 0 0 0 8px #fff;
}