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.

PreviewCode

JavaScriptTypeScriptReact.jsNext.jsNode.jsExpress.jsNest.jsSocket.io

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.

You can easily adjust the Marquee speed by changing duration property.

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!