JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="share">  
    
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="www.catalogtree.net" data-text="The Title We Want" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    
    
</div>

CSS

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

p {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 110%;
    color: white;
    position: relative;
} 


.heading {
    font-size: 40px;
    left: 10px;
}

.story {
   font-size: 10px;  
   max-width: 300px; 
   left: 10px;
}


.item {
    width: 20%;
    height: 100%;
    position: fixed;   
    overflow: hidden;
 }

.preAnimateState {
    visibility: hidden; 
}


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

/*We intentially! don't use :hover*/
.background-img-hover {
   filter: grayscale(0%) brightness(50%) contrast(100%) blur(0.0px);  
   /*background: linear-gradient(red, rgba(255,0,0,0));*/
   transition-duration: 0.5s;
}

.background-img-gradient {
    background: linear-gradient(rgba(0,0,0,255), rgba(255,255,255,0));
    position: absolute;
    height: 50%;
    width: 100%;
    top: 0;
    left: 0;
}

.item1 { left: 0%;}
.item2 { left: 20%;}
.item3 { left: 40%;}
.item4 { left: 60%;}
.item5 { left: 80%;}



/* hide by default */
.item .story {
   display: none;
}

.focus {
    z-index: 10;
    left: 0%;
    width: 100%;
    transition: 0.25s cubic-bezier(0.950, 0.050, 0.795, 0.035) 0s;
}

.focus .story {   
    display: block;
}


.share {
    position: fixed;
    background: white;
    width: 100%;
    height: 20px;
    z-index: 20;
    bottom: 0;
}

.animateIn {
    animation: animateIn 1s 0.4s 1 cubic-bezier(0.950, 0.050, 0.795, 0.035) alternate;
}

@keyframes animateIn {
    
    0% {
       visibility: visible; 
       left: 100%;
        
    }
    100% {
    }
}

JavaScript

var data = {
	items: [{
		heading: "ISIS Fighter",        
        backgroundStyle: {
            "background-image": "url(http://doekewartena.nl/catalogtree/bbc/images/bbc150330-22.jpeg)",
            "background-position": "40% 0%"
        },
        story: "ISIS reportedly pays its fighters on average 350 - 500 USD per month. With an estimated 20,000 to 30,000 fighters in its employ, this alone would represent a 10 million USD drain on ISIL’s treas- ury every month."
	}, {
		heading: "Jihadi Bride",
        backgroundStyle: {
             "background-image": "url(http://doekewartena.nl/catalogtree/bbc/images/bbc150330-23.jpeg)",
            "background-position": "50% 0%"
        },
        story: "One public report noted that ISIS paid fighters 50 USD per month for his wife and 25 USD per month for each child. Families receive free housing, electricity and some groceries. Furthermore, a fighter receives $50 per child and $100 per wife each month."
	}, {
		heading: "Bakery",
        backgroundStyle: {
            "background-image": "url(http://doekewartena.nl/catalogtree/bbc/images/bbc150330-24.jpeg)",
            "background-position": "90% 0%"
        },
        story: "IS control 40% of Iraq’s wheat supply and are replicating Bagh- dad’s food subsidy system. IS fighters have seized an estimated 16 wheat silos in Northern Iraq to lower prices and replicate Bagh- dad’s food subsidy system.this alone would represent a 10 million USD drain on ISIL’s treasury every month."
	}, {
		heading: "Money",
        backgroundStyle: {
            "background-image": "url(http://doekewartena.nl/catalogtree/bbc/images/bbc150330-25.jpeg)",
            "background-position": "50% 0%"
        },
        story: "Billboards in Raqqa display the currency ISIS are planning to in- troducethis alone would represent a 10 million USD drain on ISIL’s treasury every month."
	}, {
		heading: "Law & Order",
        backgroundStyle: {
            "background-image":...