JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>
       gzzzz
    </title>
</head>

<body>
    <div id="container">
        <div id="answers">
        <div class="sadness">
            <p class="feelings">SADNESS</p>
        </div>
        <div class="anger">
            <p class="feelings">ANGER</p>
        </div>
        <div class="surprise">
            <p class="feelings">SURPRISE</p>
        </div>
        <div class="fear">
            <p class="feelings">FEAR</p>
        </div>
        <div class="disgust">
            <p class="feelings">DISGUST</p>
        </div>
        <div class="contempt">
            <p class="feelings">CONTEMPT</p>
        </div>
        <div class="happy">
            <p class="feelings">HAPPINESS</p>
        </div>

        </div>

        <div class="thegame">
            <div class="pic">
                <img class="left" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
            <div class="pic">
                <img class="happy" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
            <div class="pic">
                <img class="right" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
        </div>
        
        <div id="score">
            <h2></h2>
            </div>
    </div>
</body>
<script src="jQuery.js"></script>
<script src="stuff.js"></script>
</html>

CSS

#container{
    width:100%;
    overflow:auto;
}

.thegame{
    background-color:#44accf;
    width:800px;
    height:210px;
    margin:auto;
    text-align:center;
    float:left;
    margin-top:250px;
}

#answers{
    background-color:red;
    width:200px;
    height:724px;
    display:inline-block;
    position:relative;
}

.alternatives{
    width:200px;
    height:100px;
    display:inline-block;
    background-color:blue;
    margin:auto;
}

.sadness{
    width:200px;
    height:100px;
    background-color:blue;
    margin:auto;
    text-align:center;
}

.anger{
    width:200px;
    height:100px;
    background-color:blue;
    margin:auto;
    text-align:center;
}

.surprise{
    width:200px;
    height:100px;
    background-color:blue;
    margin:auto;
    text-align:center;
}

.fear{
    width:200px;
    height:100px;
    background-color:blue;
    margin:auto;
    text-align:center;
}

.disgust{
    width:200px;
    height:100px;
    background-color:blue;
    margin:auto;
    text-align:center;
}

.contempt{
    width:200px;
    height:100px;
    background-color:blue;
    margin:auto;
    text-align:center;
}

#score{
    background-color:grey;
    width:800px;
    height:200px;
    display:inline-block;
    margin-top:460px;
    float:left;
    text-align:center;
    margin-left:-800px;
}

.happy{
    width:200px;
    height:100px;
    background-color:blue;
    margin:auto;
    text-align:center;
}

p.feelings{
    margin:3px;
    padding-top:40px;
    color:white;
    font-weight:bold;
}
img.quiz{
    width:250px;
    height:210px;
}

img.sadness{
    width:250px;
    height:210px;
}

img.anger{
    width:250px;
    height:210px;
}

img.surprise{
    width:250px;
    height:210px;
}

img.fear{
    width:250px;
    height:210px;
}

img.disgust{
    width:250px;
    height:210px;
}

img.contempt{
    width:250px;
    height:210px;
}

img.happy{
    width:250px;
    height:210px;
}

.left{
    width:250px;
    height:210px;

}

.right{
   ...

JavaScript

$(document).ready(function(){

$('.left').hide();
$('.right').hide();

$('.happy').click(function(){

    $('.left').show();
    $('.right').show();

    if($(this).hasClass('happy') && $("img").hasClass('happy')){
        $('h2').replaceWith("<h2>You are correct!</h2>");
    }else if(!$('img').hasClass('happy')){
    alert("LOL");
    };
});
});