JSFiddle - React, Tailwind, and code Playground

by ing2758

HTML

<header class="header ticker-wrapper">
        <div class="ticker-wrapper__container">
            <a href="/news1">
                <img src="https://loremflickr.com/g/300/200/news" alt="news">
                <span>news 1</span>
            </a>
            <a href="/news2">
                <img src="https://loremflickr.com/g/300/200/news" alt="news 2">
                <span>news 2</span>
            </a>
            <a href="/news3">
                <img src="https://loremflickr.com/g/300/200/news" alt="news 3">
                <span>news 3</span>
            </a>
            <a href="/news4">
                <img src="https://loremflickr.com/g/300/200/news" alt="news 4">
                <span>news 4</span>
            </a>
            <a href="/news5">
                <img src="https://loremflickr.com/g/300/200/news" alt="news 5">
                <span>news 5</span>
            </a>
        </div>
    </header>

CSS

.header {
            background: #212121;
            overflow: hidden;
            height: 65px;
            position: relative;
        }
        .header div {
            display: flex;
            flex-direction: row;
            align-items: center;
            overflow: hidden;
            height: 65px;
            transform: translate(100%, 0);
        }
        .header div * {
            font-family: "Roboto", sans-serif;
            color: #fff339;
            text-transform: uppercase;
            text-decoration: none;
        }
        .header div img {
            height: 60px;
            margin-right: 20px;
        }
        .header .ticker-wrapper__container{
            display: flex;
            flex-direction: row;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            animation: ticker 30s infinite linear forwards;
        }

        .header:hover .ticker-wrapper__container{
            animation-play-state: paused;
        }

        .ticker-wrapper__container a{
            display: flex;
            margin-right: 60px;
            align-items: center;
        }

        @keyframes ticker {
            0% {
                transform: translate(100%, 0);
            }
            50% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-100%, 0);
            }
        }