JSFiddle - React, Tailwind, and code Playground

by Ryan Clark

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body, html {
    font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.navigation {
    list-style: none;
}

.navigation__item {
    float: left;
    position: relative;
    color: #262626;
}

.navigation__item a {
    text-decoration: none;
    color: inherit;
    padding: 5px 8px 10px;
}

.navigation__dropdown {
    display: none;
    background: #F7F7F7;
    border: 1px solid rgba( 0, 0, 0, 0.1 );
    position: absolute;
    width: 150px;
    top: 25px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
}

.navigation__dropdown--open {
    display: block;
}

.navigation__dropdown__item {
    list-style: none;
    padding: 5px 7px;
}

JavaScript 1.7

var navigationConfig = [
    {
        href: 'http://ryanclark.me',
        text: 'My Website',
        children: [
            {
                href: 'http://ryanclark.me/how-angularjs-implements-dirty-checking/',
                text: 'Angular'
            },
            {
                href: 'http://ryanclark.me/getting-started-with-react/',
                text: 'React'
            }
        ]
    },
    {
        text: 'Social Networks',
        children: [
            {
                href: 'http://twitter.com/rynclark',
                text: 'My Twitter'
            },
            {
                href: 'http://facebook.com',
                text: 'Facebook'
            },
            {
                href: 'http://linkedin.com',
                text: 'LinkedIn'
            }
        ]
    },
    {
        text: 'Search Engines',
        children: [
            {
                href: 'http://google.co.uk',
                text: 'Google'
            },
            {
                href: 'http://google.co.uk',
                text: 'Bing' // yeah right
            },
            {
                href: 'http://google.co.uk',
                text: 'Yahoo' // haha
            }
        ]
    }
];

var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: []
        }
    },
    openDropdown: function (id) {
    console.log('open!');
        this.setState({
            openDropdown: id
        });
    },
    closeDropdown: function () {
        this.setState({
            openDropdown: -1
        });
    },
    propTypes: {
        config: React.PropTypes.array
    },
    render: function () {
        var config = this.props.config;

        var items = config.map(function (item, index) {
            var children, dropdown;
            if (item.children) {
                children =...