JSFiddle - React, Tailwind, and code Playground

HTML

<link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>

<div>
<span class="blue">G</span>
<span class="red">o</span>
<span class="yellow">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red e">e</span>
</div>

CSS

body {
background: white;
}

div {
text-align: center;
margin-top: 100px;
font-size: 0px;
}

span {
font-family: Product Sans;
display: inline-block;
font-size: 100px;
margin-left: -3px;
}

.blue {
color: #4285F4
}

.green {
color: #0F9D58
}

.yellow {
color: #F4B400
}

.red {
color: #DB4437
}

.e {
transform: rotate(-20deg);
}