JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div class="news-wrapper">
  <ul class="footer-item">
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
  </ul>
</div>

CSS

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif
}

.news-wrapper {
	height: 50px;
	position: relative;
	overflow: hidden;
	font-size: 25px;
	padding: 10px 0 0
}

.news-wrapper .footer-item {
	display: flex;
	color: #ffffff;
	background-color: rebeccapurple;
	list-style: none;
	left: 100%;
	position: absolute;
	animation: sliding 20s linear;
	white-space: nowrap;
}

.news-item {
	margin-right: 100vw;
}

.news-item:last-child {
	margin: 0;
}

@keyframes sliding {
	100% {
		left: -120%;
	}
}