Tailwind gradient text. Demo https://play.tailwindcss.com/PZ0yzMpJrz

gradient-headline.html

<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap" rel="stylesheet" />
<div class="flex h-screen w-full flex-col justify-center bg-gray-800 p-10">
  <div class="rounded-lg bg-gradient-to-r from-green-200 via-yellow-500 to-blue-300 p-px">
    <div class="flex flex-col items-start justify-center gap-3 rounded-lg bg-gray-800 p-9 lg:flex-row">
      <div>
        <span class="font-cinzel bg-gradient-to-r from-teal-200 to-blue-300 bg-clip-text font-bold uppercase text-transparent">Wakanda forever</span>
        <span class="ml-2">🦁</span>
      </div>
      <p class="text-gray-400">This is something you should consider to notice because it's so cool</p>
    </div>
  </div>
</div>

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        cinzel: ['Cinzel Decorative', 'cursive'],
      },
    },
  },
  plugins: [],
}