JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="https://raw.github.com/mozilla/x-tag/master/x-tag.js"></script>
<!-- <title>Picture, a responsive image component</title> -->
<!-- Inspired by http://picture.responsiveimages.org/ -->
<!-- http://24ways.org/2012/responsive-images-what-we-thought-we-needed/ -->

<!-- images from google images -->

<x-picture>
    <x-source src="http://cloud1.lbox.me/images/m/201210/natale-babbo-natale-portachiavi-con-effetto-della-luce_putjik1350630943995.jpg" />
    <x-source media="(min-width: 30em)" src="http://www.babbonatale.name/immagini/immagini/babbo_natale_3.jpg" />
    <x-source media="(min-width: 45em)" src="http://www.babbonatale.name/immagini/immagini/babbo_natale_7.jpg" />
</x-picture>

<br />
<br />
<br />
&lt;-- move the slider --&gt;

CSS

x-picture{
        width: 300px;
        height: 200px;
        display:block;
}

JavaScript

(function(){
  
  var doc = document,
    win = window,
    head = doc.getElementsByTagName('head')[0];

  function nodeInserted(element, extendChildren){
    if (extendChildren && xtag.tagList.length && element.childNodes.length){
        xtag.query(element, xtag.tagList).forEach(function(element){
        nodeInserted(element);
      });
    }
    if (xtag.tagCheck(element)){
      xtag.extendElement(element);
      if (doc.documentElement.contains(element)){
        xtag.getOptions(element).onInsert.call(element);
      } 
    }
  };

  /**
  * Object containing various vendor specific details such as the CSS prefix
  * to use for the current browser.
  *
  * The following keys are set in the object:
  *
  * * css: the CSS prefix
  * * dom: the DOM prefix
  * * js: the Javascript prefix 
  * * lowercase: a lower cased version of the browser prefix
  *
  * An example of this object on Chromium is the following 
  *
  * {
  * css: "-webkit-"
  * dom: "WebKit"
  * js: "Webkit"
  * keyframes: true
  * lowercase: "webkit"  
  * }
  */
  var prefix = (function() {
    var styles = win.getComputedStyle(doc.documentElement, '');
    var pre = (
        Array.prototype.slice
        .call(styles)
        .join('')
        .match(/-(moz|webkit|ms)-/) || (styles.OLink==='' && ['','o'])
      )[1];

    var dom = ('WebKit|Moz|MS|O')
        .match(new RegExp('(' + pre + ')', 'i'))[1];

    return {
      dom: dom,
      lowercase: pre,
      css: '-' + pre + '-',
      js: pre[0].toUpperCase() + pre.substr(1)
    };
  })();

  /**
  * Stores the value of `current` in `source` using the key specified in
  * `key`.
  *
  * @param {object} source The object to store the value of the third
  * parameter.
  * @param {string} key The key under which to store the value.
  * @param {object|array} current The value to store in the object
  * specified in the `source` parameter.
  * @return {object}
  */
  function mergeOne(source, key, current){
    switch (xtag.typeOf(current)){
...