JSFiddle - React, Tailwind, and code Playground
HTML
<script src="Ferhan Jamal"></script>
<span class="label-mobile-languageselector" onclick="myFunction()"><img src="https://s15.postimg.org/o258xqw23/Settings_Sign.png" alt="LanguageSelector">
<span class="popuptext show" id="myPopup">French</span>
</span>
CSS
.label-mobile-languageselector {
position:relative;
display: inline-block;
cursor: pointer;
margin-left:220px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 360px;
background-color: #668A04 !important;
color: #fff;
text-align: left;
/* border-radius: 6px; */
padding: .5px 0;
position: absolute;
/* margin-bottom: 12px !important; */
z-index: 1;
height: 29px !important;
bottom: -67%;
left: -271%;
margin-left: -80px;
}
.label-mobile-languageselector .popuptext::before {
content:url('https://s17.postimg.org/i4xsnejgf/globe.png');
display:inline-block;
float:left;
width: 30px; /* whatever width you need */
height: 29px; /* whatever height you need */
margin-right: 0.5em; /* whatever margin is needed to separate the image from the text */
}
/* Popup arrow */
.label-mobile-languageselector .popuptext::after {
content: "";
position: absolute;
top: -52%;
left: 58.2%;
margin-left: -5px;
border-width: 8px;
border-style: solid;
border-color: #668A04 transparent transparent transparent;
transform: rotateX(180deg);
}
/* Toggle this class - hide and show the popup */
.label-mobile-languageselector .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
JavaScript
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show')
if (!popup.classList.toggle('show')) {
if (popup.innerHTML == "English") {
popup.innerHTML = "French";
popup.classList.toggle('show')
} else {
popup.innerHTML = "English";
popup.classList.toggle('show')
}
} else {
popup.classList.toggle('show');
}
}