JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<div class="wrapper">
    <div class="bg">

    </div>
    <div class="content">
        <p>Content</p>
    </div>
</div>

CSS

@-webkit-keyframes bg-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.wrapper {
    position:relative;
    width:400px;
	height: 300px;
    overflow:hidden;
}

.content {
    position: relative;
    text-align: center;
    font-size: 26px;
    color: #000;
}

.bg {
	width: 200%;
	background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
	position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    animation: bg-slide 20s linear infinite;
}