JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://github.hubspot.com/messenger/build/css/messenger.css">
<link rel="stylesheet" href="http://github.hubspot.com/messenger/build/css/messenger-theme-air.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script src="http://github.hubspot.com/messenger/build/js/messenger.js"></script>
<div class="summary"><p></p></div>

<div class="test-item test-item-1">
    <p class="prompt"><b>Test 1</b> Fix link on the right by adjusting the CSS above</p>
    <div class="example">
        <div class="toolbar">
            <div class="toolbar-text">Box</div>
            <div class="toolbar-text toolbar-text-right"><a>Help</a></div>
        </div>
    </div>
</div>

<div class="test-item test-item-2">
    <p class="prompt"><b>Test 2</b> Fix buttons</p>
    <div class="example">
        <div class="toolbar">
            <div class="toolbar-text">Box</div>
            <a class="toolbar-button">Action</a>
            <a class="toolbar-button">Action</a>
            <div class="toolbar-text toolbar-text-right"><a>Help</a></div>
        </div>
    </div>
</div>

<div class="test-item test-item-3">
    <p class="prompt"><b>Test 3</b> Hide the "Help" link when the box is small</p>
    <div class="example">
        <div class="toolbar">
            <div class="toolbar-text">Box</div>
            <a class="toolbar-button">Action</a>
            <a class="toolbar-button">Action</a>
            <div class="toolbar-text toolbar-text-right"><a>Help</a></div>
        </div>
    </div>
</div>

<div class="test-item test-item-4">
    <p class="prompt"><b>Test 4</b></p>
    <div class="example">
        <div class="toolbar">
            <div class="toolbar-text">Box</div>
            <a class="toolbar-button">Action</a>
            <a class="toolbar-button">Action</a>
            <div class="toolbar-text...

CSS

.toolbar {
    height: 40px;
    box-sizing: border-box;
    padding: 10px 13px;
    background-color: #eee;
    background-image: -webkit-linear-gradient(#f6f6f6, #eee);
    border-bottom: 1px solid #ccc;
    font-size: 13px;
}

.toolbar-text {
    line-height: 21px;
    text-shadow: 0 1px #fff;
    font-weight: 500;
    margin-right: 10px;
}

.toolbar-text.toolbar-text-right {
    float: right;
    margin-right: 0px;
    margin-top:-20px;
}

.toolbar-button {
    display: inline-block;
    float: left;
    padding: 5px 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    color: #444;
}

/* Test 4 tip: */
.test-item-4 .toolbar {
    
}

/*



                         Do not scroll past this point.




*/

/* Base CSS */

html, body {
    margin: 0;
    color: #444;
    -webkit-user-select: none;
    user-select: none;
}

html, body, body ul.messenger-theme-air {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
    cursor: pointer;
    color: #3288e6;
}

.test-item, .summary {
    margin: 0 20px;
    display: none;
}

.example {
    border: 1px solid #ccc;
    height: 200px;
    background: #f8f8f8;
}

.test-item-3 .example {
    width: 200px;
}

.test-item-4 .example {
    border-radius: 5px;
}

.toolbar-button:hover {
    border: 1px solid #c0c0c0;
}

.toolbar-button:active {
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ================================ Answers ================================ */


/* The answers are below */


/* ================================ Answers ================================ */


/* Stop scrolling to avoid accidentally seeing the answers. */


/* ================================ Answers ================================ */


/* The answers are below */


/* ================================ Answers ================================ */


/* Stop scrolling to avoid accidentally seeing the answers. */


/* ================================ Answers...

JavaScript

// Please do not scroll this window down as the solutions are below.












































































Messenger.options = {
	extraClasses: 'messenger-fixed messenger-on-bottom',
	theme: 'air'
};

var showTip = function(message) {
    Messenger().post({
        message: message,
        type: 'info'
    });
};

var showSuccess = function(message) {
    Messenger().post(message);
};

var openTestItem = function(number) {
    var summaryText = '';
    $('.test-item').hide();
    $('.test-item-' + number).show();
    if (number < 2) {
        $('.summary').hide();
    } else {
        if (number === 2) {
            summaryText = '<strike><b>Test 1</b></strike>';
        } else {
            summaryText = '<strike><b>Test 1&ndash;' + (number - 1) + '</b></strike>';
        }
        $('.summary').show().find('p').html(summaryText);
    }
}

openTestItem(1);

testChecks = [
    {
        check: function() {
            return $('.test-item-1 .toolbar-text:first-child').css('float') === 'left';
        },
        tip: 'Try inspecting the .toolbar-text element with text "Box".'
    },
    {
        check: function() {
            var $button = $('.test-item-2 .toolbar-button');
            return (
                $button.css('margin-top') === '-3px' ||
                $button.css('margin-top') === '-2px' ||
                (
                    $button.css('position') === 'relative' &&
                    (
                        $button.css('top') === '-3px' ||
                        $button.css('top') === '-2px'
                    )
                )
            );
        },
        tip: 'Margins are your friend.'
    },
    {
        check: function() {
            return $('.test-item-3 .toolbar').css('overflow') === 'hidden';
        },
        tip: 'What styles can you apply to the .toolbar?'
    },
    {
        check: function() {
            var $toolbar = $('.test-item-4 .toolbar');
            return (
         ...