Well you can do the CSS part via the admin panel (I don't believe there's a need for span)
admin cp > users tab > list user groups > (the group you want to change) > Username CSS
-change the css to whatever is needed to achieve the rainbow text
Then go to templates and use
Code:
<xen:require js="/js/YourCustomFolderName/rainbowTextSCRIPT.js" />
to include the rainbow .js file and script to execute the colors... I'm not sure of the right place to put it, but I'd probably go with page container or header/footer templates since those are consistently on every page.
Be sure to upload the .js file to your xenforo install/JS/YourCustomFolderName/
Quick google produces this for rainbow text
http://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/