Vue Word Rotation Component w/ TailwindCSS

WordRotater.vue

<template>
	<span class="word-wrapper">
		<span class="filler">---</span>
		<span class="word" v-for="(word, index) in words" :key="index">
			{{ word }}
		 </span>
	</span>
</template>

<script>
export default {
	props: ["words"]
};
</script>

<style lang="sass">
.word-wrapper
	@apply inline-block text-left relative text-red-600

	.filler
		@apply opacity-0

	.word
		@apply opacity-0 absolute inset-0
		animation: topToBottom 10s linear infinite 0s
	
		&:nth-child(2)
			animation-delay: 2.5s

		&:nth-child(3)
			animation-delay: 5s

		&:nth-child(4)
			animation-delay: 7.5s

@keyframes topToBottom
	0%
		opacity: 0
	5%
		opacity: 0
		transform: translateY(-100%)
	10%
		opacity: 1
		transform: translateY(0px)
	25%
		opacity: 1
		transform: translateY(0px)
	30%
		opacity: 0
		transform: translateY(100%)
	80%
		opacity: 0
	100%
		opacity: 0
</style>