JSFiddle - React, Tailwind, and code Playground

HTML

<div id="prototype" style="display: none">
    
    <div class="item">
        <div class="background-img"></div>
        <div class="background-img-gradient"></div>
        
        <div class="text-container">
             <div class="heading"></div>    
             <div class="story"></div>  
        </div>
   </div>
    
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden; 
}

p {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    line-height: 110%;
    color: white;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
} 


/* -------------------------------------------*/


.background-img {
    position: absolute;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-filter: grayscale(100%) brightness(100%) contrast(100%) blur(0.0px); 
    -moz-filter: grayscale(100%) brightness(100%) contrast(100%) blur(0.0px); 
    -o-filter: grayscale(100%) brightness(100%) contrast(100%) blur(0.0px); 
    -ms-filter: grayscale(100%) brightness(100%) contrast(100%) blur(0.0px); 
    filter: grayscale(100%) brightness(100%) contrast(100%) blur(0.0px); 


}


.background-img-gradient {
    background: -webkit-linear-gradient(rgba(0,0,0,150), rgba(255,255,255,0));
    background: -moz-linear-gradient(rgba(0,0,0,150), rgba(255,255,255,0));
    background: -o-linear-gradient(rgba(0,0,0,150), rgba(255,255,255,0));
    background: -ms-linear-gradient(rgba(0,0,0,150), rgba(255,255,255,0));
    background: linear-gradient(rgba(0,0,0,150), rgba(255,255,255,0));
    position: absolute;
    height: 70%;
    width: 100%;
    top: 0;
    left: 0;
}


.focus .background-img {
    -webkit-filter: grayscale(0%) brightness(100%) contrast(100%) blur(0.0px); 
    -moz-filter: grayscale(0%) brightness(100%) contrast(100%) blur(0.0px); 
    -o-filter: grayscale(0%) brightness(100%) contrast(100%) blur(0.0px); 
    -ms-filter: grayscale(0%) brightness(100%) contrast(100%) blur(0.0px); 
    filter: grayscale(0%) brightness(100%) contrast(100%) blur(0.0px); 
}

/* -------------------------------------------*/

.text-container {
    position: relative;
    overflow: hidden;
    margin: 10px;
   ...

JavaScript

var data = {
	items: [{
		heading: "Foo",        
        backgroundStyle: {
            "background-color": "rgb(255,0,0)"
        },
        story: "bar."
	}, {
		heading: "Foo",
        backgroundStyle: {
             "background-color": "rgb(0,255,0)"
        },
        story: "bar"
	}, {
		heading: "Foo",
        backgroundStyle: {
            "background-color": "rgb(0,0,255)"
        },
        story: "bar"
	}, {
		heading: "Foo",
        backgroundStyle: {
            "background-color": "rgb(255,255,0)"
        },
        story: "bar"
	}, {
		heading: "Foo",
        backgroundStyle: {
            "background-color": "rgb(255,0,255)"
        },
        story: "bar"
	}]
    
}

var nOfItems = data.items.length;

$itemPrototype = $("#prototype .item");


for (var i = 0; i < nOfItems; i++) {
    
    var dItem = data.items[i];
    
    var heading = dItem.heading;
    var backgroundStyle = dItem.backgroundStyle;
    var story = dItem.story;
    
    
    $item = $itemPrototype.clone();
    
    $item.addClass("item"+(i+1));
                   
    $background = $item.find(".background-img");
    $background.css(backgroundStyle);
   
    $heading = $item.find(".heading");
    $heading.html("<p>"+heading+"</p>");
    
    $story = $item.find(".story");
    $story.html("<p>"+story+"</p>");
     
    var item = $item.get(0);
    
    // we use a transition instead of an animation for
    // the unfocus now
    item.addEventListener("transitionend", transitionend, false);
    item.addEventListener("webkitTransitionend", transitionend, false);
      
    item.addEventListener("animationend", animationend, false);
    item.addEventListener("webkitAnimationEnd", animationend, false);
    
    $("body").append($item);
        
}

function transitionend() {
    
        console.log("transitionend");

      $(this).removeClass("transition");
        
}

function animationend() {
    console.log("animationend");
    
    $story = $(this).find(".story");
   ...