JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<div id="overlay"></div>

<div id="dialog">
    <form>
        <input type="text" class="question" id="question" />
        <button id="ask">Ask Question</button>
        <ul>
            <li>What is the <strong>probab</strong>ility that the number chosen is even?</li>
            <li class="selected">After spinning the spinner, what is the <strong>probab</strong>ility of landing each color?</li>
            <li>What is the <strong>probab</strong>iity of drawing a ball with a number greater than 4?</li>
                        <li>See all from “<strong>probab</strong>”</li>
        </ul>
    </form>
</div>

CSS

#dialog {
    visibility: hidden;
}

#dialog {
    background: #FFF;
    border: 1px solid #c8d3dc;
    border-bottom-color: #98a4ae;
    height: 40px;
    left: 185px;
    overflow: hidden;
    padding: 6px;
    position: absolute;
    top: 100px;
    width: 490px;
    
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    
    -moz-box-shadow: 0 -1px #FFF, 0 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 -1px #FFF, 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 -1px #FFF, 0 1px 2px rgba(0,0,0,.2);
}

form li {
    color: #444444;
    padding: .4em .8em;
    margin: 0 -6px;
}
form li.selected {
    background: #d4e7f4;  
    color: #385977;
}
form li:last-child {
    background-color: #F8F8F8;
    background-image: -moz-linear-gradient(top, #EEF2f6, #E3E9EE);
    background-image: -o-linear-gradient(top, #EEF2f6, #E3E9EE);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #EEF2f6),color-stop(1, #E3E9EE));
    border-top: 1px solid #DCE2E8;
    bottom: 0;
    color: #2C3945;
    padding: .4em 0;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px #F5F7F9;
    width: 100%;
    
    -moz-box-shadow: inset 0 1px #F4F6F9, inset 0 -2px #D6DFE6;
    -webkit-box-shadow: inset 0 1px #F4F6F9, inset 0 -2px #D6DFE6;
    box-shadow: inset 0 1px #F4F6F9, inset 0 -2px #D6DFE6;
}
form li strong {
    font-weight: bold;
    text-decoration: underline;  
}
form li:last-child strong {
    text-decoration: none;
}

input.question {
    border: 1px solid #B0BCC1;
    outline: none;
    padding: 6px;
    visibility: visible;
    width: 350px;

    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius:...

JavaScript

$(document).ready(function() {
    var overlay = $('#overlay'),
        dialog = $('#dialog'),
        cancel = $('#cancel');

    $('#question').focus(function() {
        openDialog();
    }).blur(function() {
        closeDialog();
    });

    cancel.click(closeDialog);

    function openDialog() {
        dialog.css('visibility', 'visible').animate({
            height: 145
        }, 100, 'easeInOutQuad');
    }

    function closeDialog() {
        dialog.css({
            visibility: 'hidden',
            height: 40
        });
    }
});