JSFiddle - React, Tailwind, and code Playground

by Prasad Gavande

HTML

<!-- Responsive JS -->

<!-- Width, color and margin changes accroding to size of the devices-->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>r$ - Interpolation with Media Query</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="responsive.js"></script>
</head>
<body>
    <div id="box" style="width: 200px; height: 200px">
        <h1 style="color:#FFF">#box</h1>
    </div>

    <div id="box2" style="width: 200px; height: 200px">
        <h1 style="color:#FFF">#box2</h1>
    </div>

    <table style="width: 100%">
        <tr>
            <td style="vertical-align: top">
                <h1>Output</h1>
                <div id="output"></div>
            </td>
            <td style="vertical-align: top">
                <h1 style="padding-left: 35px">Code</h1>
                <blockquote>
                    r$.settings().debug = true;<br />
                    r$.settings().indent = true;<br />
                    r$.settings().useMediaQuery = true;<br />
                    r$.breakpoints(300, 767, 1280, 1600);<br />
                    var color = r$.set('background-color').values('#FF351E', '#99FF26', '#59F3FF', '#AB44FF');<br />
                    var width = r$.set('width', 'px').values(200, 600, 1000, 1400);<br />
                    color.linear().applyTo('#box');<br />
                    color.interval().applyTo('#box2');<br />
                    width.interval().applyTo('#box');<br />
                    width.linearInt(5).applyTo('#box2');<br />
                    r$.start(); 
                </blockquote>

            </td>
        </tr>
    </table>

    <br />
    <br />

    <script type="text/javascript">
        r$.settings().debug = true;
        r$.settings().indent = true;
        r$.settings().useMediaQuery = true;
        r$.breakpoints(300, 767, 1280, 1600);
		
//change background color
        var color = r$.set('background-color').values('#FF351E', '#99FF26',...