Vue Marquee Component

Marquee.vue

<template>
  <div id="marquee">
    <div class="inner">
      <div class="message">{{ message }}</div> 
      <div class="message">{{ message }}</div>
    </div>
  </div>
</template>

<script setup>
// Define props
defineProps(['message'])
</script>

<style lang="postcss" scoped>
#marquee{
  @apply bg-black dark:bg-white overflow-hidden text-white dark:text-black;
}

.inner{
  @apply flex py-2.5 md:py-3 lg:py-3.5 xl:py-4 2xl:py-[18px] w-max;
  animation: scroll 15s linear infinite;
}

.message{
  @apply px-5 md:px-6 lg:px-7 xl:px-8 2xl:px-9;
}

@keyframes scroll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}
</style>