JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<i class="fa fa-adjust"></i>

<p>Although, you do not need Font Awesome to do this:</p>
<div class="no-font-needed"></div>

CSS

.fa-adjust, .no-font-needed {
    color: transparent;
    background: linear-gradient(to right, red 0%, green 50%, blue 100%);
    border-radius: 50%;
    width: 300px;
    height: 300px;
}