JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> 
<div class="quote">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Bug_icon_-_Noun_project_198.svg/200px-Bug_icon_-_Noun_project_198.svg.png" id="img" alt="">
  It's not a <span id="feature">feature</span>, it's a <span id="bug"> bug</span>.
</div>

CSS

body {
  overflow: hidden;
}
.quote {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items:center;
  background: rgba(10,10,10,0.9);
  color: #fafafa;
  font-size: 3em;
  font-family: 'Indie Flower', cursive;
  font-weight: bold;
  position: relative;
  overflow:hidden;
}

#img {
  position:absolute;
  height: 260px;
  width: 260px;
  z-index: -1;
  background-size: cover;
}

#bug {
  font-size: 1.4em;
  margin-left: 15px;
  color: #e33;
  transform: rotate(-10deg);
}
#feature {
  font-size: 1.4em;
  margin-left: 15px;
  color: #55e;
  transform: rotate(-5deg);
}