JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<div>
  <span>Ticket</span>
</div>

CSS

body {
  margin: 0;
  padding: 40px;
}

div {
  background: #333;
  height: 180px;
  position: relative;
  width: 500px;
}

div:before {
  background: #fff;
  border-radius: 50%;
  box-shadow: 
    500px 0 0 0 #fff, 
    0 180px 0 0 #fff, 
    500px 180px 0 0 #fff,
    0 40px 0 -20px #fff,
    0 60px 0 -20px #fff,
    0 80px 0 -20px #fff,
    0 100px 0 -20px #fff,
    0 120px 0 -20px #fff,
    0 140px 0 -20px #fff,
    500px 40px 0 -20px #fff,
    500px 60px 0 -20px #fff,
    500px 80px 0 -20px #fff,
    500px 100px 0 -20px #fff,
    500px 120px 0 -20px #fff,
    500px 140px 0 -20px #fff;
  content: "";
  display: block;
  height: 50px;
  left: -25px;
  position: absolute;
  top: -25px;
  width: 50px;
}

span {
  border-radius: 20px;
  border: 3px solid #aaa;
  color: #fff;
  display: inline-block;
  font-size: 90px;
  left: 0;
  left: 50%;
  line-height: 1.5;
  padding: 0 40px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

span:before,
span:after {
  background: #333;
  color: #aaa;
  display: inline-block;
  font-size: 16px;
  left: 50%;
  padding: 0 10px;
  position: absolute;
}

span:before {
  content: "Ticketing";
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  top: 0;
}

span:after {
  bottom: 0;
  content: "Agency";
  -webkit-transform: translateX(-50%) translateY(50%);
  -moz-transform: translateX(-50%) translateY(50%);
  transform: translateX(-50%) translateY(50%);
}