Neobrutalism components

Marquee

Item 1Item 2Item 3Item 4Item 5

export default function Marquee({ items }: { items: string[] }) {
  return (
    <div className="relative flex w-full overflow-x-hidden border-b-2 border-t-2 border-border dark:border-darkBorder bg-white dark:bg-darkBg text-text dark:text-darkText font-base">
      <div className="animate-marquee whitespace-nowrap py-12">
        {items.map((item) => {
          return (
            <span key={item} className="mx-4 text-4xl">
              {item}
            </span>
          )
        })}
      </div>

      <div className="absolute top-0 animate-marquee2 whitespace-nowrap py-12">
        {items.map((item) => {
          return (
            <span key={item} className="mx-4 text-4xl">
              {item}
            </span>
          )
        })}
      </div>

      {/* must have both of these in order to work */}
    </div>
  )
}

Before using

You'll have to add this to theme section inside your tailwind config:

theme: {
  extend: {
    animation: {
      marquee: "marquee 5s linear infinite",
      marquee2: "marquee2 5s linear infinite",
    },
    keyframes: {
      marquee: {
        "0%": { transform: "translateX(0%)" },
        "100%": { transform: "translateX(-100%)" },
      },
      marquee2: {
        "0%": { transform: "translateX(100%)" },
        "100%": { transform: "translateX(0%)" },
      },
    },
  },
},

Make sure there is enough content in items so it loops perfectly.

Visit this article to learn more.

Usage

import Marquee from '@/components/Marquee'

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']

<Marquee items={items} />