JSFiddle - React, Tailwind, and code Playground

Website Interactions without code

by Jennifer Perrin

HTML

<body>
    <div class="header" data-ix="show-nav">
        <div class="w-nav nav" data-collapse="medium" data-animation="over-right" data-duration="400" data-contain="1" data-doc-height="1" data-ix="nav-bar-load" data-easing="ease-out-quart" data-easing2="ease-out-quart">
            <div class="w-container"> <a class="w-nav-brand w-clearfix brand" href="https://webflow.com"><img class="webflow-logo" src="http://uploads.webflow.com/5317d67d660658b254000454/532c9ebda8f3d7636e0002f4_webflow-logo-black.svg" height="23" alt="532c9ebda8f3d7636e0002f4_webflow-logo-black.svg">
                    <div class="brand-subtitle">IX Design</div>
                </a>

                <nav class="w-nav-menu nav-menu" role="navigation"> <a class="w-hidden-main w-inline-block close-link" href="#">
                        <div>✕</div>
                    </a><a class="w-nav-link nav-link" href="#examples">Examples</a><a class="w-nav-link nav-link" href="#videos">Videos</a><a class="w-nav-link nav-link sign-up" href="https://webflow.com/dashboard/signup">Try it now</a>

                </nav>
                <div class="w-nav-button menu-button">
                    <div class="w-icon-nav-menu"></div>
                </div>
            </div>
        </div>
        <div class="w-container contents">
            <div class="main-heading-wrapper">
                 <h1 data-ix="fade-in-heading">Website&nbsp;</h1>

                 <h1 data-ix="fade-in-heading-2">Interactions</h1>

                 <h1 class="without-code" data-ix="fade-in-heading-3">without</h1>

                 <h1 class="without-code" data-ix="fade-in-heading-4">code</h1>

                <div class="w-hidden-small w-hidden-tiny header-1" data-ix="heading-text-load">Everything you see on this page was built visually in <a style="text-decoration: none;" href="http://webflow.com">Webflow</a>.</div>
            </div>
             <h2 class="main-subtitle" data-ix="subtitle-load">Now you can design interactions and...

CSS

@media screen and (min-width: 1200px) {
    .w-container {
        max-width: 1170px;
    }
    .works-row {
        width: auto;
    }
    .works-column {
        width: 25%;
    }
}
*/article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display:block
}
audio, canvas, video {
    display:inline-block
}
audio:not([controls]) {
    display:none;
    height:0
}
[hidden], template {
    display:none
}
html {
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body {
    margin:0
}
a {
    background:transparent
}
a:focus {
    outline:thin dotted
}
a:active, a:hover {
    outline:0
}
h1 {
    font-size:2em;
    margin:.67em 0
}
abbr[title] {
    border-bottom:1px dotted
}
b, strong {
    font-weight:bold
}
dfn {
    font-style:italic
}
hr {
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    height:0
}
mark {
    background:#ff0;
    color:#000
}
code, kbd, pre, samp {
    font-family:monospace, serif;
    font-size:1em
}
pre {
    white-space:pre-wrap
}
q {
    quotes:"\201C""\201D""\2018""\2019"
}
small {
    font-size:80%
}
sub, sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup {
    top:-0.5em
}
sub {
    bottom:-0.25em
}
img {
    border:0
}
svg:not(:root) {
    overflow:hidden
}
figure {
    margin:0
}
fieldset {
    border:1px solid #c0c0c0;
    margin:0 2px;
    padding:.35em .625em .75em
}
legend {
    border:0;
    padding:0
}
button, input, select, textarea {
    font-family:inherit;
    font-size:100%;
    margin:0
}
button, input {
    line-height:normal
}
button, select {
    text-transform:none
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled], html input[disabled] {
    cursor:default
}
input[type="checkbox"], input[type="radio"] {
    box-sizing:border-box;
    padding:0
}
input[type="search"] {
 ...

JavaScript

/*!
 * ----------------------------------------------------------------------
 * Webflow: Front-end site library
 * @license MIT
 * Other scripts may access this api using an async handler:
 *   var Webflow = Webflow || [];
 *   Webflow.push(readyFunction);
 * ----------------------------------------------------------------------
 */
var Webflow = {
    w: Webflow
};
Webflow.init = function () {
    'use strict';

    var $ = window.$;
    var api = {};
    var modules = {};
    var primary = [];
    var secondary = this.w || [];
    var $win = $(window);
    var $doc = $(document);
    var _ = api._ = underscore();
    var domready = false;
    var tram = window.tram;
    var Modernizr = window.Modernizr;
    var noop = function () {};
    tram.config.hideBackface = false;
    tram.config.keepInherited = true;

    /**
     * Webflow.define() - Define a webflow.js module
     * @param  {string} name
     * @param  {function} factory
     */
    api.define = function (name, factory) {
        var module = modules[name] = factory($, _);
        if (!module) return;
        // If running in Webflow app, subscribe to design/preview events
        if (api.env()) {
            $.isFunction(module.design) && window.addEventListener('__wf_design', module.design);
            $.isFunction(module.preview) && window.addEventListener('__wf_preview', module.preview);
        }
        // Subscribe to module front-end events
        $.isFunction(module.destroy) && $win.on('__wf_destroy', module.destroy);
        // Look for a ready method on module
        if (module.ready && $.isFunction(module.ready)) {
            // If domready has already happened, call ready method
            if (domready) module.ready();
            // Otherwise push ready method into primary queue
            else primary.push(module.ready);
        }
    };

    /**
     * Webflow.require() - Load a Webflow.js module
     * @param  {string} name
     * @return {object}
     */
    api.require =...