At project settings of your Webflow project, go to the Custom Code tab and paste the code bellow under Before </body> tag:

<script>
// Gets the items for Text Links
let textLinkColors = $(".rainbow-links_text-links-list").children().length;
// Gets the items for Link Blocks
let linkBlockColors = $(".rainbow-links_link-blocks-list").children().length;

// Configurates the Text Links
$("[rainbow-text-link]").each(function (index) {
   // Saves the original color
   let originalColor = $(this).css("color");
   // Sets what happen on mouse hover
   $(this).mouseenter(function() {
       // Randoms a number between available options
       let randomNum = Math.floor(Math.random() * textLinkColors);
       // Gets the color from the random item
       let selectedColor = $(".raindow-links_text-link-item").eq(randomNum).css("color");
       // Sets the color of the link
       $(this).css("color", selectedColor);
   });
   // Sets what happen on mouse hover out
   $(this).mouseleave(function() {
       // Sets the color of the link to the original color
       $(this).css("color", originalColor);
   });
});

// Configurates the Link Blcks
$("[rainbow-link-block]").each(function (index) {
   // Saves the original color
   let originalColor = $(this).css("color");
   // Saves the background color
   let originalBackgroundColor = $(this).css("background-color");
   // Sets what happen on mouse hover
   $(this).mouseenter(function() {
       // Randoms a number between available options
       let randomNum = Math.floor(Math.random() * linkBlockColors);
       // Gets the color from the random item
       let selectedColor = $(".rainbow-links_link-block-item").eq(randomNum).css("color");
       // Gets the background color from the random item
       let selectedBackgroundColor = $(".rainbow-links_link-block-item").eq(randomNum).css("background-color");
       // Sets the color of the link
       $(this).css("color", selectedColor);
       // Sets the background color of the link
       $(this).css("background-color", selectedBackgroundColor);
   });

   $(this).mouseleave(function() {
       // Sets the color of the link to the original color
       $(this).css("color", originalColor);
       // Sets the background color of the link to the original color
       $(this).css("background-color", originalBackgroundColor);
   });
});
</script>

Copy the rainbow-links_component element from the cloneable project and paste it inside your Webflow project.

Inside the rainbow-links_component, you will see two lists. One for the text links and another for the link blocks. You can create as many items as you like for both lists. Be sure to maintain the same class name structure, or update it in the code if you make any changes.

To make your text link behave like a rainbow link, select the text link element. Then, under Element Settings, add a new attribute with the name rainbow-text-link (you can leave the value field empty). And thats it! Your text links will now show a different color every time the mouse hovers over.

To set the rainbow links to link blocks the process is the same, the only difference is that instead of using the rainbow-text-link attribute, you should use the rainbow-link-block attribute.

‍

Remember to publish your site to see the effect in action.