Self Executing JavaScript Widget (HTML + EQCSS): just place a link to this script in your HTML where you want the content to appear, like <script src="myWidget.js"></script>

myWidget.js

(function() {
  if (typeof EQCSS === 'undefined') {
    var eq = document.createElement('script');
    eq.src = 'http://elementqueries.com/EQCSS.js';
    document.body.appendChild(eq);
  };
  var myWidget = document.createElement('section'),
      widgetStyles = document.createElement('script'),
      tag = document.querySelectorAll('[src*=\'myWidget\']')[0];
  myWidget.innerHTML = '\
    <!-- Add your HTML here, with line-breaks escaped by a "\" backslash character. -->\
    <!-- (Don\'t forget: you can escape any character, like quotes, as well -->\
    Hello\
  ';
  widgetStyles.type = 'text/eqcss';
  widgetStyles.innerHTML = '\
    /* Add your EQCSS here, with line-breaks escaped by a "\" backslash character */\
    @element "html" and (min-width: 0px) { html { background: #09f; } }\
  ';
  function populateWidget(content) {
    tag.parentNode.insertBefore(content, tag.nextSibling);
  };
  populateWidget(widgetStyles);
  populateWidget(myWidget);
})();