JSFiddle - React, Tailwind, and code Playground

by Doeke Wartena

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>

<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;
    overflow: hidden;
}

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


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

.item {
    width: 20%;  
    height: 100%;
    float: left;
    position: relative;
 }


.item1 {
    animation: animateItemIn 1s 0.05s 1 cubic-bezier(0.320, 0.715, 0.470, 0.830) alternate both;
}

.item2 {
    animation: animateItemIn 1.2s 0.05s 1 cubic-bezier(0.320, 0.715, 0.470, 0.830) alternate both;
}

.item3 {
    animation: animateItemIn 1.4s 0.05s 1 cubic-bezier(0.320, 0.715, 0.470, 0.830) alternate both;
}

.item4 {
    animation: animateItemIn 1.6s 0.05s 1 cubic-bezier(0.320, 0.715, 0.470, 0.830) alternate both;
}

.item5 {
    animation: animateItemIn 1.8s 0.05s 1 cubic-bezier(0.320, 0.715, 0.470, 0.830) alternate both;
}

@keyframes animateItemIn {
    0% {
        left: 100%;
    }
    100% {
        left: 0;
    }
}

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


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


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

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

.text-container {
    position: relative;
    overflow: hidden;
    margin: 10px;
    max-width: 300px;
}

.focus .text-container {
    background-image: url(http://doekewartena.nl/catalogtree/bbc/images/transparent_30.png);
}

.heading p { 
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0px;
    font-size: 40px;
    padding: 10px;
}

.story p{
    font-size: 12px;
    padding: 10px;
}

/*...

JavaScript

var data = {
	items: [{
		heading: "Fighters",        
        backgroundStyle: {
            "background-image": "url(http://doekewartena.nl/catalogtree/bbc/images/bbc150330-22.jpeg)",
            "background-position": "40% 0%"
        },
        story: "Paying fighters’ salaries puts a huge strain on IS’s resources. According to Abu Hajjar local fighters are paid a weekly wage of around $60. They also get free housing, electricity and according to some reports, even groceries. "
	}, {
		heading: "Food",
        backgroundStyle: {
             "background-image": "url(http://doekewartena.nl/catalogtree/bbc/images/bbc150330-23.jpeg)",
            "background-position": "50% 0%"
        },
        story: "IS now control 40% of Iraq’s wheat supply and claim they’ve created a successful food-subsidy system. But many farmers have fled and a food crisis is looming.  Inflation on basic goods is running at up to 1000% in IS-controlled areas, according to some reports."
	}, {
		heading: "Families",
        backgroundStyle: {
            "background-image": "url(http://doekewartena.nl/catalogtree/bbc/images/bbc150330-24.jpeg)",
            "background-position": "90% 0%"
        },
        story: "Abu Hajjar says local fighters receive a monthly sum of around $40 for each of their wives and $20 per child. He also describes a benefits system for the families of suicide-bombers and those killed in battle. "
	}, {
		heading: "Slaves",
        backgroundStyle: {
            "background-image": "url(http://doekewartena.nl/catalogtree/bbc/images/bbc150330-25.jpeg)",
            "background-position": "50% 0%"
        },
        story: "IS has forced between 2500 and 4000 Yazidi women into sexual slavery, selling them for as little as $10 to attract new recruits. A recently-released IS pamphlet states that beatings and sexual intercourse with pre-pubescent slave girls is lawful."
	}, {
		heading: "Law & Order",
        backgroundStyle: {
            "background-image":...