JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<script src="http://medeil.com/_include/js/modernizr.js"></script>
<div class="intro-popup">
</div>
<div class="form-actions intro-opt">
  <h4 class="title fst">Choose your Language</h4>
  <h4 class="title snd hide">
           <a class="font-icon-arrow-simple-left back" onclick="loadback();"></a> Choose your Country <sub style="font-size:12px;margin-left:10px;">(If your country not listed?<a href="English/general/"> Click here</a>)</sub></h4>
  <ul class="lan fst">
    <li class="lan-eng"><a onclick="loaddiv('english');">English</a></li>
    <li class="lan-eng"><a href="http://www.medeil.fr">French</a></li>
    <li class="lan-eng"><a onclick="loaddiv('arabic');">Arabic</a></li>
  </ul>
  <!--choose Method-->
  <div class="hide english">
    <div class="container-fluid">
      <div class="row">
        <div style="text-align: center;">
          <div class="left">
            <img src="_include/img/Healthcare-medeilplus.png" alt="healthcare" />
            <a href="http://medeilplus.com/" target="_blank">Healthcare clinic & Hospital</a>
          </div>
          <div class="right">
            <img src="_include/img/MedeilPharmacy.png" alt="healthcare1" />
            <a onclick="loaddiv('English');">Pharmacy</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--end choose method-->
  <div class="countries hide English">
    <ul>
      <li>
        <a class="cflag" id="afghanistan" href="English/afghanistan/">
          <img alt="afghanistan" src="_include/img/flags/afghanistan.png" />
          <br />
          <span>afghanistan</span></a>
      </li>
      <li>
        <a class="cflag" id="a2" href="English/bangladesh/">
          <img alt="bangladesh" src="_include/img/flags/Bangladesh.png" />
          <br />
          <span>bangladesh</span></a>
      </li>
      <li>
        <a class="cflag" id="egypt" href="English/egypt/">
          <img alt="egypt" src="_include/img/flags/egypt.png" />
          <br />
         ...

CSS

.intro-popup {
  padding: 20px;
  height: auto;
  position: fixed;
  background: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.6;
  z-index: 9999;
}

.intro-opt {
  padding: 20px;
  height: auto;
  top: 10%;
  /*bottom:25%;*/
  left: 5%;
  right: 5%;
  position: fixed;
  z-index: 99999;
}

.lan {
  width: 100%;
  margin: 0px auto;
  text-align: center;
  display: block;
  max-height: 200px;
  overflow-y: auto;
}

.countries {
  max-height: 400px;
  overflow-y: auto;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.lan-eng {
  width: 25%;
  padding: 20px 10px;
  background: #0DA59B;
  margin: 60px 5px;
  display: block;
  display: inline-block;
}

.lan-eng a {
  color: #FFF;
  font-weight: bold;
}

.lan-eng:hover {
  background: #EFA213
}

.left {
  border: 1px solid #000;
  display: inline-block;
  padding: 1%;
}

.left img {
  width: 150px;
}

.left a {
  color: green;
  font-size: 28px;
}

.right {
  border: 1px solid red;
  display: inline-block;
  padding: 1%;
}

.right img {
  width: 180px;
}

.right a {
  color: green;
  font-size: 28px;
}

.countries ul li {
  list-style: none;
  width: 10%;
  padding: 5px;
  margin-left: 5px;
  margin-bottom: 15px;
  display: inline-block;
  position: relative;
  text-align: center;
  border-radius: 3px;
}

.back {
  padding: 10px;
  background: #888;
  color: #fff;
  border-radius: 50%;
}

.countries ul li a {
  color: #0F86C6;
  font-family: 'Open Sans', sans-serif;
}

.countries ul li a span {
  text-transform: uppercase;
  font-size: 12px;
}

.countries ul li:hover {
  background: #4FC1C1;
}

.countries ul li:hover > a {
  color: #fff;
}

.countries ul li img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.countries ul li a.india {
  background: transparent url(../img/flags/india.png) no-repeat center center;
}

.countries ul li a.Philippines {
  background: transparent url(../img/flags/Philippines.png) no-repeat center center;
}

JavaScript

$(document).ready(function() {
   $('.intro-popup').mousewheel(function(event) {
     event.preventDefault();
     // Do some stuff
   });
 });

 function loaddiv(obj) {
   $("." + obj).show();
   $(".snd").show();
   $(".lan,.fst").hide();
 }

 function loadback() {
   $(".snd").hide();
   $(".lan,.fst").show();
   $(".countries").hide();
 }