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"...

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();
        }