JSFiddle - React, Tailwind, and code Playground

by andydavies

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo to hide tweet button on small viewports</title>
</head>
<body>
    <!-- twitter -->
    <a class="twitter-share-button" data-count="horizontal">Tweet</a>
  
    <script src="https://raw.github.com/paulirish/matchMedia.js/master/matchMedia.js"></script>
</body>
</html>

CSS

@media only screen and (max-width:320px) {
  #twitter-share-button {display: none;}
}
@media only screen and (min-width:321px) {
  #twitter-share-button {display: inline;}
}

JavaScript

function addTweetButton() {
            var js = document.createElement('script');
            js.async = true;
            js.src = '//platform.twitter.com/widgets.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(js, s);
          }
      
        window.onload = function() {
      
            if (matchMedia('only screen and (min-width: 321px)').matches) {
                addTweetButton();
            }
        }