JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<div id="logo">
  <span id="first-d">D</span>
  <span id="of">Of</span>
  <span id="second-d">D</span>
</div>

CSS

#logo {
  position: relative;
  font-family: sans-serif;
  height: 450px;
  width: 590px;
}

span {
  display: inline-block;
  font-size: 450px;
}

span:nth-child(n+2) {
  margin-left: -65px;
}

#first-d {
  transform: scale(-1, 1);
}

#of {
  font-size: 270px;
  position: absolute;
  color: red;
  margin: 18% -36%;
}