JSFiddle - React, Tailwind, and code Playground

by skrega

HTML

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">

  <div class="marquee">
     <a href="#" class="marquee__link">Easy</a>
     <a href="#" class="marquee__link">Audience</a>
     <a href="#" class="marquee__link">Benefits</a>
     <a href="#" class="marquee__link">Case studies</a>
</div>

<script src="//cdn.jsdelivr.net/npm/[email protected]/jquery.marquee.min.js" type="text
/javascript"></script>

SASS

.marquee
    width: 100%
    animation-delay: 2s
    z-index: 3
    position: relative
    font-weight: 800
    font-size: 32px
    line-height: 40px
    letter-spacing: -0.05em
    font-family: 'Montserrat', sans-serif
  

    &__link
        color: #212429
        text-shadow: 8px 8px 24px rgba(9, 13, 20, 0.4)
        position: relative
        padding-left: 90px
        filter: drop-shadow(5px 5px 20px rgba(9, 13, 20, 0.4))
        text-decoration: none
        margin: 20px auto
        transition: all .3s
        background-position: 100%
        &:hover
            background: linear-gradient(90deg, rgba(45,47,51,0) -7.49%, #E83F83 24.79%, #9A41F3 47.56%, #17AAFE 55.91%, #9A41F3 93.69%, #E83F83 104.78%, rgba(33,36,41,0) 177.01%)
            -webkit-background-clip: text
            -webkit-text-fill-color: transparent
            background-size: 105% 100%
            background-position: 0 100%

            &::before
                background-size: 105% 100%
                background-position: 0 100%
                background: repeating-linear-gradient(90deg, rgba(45,47,51,0) -7.49%, #E83F83 24.79%, #9A41F3 47.56%, #17AAFE 55.91%, #9A41F3 93.69%, #E83F83 104.78%, rgba(33,36,41,0) 177.01%)
                -webkit-background-clip: text
                -webkit-text-fill-color: transparent

        &::before
            content: "*"
            position: absolute
            left: 25px
            top: 27px
            color: #212429
            text-shadow: 8px 8px 24px rgba(9, 13, 20, 0.4)
            background-size: 200% 100%
            background-position: 100%
            transition: all .3s

.js-marquee-wrapper
    &:hover
        animation-play-state: paused !important

JavaScript

$(function () {
$('.marquee').marquee({
  duration: 6000,
  startVisible: true,
  duplicated: true
});
})