JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">

<div class="container">

<h1 class="gradient-text">Welcome to the World of Woodhacker Van Conversions</h1>

</div>

CSS

.container {max-width:680px;margin:auto;text-align:center;}

h1 {
  font-family: "Satisfy", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;line-height:50px;
}

.gradient-text {
background: #121FCF;
background: -webkit-linear-gradient(to right, #FDCA02 10%, #DE3728 50%, #B209EA 90%);
background: -moz-linear-gradient(to right, #FDCA02 10%, #DE3728 50%, #B209EA 90%);
background: linear-gradient(to right, #FDCA02 10%, #DE3728 50%, #B209EA 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}