JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top_bar">
    <ul>
        <li><a href="#">Top Stories</a></li>
        <li><a href="#">Most Recent</a></li>
        <li><a href="#">7 Days</a></li>
        <li><a href="#">This month</a></li>
    </ul>
    <form id="new">
        <input type="text" id="new_link" value="Submit a link" />
    </form>
</div>

CSS

#top_bar {
    background-color: #efefef;
    overflow: hidden;
    padding: 5px 10px 15px;
    
    border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
}

#top_bar {
    
}

#top_bar li {
    float: left;
    margin-left: 10px;
    margin-top: 6px;
}

#top_bar li a {
    display: block;
    color: #666;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding: 4px 10px 5px;
    
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#top_bar li a:hover {
    background-color: #ddd;
}

#top_bar #new {
    width: 600px;
    position: relative;
}

#top_bar #new #new_link {
    width: 160px;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #ddd;
    padding: 8px;
    color: #999;
    
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
    
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    
    position: absolute;
    right: 0;
}

#new_link.active {
    color: #333;
}

JavaScript

var input = $('#new_link');
var nav = $('#top_bar ul');
var placeholder = input.val();
var originalWidth = input.width();
var newWidth = 450;

input.focus(function() {
    input.animate({
        width: newWidth
    }, 100).addClass('active').val('');
    
    nav.fadeTo(100, 0.3);
});

input.blur(function() {
    $(this).animate({
        width: originalWidth
    }, 100).removeClass('active').val(placeholder);
    
    nav.fadeTo(100, 1);
});