JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div id="logo">
  <b></b><i></i>
</div>

CSS

body {
  background-color: #fff;
}

#logo {
  margin: 100px auto;
  width: 400px;
  overflow: hidden;
}

#logo *,
#logo *:before,
#logo *:after {
  content: "";
  display: block;
}
#logo *:before,
#logo *:after {
  position: absolute;
  border: 10px solid currentColor;
  box-shadow: 0 0 0 5px #FFF;
  width: 30px;
  border-radius: 20px;
  height: 50px;
  transform-origin: 50% 5px;
}
#logo *:before {
  transform: rotate(45deg);
}
#logo *:after {
  transform: rotate(-45deg);
}
#logo b {
  width: 100%;
  height: 40px;
  overflow: hidden;
}
#logo i {
  width: 100%;
  height: 40px;
  margin-top: 40px;
  overflow: hidden;
  color: red;
}
#logo i:before,
#logo i:after {
  margin-top: -40px;
}