Beautiful Tailwind CSS Marquee Component [React + TypeScript]

A Marquee component is a fantastic way to display important information or content in a scrolling format.

In this guide, we’ll build a beautiful Marquee component using React, TypeScript, and Tailwind CSS. This component can be used to highlight skills, testimonials, or showcase brands and partners.

Key Features of This Tailwind CSS Marquee Component

• Smooth Animation: The Marquee scrolls continuously, moving back and forth in a visually appealing way.
• Custom Animation Util Function: We created a util function named marqueeAnimation to control the smooth animation.
• Dynamic Content: The component accepts data as props, allowing you to add text, icons, or images to represent skills or logos.

You can modify this component as per your need.

Below is a preview of the Marquee component.

Marquee Component Code

Here’s the code for building your own React + TypeScript + Tailwind CSS Marquee component. Simply copy it, customize it to fit your needs, and embed it in your project to enhance your site’s visuals.

Copy
1import { useEffect, useRef, useState } from 'react'
2
3type MarqueeAnimationType = (
4  element: HTMLElement,
5  elementWidth: number,
6  windowWidth: number,
7) => void
8
9const marqueeAnimation: MarqueeAnimationType = (
10  element,
11  elementWidth,
12  windowWidth,
13) => {
14  element.animate(
15    [
16      { transform: 'translateX(0)' },
17      { transform: `translateX(${windowWidth - elementWidth}px)` },
18    ],
19    {
20      duration: 50000,
21      easing: 'linear',
22      direction: 'alternate',
23      iterations: Infinity,
24    },
25  )
26}
27
28type SkillsProps = {
29  skills: { name: string; logo: string }[]
30}
31
32const Skills: React.FC<SkillsProps> = ({ skills }) => {
33  const skillsElementRef = useRef<HTMLDivElement>(null)
34  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
35
36  useEffect(() => {
37    if (skillsElementRef.current) {
38      const skillsElementWidth =
39        skillsElementRef.current.getBoundingClientRect().width
40      marqueeAnimation(
41        skillsElementRef.current as HTMLElement,
42        skillsElementWidth,
43        windowWidth,
44      )
45    }
46
47    const handleResize = () => {
48      setWindowWidth(window.innerWidth)
49    }
50
51    window.addEventListener('resize', handleResize)
52    return () => window.removeEventListener('resize', handleResize)
53  }, [windowWidth])
54
55  return (
56    <div className="relative overflow-x-hidden bg-gradient-to-r from-[#011627] via-[#062B48] to-[#011627]">
57      <div
58        id="skills"
59        className="w-max whitespace-nowrap p-5 lg:p-7"
60        ref={skillsElementRef}
61      >
62        <div className="flex gap-8 lg:gap-24">
63          {skills.map(({ name, logo }, index) => (
64            <span
65              key={index}
66              className="flex items-center text-lg text-[#607B96] lg:text-base"
67            >
68              <img src={logo} alt={name} className="mx-2 size-11 lg:size-14" />
69              {name}
70            </span>
71          ))}
72        </div>
73      </div>
74    </div>
75  )
76}
77
78export default Skills

Skill List Data

You can use this data format for the skills, testimonials, or brands you’d like to display.

Copy
1export const skillList = [
2  {
3    name: 'JavaScript',
4    logo: 'https://ik.imagekit.io/cpnw7c0xpe/Tailwind%20Components/icon-javscript.png?updatedAt=1730199511694',
5  },
6  {
7    name: 'TypeScript',
8    logo: 'https://ik.imagekit.io/cpnw7c0xpe/Tailwind%20Components/icon-typescript.png?updatedAt=1730199511629',
9  },
10  {
11    name: 'React.js',
12    logo: 'https://ik.imagekit.io/cpnw7c0xpe/Tailwind%20Components/icon-react.png?updatedAt=1730199511618',
13  },
14  {
15    name: 'Next.js',
16    logo: 'https://ik.imagekit.io/cpnw7c0xpe/Tailwind%20Components/icon-nextjs.png?updatedAt=1730199511621',
17  },
18  {
19    name: 'Node.js',
20    logo: 'https://ik.imagekit.io/cpnw7c0xpe/Tailwind%20Components/icon-nodejs.png?updatedAt=1730199511721',
21  },
22  {
23    name: 'Express.js',
24    logo: 'https://ik.imagekit.io/cpnw7c0xpe/Tailwind%20Components/icon-express.png?updatedAt=1730199511600',
25  },
26  {
27    name: 'Nest.js',
28    logo: 'https://ik.imagekit.io/cpnw7c0xpe/Tailwind%20Components/icon-nest.png?updatedAt=1730199511689',
29  },
30  {
31    name: 'Socket.io',
32    logo: 'https://ik.imagekit.io/cpnw7c0xpe/Tailwind%20Components/icon-socket.png?updatedAt=1730199511649',
33  },
34]

Using the Marquee Component

To display the Marquee component, import it into the desired parent component and pass in your data as props.

By following these steps, you’ll have a responsive, attractive Marquee component to improve your website’s interactivity and design. If you find this component useful, feel free to reach out with any questions or feedback!