JSFiddle - React, Tailwind, and code Playground

HTML

<figure data-media="http://placehold.it/370x285/efc7de/555555" data-media440="http://placehold.it/520x285/aedcff/555555" data-media600="http://placehold.it/640x285/ffd1ae/555555">

        <a href="javascript:void(0);">
            <noscript>
                <img src="http://placehold.it/640x285/ffd1ae/555555">
            </noscript>
        </a>
</figure>

CSS

body{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAbu0lEQVR4Xo3cDa8jx62E4d18/mEjCJJfntjJ3kvBr/Cc8sjIAosjjWZ6usliscge6fvf//73H//973+//eEPf/h2f//85z9/+9e//vXtL3/5y7f7d8d++eWXb3/961+//fzzz6/P799//vOf12f3/09/+tO3P/7xj6/P7/1d++9///t9zY19n//48eP1+b3uHjf2jel4d/0db043/vfv39/399w7p393nnO6OdyxO+fG2/O6tmua583t/jnevc8mra3zOvfWdXPrXjfere3scmPddY1z62kddywbfP/HP/7x4wa4Sd2/JnknnAHvXwtbI3mNn7nQJtVEb2L965o1jAu817egdU6guOO3uDNO57xv8OuLA1P3P6N+Or+5BcwAGHhyXOMH5IyZ/c5egVKn3vxa6619HX7XvxzyevGrxzJSkaKxnoyZU24Cvd7IyXj3t0V8QtOBQIStcdcYLez+agSdrqEzggbxc49nwCIiROv4gLuIX8PHIEVrrNKY7wj56aefftxJhVQhXlRESTspz9coTTaKKxyjs1BUKDtxQ7zjLaSoiUJ11M5ferzzmt+dd+sw2u7zKLRI6jzvKVUblXdOFBsgFwAxkPOUBc4prfMVIfHzDSR9mUeeEB3ic+KNU54ICUWai2via9Q4XOeF6K4vgpuPxuy6Fl7kx+FRlZFk7pNSWlsAKurPabdGc2TgDEQyQZ+ZF1uD5/X6+yX1UHKeElEmuwy8+aGEGy2FrihM+gmZjaVDAkN/dcAZoRxRxN3fpbcWqhO9Zw7xXlHoRnlUtFwftQSE1rDoNwq1oyBujOjr1vhySGjLUKouDZSRPE8ENTlvUEhnDM/PuTpIAz5FjAsP6VHdLaj5hvbWpuGKUKMjJy7wjOzAumuOogKjDu8eMYXzC1wKkneENBFDzCTdAuPgDCf96AgjKaeENlWIkdSY5R9VnOMpJEJceeNJTt45S2eKGKNxAeM6VWuf1FPnB4AUm+yz94hlbo5vldUAhm6RsjTlcZN/AmBprxuWvFQr1gch/SZmaIe8omPp5anGcC45MCEhWjvv/kYhG6XN5c6JPp8otUi5cfqnirpj1S4BsXt1zZccYuEXorpJRlD13ARXb69aK9HnJA2l45Kt0oIRkjFUJEa1ucp7BKbyS+u4+yhFn5D8iR677znnyfDVTc1J5aqzc6rB8P2f//znDyvOUJpaMp+I2hak4pAaUiPJ1Ca1KmkNs6qp8DZhm5zfFvnVwM3njm/F31qkDEEV+vsbLcX7RpZRuzaS2u5eRpUCpeus+V4OWYqQkkRpkrio2KrX5GxkPYVnhlMyF5VN+ql9Y7uh+2X4DH3Hz2lRhHPJgdJjESXVlGi7NjBKl9Za2Swnqs5UbEVs8zBK79iLsrYytmhTMze5ZNwiI8PYShCN0oXUtEYS5RquhXn/nJ1R7x72xqSIaMmWiKqnXKecjoJDfffuvokJHWXtZaRGuwXAOuftEI1jEzG+jtJc3Fbaq7pcqGi5e21bxshKzUlln6r6O9eqPPDonEV495Y6NtK6n6h37Kr2en3R8iZ8neWcnhwRE33/29/+9mqdiF4vzoD3N+lmURRt2TwsDENXPKpQKCrLNUbpp0p2uf/eWye1UNscN1b3SOoGwJWx1iXNuVyqkuu+gWYlrV3hlcexQQ6QTl9UW7d3F6uEK8TiUSmmY9UgW+2X/FYSbm/LiT8lT52qo7tOaS6gAkyAyrDWP849cBq1OS5HrvLMBirBQKXKy8baURC9KvWSun37QtCTk3JNNA+rZNb4Rl57AS0+GrQ3FNq3X6SWt4XSwqJLjSx9bB5ZpbNO7fykeGstf9zni/yExM2166OsCuGuzzHK4ujxC2WJfKlgI8PuZjc3jFtAdGcSe2pDrzhQDkqTJtuioEUqOF...

JavaScript

/**
 * jQuery Picture
 * http://jquerypicture.com
 * http://github.com/Abban/jQuery-Picture
 * 
 * May 2012
 * 
 * @version 0.9
 * @author Abban Dunne http://abandon.ie
 * @license MIT
 * 
 * jQuery Picture is a plugin to add support for responsive images to your layouts.
 * It supports both figure elements with some custom data attributes and the new
 * proposed picture format. This plugin will be made redundant when the format is
 * approved and implemented by browsers. Lets hope that happens soon. In the meantime
 * this plugin will be kept up to date with latest developments.
 * 
 */
(function($) {
    $.fn.picture = function(args) {
        this.each(function() {
            var breakpoints = new Array();
            var windowWidth, currentMedia, element, timeoutOffset;

            // Save off the element so it can be easily used inside a function
            element = $(this);
            // Initialise the images
            getCurrentMedia(true);
            // Only call the image resize function 200ms after window stops being resized
            timeoutOffset = false;
            $(window).resize(function() {
                if (timeoutOffset !== false) clearTimeout(timeoutOffset);
                timeoutOffset = setTimeout(getCurrentMedia, 200);
            });

            /**
             * getCurrentMedia
             * 
             * Checks the window width off the media query types and selects the current one.
             * Calls the setPicture or setFigure function to set the image.
             * 
             */

            function getCurrentMedia(init) {
                if (init) {
                    if (element.get(0).tagName.toLowerCase() == 'figure') {
                        var mediaObj = element.data();
                        $.each(mediaObj, function(media) {
                            var num;
                            num = media.replace(/[^\d.]/g, '');
                            if (num) breakpoints.push(num);
             ...