JSFiddle - React, Tailwind, and code Playground

Selections poll

HTML

<div id="main-container">

  <div id="image-container" class="fullscreen-container">
    <div id="poll-description">
      <h3>Do you like Summer or Winter ?</h3>
    </div>

    <div class="image-item left">
      <div class="image-src animate-img" data-image-src="https://i0.wp.com/perfumeposse.com/wp-content/uploads/2017/01/Eau-des-Merveilles-Hermes-Unsplash-pexelsjpg.jpg?fit=2048%2C1536" data-caption="Summer">
      </div>

    </div>

    <div class="image-item right">
      <div class="image-src animate-img" data-image-src="https://images.alphacoders.com/744/thumb-1920-74453.jpg" data-caption="Winter">
      </div>

    </div>

  </div>



  <div id="poll-container" class="fullscreen-container">
    <div id="close-poll">X</div>
    <div class="poll-item poll-left">
      <div class="block">
        <h1>201</h1>
        <p class="poll-item-caption">Selected <strong>Summer</strong>
        </p>
      </div>
    </div>
    <div class="poll-item poll-right">
      <div class="block">
        <h1>10</h1>
        <p class="poll-item-caption">Selected <strong>Winter</strong></p>
      </div>
    </div>
  </div>


</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic');
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Sawarabi Gothic';
  font-size: 1rem;
  overflow: hidden
}

#main-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
}

#poll-description {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 20;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 4px;
  padding: 1.5em;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}

#poll-description h3 {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  font-size: 1.6rem;
}

.fullscreen-container {
  position: relative;
  flex: 0 0 100vh;
  display: flex;
  width: 100vw;
  align-items: flex-start;
  flex-wrap: nowrap;
  background-color: gray;
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-item {
  position: relative;
  display: flex;
  flex: 1 1 50%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all .3s ease-in-out;
  cursor: pointer;
}

.image-item .image-src {
  position: relative;
  display: flex;
  flex: 1 1 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.image-item.active {
  transition: all .3s ease-in-out;
  flex: 0 0 100vw;
}

.image-item .caption {
  position: absolute;
  display: flex;
  flex: 1 1 auto;
  z-index: 5;
  height: auto;
  color: rgba(0, 0, 0, .5);
  text-shadow: 2px 2px rgba(255, 255, 255, .4);
  font-size: 3rem;
  font-weight: 800;
  text-align: Center;
  text-transform:...

JavaScript

// Author: PVH;


var AITPoll = {};
AITPoll.debug = true;
AITPoll.timerTime = 9000; // reset poll after a while
AITPoll.imageItems = null;
AITPoll.pollCookie = null;
AITPoll.pollContainer = $('#poll-container');


AITPoll.pollData = {
  "name": "Do you Like the Summer Or the Winter ?",
  "left": {
    "titel": "Summer",
    "count": 208,
    "img": ""
  },
  "right": {
    "titel": "Winter",
    "count": 11,
    "img": ""
  }
};




// init:
AITPoll.init = function() {

  if (AITPoll.debug) {
    console.log("[POLL] Init");
  }

  //get previous poll data
  if (readCookie('AITPoll')) {
    AITPoll.pollCookie = readCookie('AITPoll');
  } else {
    createCookie('AITPoll', JSON.stringify(AITPoll.pollData), 365);
  }

  //apply background images:
  AITPoll.imageItems = $('.image-item');

  if (AITPoll.imageItems.find('.image-src').length > 0) {

    var imgSrc = AITPoll.imageItems.find('.image-src');

    imgSrc.each(function(idx) {
      var $this = $(this);
      var imgData = $this.data();
      $this.attr('style', 'background-image:url(' + imgData.imageSrc + ');');

      if (typeof imgData.caption !== "undefined" && imgData.caption !== "") {
        $this.parent().append('<div class="caption">' + imgData.caption + '</div>');
      }
    });

  }

  //get Poll data and previous poll results:
  AITPoll.getResults();

  //bindings of elements:
  AITPoll.bindings();

  //...other stuff

};


// Poll bindings:
AITPoll.bindings = function() {

  if (AITPoll.debug) {
    console.log('[AITPoll] bindings');
  }

  //select poll item:
  AITPoll.imageItems.on('click', function(e) {

    e.stopImmediatePropagation();

    var $this = $(this);

    //prevent multiple clicks:
    if ($this.hasClass('active')) {
      return false;
    }

    // Update Poll results:
    AITPoll.updateResults($this);


    //Then show poll results
    AITPoll.imageItems.removeClass('active');
    $this.addClass('active');
    $('#main-container').addClass('up');

    // autoclose poll score...