JSFiddle - React, Tailwind, and code Playground

by Academia

HTML

<section>
    <div class="container"> </div>
</section>

CSS

.container{
    width:300px;
    height:400px;
    background-color: black;
    position: relative;
}

JavaScript

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

function animatingDiv(refCls){
    if(isMobile.any()){
        $(refCls).attr('style','display:block !important;margin-left:auto !important;');
    }
    else{
        $(refCls).show();
        $(refCls).attr('style','display:block !important; ');
        var centerWidth=$(document).outerWidth()/2 - ($(refCls).width() + ($(refCls).outerWidth() - $(refCls).width()))/2;
        $(refCls).animate({marginLeft: centerWidth+'px'},2000, 'linear',function(){
            //$(this).attr('style','display:block !important;margin-left:auto !important;');
        });
    }   
}

$(function(){
    animatingDiv('section .container');
});
$(window).resize(function(){
    animatingDiv('section .container');
});