JSFiddle - React, Tailwind, and code Playground

by sophtwhere

HTML

<div class="container">

<div class="box android_yloc">
  <div class="inner-box android_xloc">
   <img class=finger_android src="http://images.all-free-download.com/images/graphiclarge/pointing_finger_clip_art_7641.jpg">
 
</div>
</div>


<img id="ios_help" src="http://i.imgur.com/8OljmG1.png">


<div class="box ios_yloc2">
  <div class="inner-box ios_xloc">
   <img class=finger_ios src="http://images.all-free-download.com/images/graphiclarge/pointing_finger_clip_art_7641.jpg">
 
</div>
</div>



<div class="box ios_yloc">
  <p class="ios_msg">tap here and select Add to Home Screen</p>
  <div class="inner-box ios_xloc">
   <img class=finger_ios src="http://images.all-free-download.com/images/graphiclarge/pointing_finger_clip_art_7641.jpg">
 
</div>
</div>


</div>

CSS

.box {
  position absolute;
  left : 0px;
  right : 0px; 
  margin:0 auto;
  -webkit-perspective: 40em;
}

.inner-box {
  position : absolute;
  width:30px;
  height: 30px;
  -webkit-transform: rotate(-10deg);
  animation:swivel 2s ease-in-out infinite alternate;
}

@keyframes swivel {
  from { -webkit-transform: rotate(-10deg);}
  to {-webkit-transform: rotate(10deg);}
}

.container {
  position : absolute;
  
  width: 320px;
  height : 480px;
  
  border:black;
  background:red;
}

.finger_android {
    position : absolute;
    height : 30px;
    transform : rotate(30deg);
}
.android_yloc {
    _display:none;
    position : absolute;
    height: 80px;
    top : 0px;  
}

.android_xloc {
  right: 0px;
  top:0;
}
.finger_ios {
    position : absolute;
    right : 0;
    height : 30px;
		object-fit: contain;
		font-family: 'object-fit:contain;object-position:center top;';
    transform : rotate(180deg);
}
.ios_msg {
  
  position : absolute;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
  text-align:center;
}


#ios_help  {
  position : absolute;
  width:80%;
  height 50%;
  
  left : 10%;
  bottom : 90px;
}


.ios_yloc {
    _display : none;
    position : absolute;
    height: 70px;
    left: -30px;
    bottom : 0px;  
}


.ios_yloc2 {
    _display : none;
    position : absolute;
   left: -30px;
   height: 70px;
    bottom : 180px;  
}

.ios_xloc {
  position : absolute;
  left: 50%;
  bottom: 0px;
  transform : translate(-50%,-50%);
}

JavaScript

var isMobile = {
                                           Windows: function() {
                                               return /IEMobile/i.test(navigator.userAgent);
                                           },
                                           Android: function() {
                                               return /Android/i.test(navigator.userAgent);
                                           },
                                           BlackBerry: function() {
                                               return /BlackBerry/i.test(navigator.userAgent);
                                           },
                                           iOS: function() {
                                               return /iPhone|iPad|iPod/i.test(navigator.userAgent);
                                           },
                                           any: function() {
                                               return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
                                           }
                                       };

if (isMobile.Android()){
	document.querySelector(".android_yloc").style.display="block";
} else {

  if (isMobile.iOS()){
    document.querySelector(".ios_yloc").style.display="block";
  }

}