JSFiddle - React, Tailwind, and code Playground

by theblang

HTML

<article id="momento">
    <header class="marquee">
        <h1>Momento</h1>
        <p>2000</p>
    </header>
    <div class="info">
        <p class="genre">Mystery, Thriller</p>
    </div>
</article> 
<article id="insomnia">
    <header class="marquee">
        <h1>Insomnia</h1>
        <p>2002</p>
    </header>
    <div class="info">
        <p class="genre">Crime, Mystery, Thriller</p>
    </div>
</article> 
<article id="prestige">
    <header class="marquee">
        <h1>The Prestige</h1>
        <p>2006</p>
    </header>
    <div class="info">
        <p class="genre">Drama, Mystery, Thriller</p>
    </div>
</article> 
<article id="inception">
    <header class="marquee">
        <h1>Inception</h1>
        <p>2010</p>
    </header>
    <div class="info">
        <p class="genre">Action, Adventure, Mystery</p>
    </div>
</article>

CSS

article {
    border: 2px dashed maroon;
    background: #cdc9c9;
}

.marquee {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slidein {
    from {
        margin-left:100%;
        width:300%
    }
    
    75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
    }
    
    to {
        margin-left:0%;
        width:100%;
    }
}

@-webkit-keyframes slidein {
    from {
        margin-left:100%;
        width:300%
    }
    
    75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
    }
    
    to {
        margin-left:0%;
        width:100%;
    }
}