JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<div id="wrapper" class="clearfix">
    
    <p>In a moment, we’re going to ask some questions about different parts of your life. But before we begin, we’d like to ask:</p>
    
    <h1>What are your goals?</h1>
    
    <div id="left-column">
        <ul>
            <li>Be proactive</li>
            <li>Feel less stressed</li>
            <li>Quit smoking</li>
            <li>Drink less</li>
            <li>Lose weight</li>
            <li>Enjoy my work</li>
            <li>Sleep</li>
            <li>Give back</li>
            <li>Achieve carrer goals</li>
            <li>Volunteer</li>
        </ul>
        
        <p>Our experts suggest you pick <b>no more than three</b>.</p>
    </div>
    
    <div id="right-column">
        <div id="goal-list">
            <h3>My Goals</h3>
            <ul></ul>
        </div>
    </div>
    
</div>

CSS

#wrapper {
    border-bottom: 1px solid #F0F0F0;
    font-family: 'helvetica neue', arial, sans-serif;
    margin: 50px auto;
    padding-bottom: 30px;
    width: 725px;
}

#wrapper p {
    font-size: 16px;
    color: #666;   
    margin-bottom: 20px;
}

h1, h3 {
    font-weight: bold;
}

h1 {
    color: #00ADEF;
    font-size: 34px;
    margin-bottom: 30px;
    text-align: center;   
}

#left-column {
    background: #F7F7F7;
    float: left;
    padding: 30px;
    width: 385px;
}

#left-column ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -moz-column-gap: 30px;
    -webkit-column-gap: 30px;
}

#left-column li {
    background: #E5E5E5;
    border: 1px solid #F7F7F7;
    color: #666666;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    padding: 7px;
    text-align: center;
    
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    -webkit-border-radius: 40px;
}

#left-column li:hover {
    background: #D5D5D5;
}

#left-column li:active {
    background: #AAAAAA;
}

#left-column li.active {
    background-color: #00ADEF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.15)), to(rgba(0,0,0,0)));
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.15), #rgba(0,0,0,0));
    background-image: -ms-linear-gradient(top, rgba(255,255,255,0.15), #rgba(0,0,0,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,0.15), #rgba(0,0,0,0));
    background-image: linear-gradient(top, rgba(255,255,255,0.15), #rgba(0,0,0,0));
    border: 1px solid #00A2E0;
    border-bottom-color: #0095CE;
    color: #FFFFFF;
    text-shadow: 0 1px rgba(0,0,0,.1);
    
    -moz-box-shadow: 0 1px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 1px rgba(0,0,0,.1);
    box-shadow: 0 1px rgba(0,0,0,.1);
}

#left-column li:nth-child(1),
#left-column li:nth-child(6) {
    margin-top: 0;
}

#left-column p {
    background: #F0F0F0;
    border-top: 1px dashed #DEDEDE;
...

JavaScript

$(document).ready(function() {
    
    var $goals = $('#left-column li');
        count = 0;
    
    $goals.toggle(function() {
        
        if(count < 3) {
            count++;
            
            var $this = $(this).addClass('active'),
                string = $this.html(),
                $li = $('<li>' + string + '</li>');
            
            $li.data('x', $this.index()).appendTo('#goal-list ul').animate({ 
                'padding-left': '30px',
                opacity: '1'
            }, 1);
        } else {
            var $alert = $('#left-column p').css('color', 'red');
            
            setTimeout(function() {
                $alert.css('color', '#888888');
            }, 5000);
        }
        
    }, function() {
        
        count--;
        
        var $this = $(this).removeClass('active'),
            index = $this.index();
        
        $('#goal-list li').each(function() {
            var $this = $(this);
            
            if($this.data('x') === index) {
                $this.css({ 
                    'padding-left': '10px',
                    opacity: '0'
                });
                
                setTimeout(function() {
                       $this.remove(); 
                }, 500);
                
                return false;
            }
        });
    });
    
});