JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="maintext">
  <h2> Main text goes here...</h2>
</div>
<div id="boxes">
  <div id="dialog" class="window">
    <div id="san">
      <section>
        <select id="Rank" class="cs-select cs-skin-elastic">
          <option value="" disabled selected>Choose Language</option>
          <option value="English" data-class="flag-english">English</option>
          <option value="Arabic" data-class="flag-arabic">Arabic</option>
          <option value="French" data-class="flag-french">French</option>

        </select>
      </section>
    </div>
  </div>
  <div style="width: 2478px; font-size: 32pt; color: white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
</div>


<div class="container">
  <div class="English">
    <select class="second-level-select">
      <option value="">-Select Your Country-</option>
      <option value="USA">Usa</option>
      <option value="India">India</option>
    </select>
  </div>

  <div class="Arabic">
    <select class="second-level-select">
      <option value="">-Select Your Country-</option>
      <option value="UAE">UAE</option>
      <option value="Kuwait">Kuwait</option>
    </select>
  </div>

CSS

#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #26262c;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 850px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

#boxes #dialog {
  width: 450px;
  height: auto;
  
  font-size: 15pt;
}

.agree:hover {
  background-color: #D1D1D1;
}

.popupoption:hover {
  background-color: #D1D1D1;
  color: green;
}

.popupoption2:hover {
  color: red;
}

#Rank {
font-size: 1.5em;
    font-weight: 700;
    color: #5b8583;
    padding: 16px;
    width: 100%;
    cursor:pointer;
    border:none;
    background: url(../Down-Arrow-PNG-Image.png) 96% / 10% no-repeat #eee;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

.second-level-select {
font-size: 1.5em;
    font-weight: 700;
    color: #5b8583;
    padding: 16px;
    width: 100%;
    cursor:pointer;
    border:none;
     background: url(../Down-Arrow-PNG-Image.png) 96% / 10% no-repeat #eee;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
select#Rank option[value="English"]   { background-image:url(http://new.medeilplus.com/choose/img/English_language_icon.png);   }
select#Rankoption[value="French"] { background-image:url(http://new.medeilplus.com/choose/img/English_language_icon.png); }
select#Rank option[value="Arabic"] { background-image:url(http://new.medeilplus.com/choose/img/English_language_icon.png); }

JavaScript

$(document).ready(function() {

  var id = '#dialog';

  //Get the screen height and width
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();

  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  });

  //transition effect     
  $('#mask').fadeIn(500);
  $('#mask').fadeTo("slow", 0.9);

  //Get the window height and width
  var winH = $(window).height();
  var winW = $(window).width();

  //Set the popup window to center
  $(id).css('top', winH / 2 - $(id).height() / 2);
  $(id).css('left', winW / 2 - $(id).width() / 2);

  //transition effect
  $(id).fadeIn(2000);

  //if close button is clicked
  $('.window .close').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
  });

  //if mask is clicked
  $('#mask').click(function() {
    var val = $(".cs-select option:selected").text();
    if (val == 'Choose Language') {
      return;
    }
    $(this).hide();
    $('.window').hide();
  });

  $(document).click(function() {
    if (!$(".cs-select ").is(":focus")) {
      $('#dialog').css({
        'height': 23
      });
    } else {
      var height = 17;
      $('.cs-select option').each(function(item) {
        height = height + 17;
      })
      if ($('#dialog').height() < 25) {
        $('#dialog').css({
          'height': height
        });
      } else {
        $('#dialog').css({
          'height': 23
        });
      }
    }
  });

});


/*select your country*/

$(document).ready(function() {

  $('#Rank').bind('change', function() {
    var elements = $($('div.container').children());
    elements.hide(); // hide all the elements
    var value = $(this).val();

    if (value && value.length) { // if somethings' selected
      $("#dialog").html($(elements.filter('.' + value)).html());
    }
  }).trigger('change');
});