JSFiddle - React, Tailwind, and code Playground

JavaScript

/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? isTabletMobile = true : isTabletMobile = false;
    //this works perfect

    //problem starts when i try to detect difference between mobile and tablet

    /iPad/i.test(navigator.userAgent) ? isTablet = true : isTablet = false;
    //can't detect other tablet devices

    /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? isMobile = true : isMobile = false;
    //can't exclude tablet devices from here (like Android tablet devices)

    if ( isTabletMobile  ) {
        alert('You are on Mobile or Tablet');
    }else{
        alert('You are on Destop device');
    }

    if ( isTablet ) {
        alert('You are on Tablet');
    }
    if ( isMobile ) {
        alert('You are on Mobile');
    }