JSFiddle - React, Tailwind, and code Playground

by Jonathan Kutnowski

HTML

<div class="wrap">
            <div class="container">
                <ul>
                    <li>Home</li>
                    <li>Gallery</li>
                    <li>About</li>
                    <li>Hola</li>
                    <form action="#" method="POST" name="sb-form">
                    <input type="search" name="sb-search" id="sb-search" placeholder="Search..." autocomplete="off">
                    <input type="submit" style="position: absolute; left: -9999px"/>
                    </form>
                </ul>
            </div>
            <div class="content">
                <h2>Esta es una de mis pruebas</h2>
                <img src="http://placehold.it/200x200" class="imgright" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, dolorem incidunt fugit quam quaerat asperiores sed placeat enim sequi suscipit eius at consequuntur error aliquam aperiam nesciunt illo perspiciatis debitis veritatis alias voluptatibus laudantium itaque assumenda doloremque id autem ducimus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, dolorem incidunt fugit quam quaerat asperiores sed placeat enim sequi suscipit eius at consequuntur error aliquam aperiam nesciunt illo perspiciatis debitis veritatis alias voluptatibus laudantium itaque assumenda doloremque id autem ducimus.</p>
                <img src="http://placehold.it/200x200" class="imgleft" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, dolorem incidunt fugit quam quaerat asperiores sed placeat enim sequi suscipit eius at consequuntur error aliquam aperiam nesciunt illo perspiciatis debitis veritatis alias voluptatibus laudantium itaque assumenda doloremque id autem ducimus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, dolorem incidunt fugit quam quaerat asperiores sed placeat enim sequi suscipit eius at...

CSS

html, body {
    height: auto;
    width: 100%;
}

body {
    background-color: #ececec;
    font-family: sans-serif;
}

form {
    display: inline;
}

.wrap {
    width: 600px;
    margin: 0px auto;
    background: #fff;
    height: auto;
    margin-top: -16px;
    margin-bottom: -16px;
    padding-bottom: 50px;
}

.container {
    width: 600px;
    height: 40px;
    background-color: #ec3434;
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
    padding: 0px;
    /*margin: 50px auto;*/
}

.container ul {
    list-style: none;
    padding: 9px;
}

.container ul > li {
    display: inline-block;
    padding-right: 10px;
    padding-left: 5px;
    color: #fff;
}

.content {
    padding: 0px 20px;
}

.imgright {
    float: right;
    margin: 0px 0px 15px 15px;
}

.imgleft {
    float: left;
    margin: 0px 15px 15px 0px;
}

#sb-search {
    float: right;
    width: 40%;
    font: 2em Arial,sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 0px;
    height: 20px;
    font-size: 13px;
    padding: 2px 0px 1px 4px;
    margin-right: -2px;
}

footer {
    font-size: 11px;
    text-align: center;
    width:100%;
    height:40px;
    line-height: 40px;
    /*position:absolute;*/
    bottom:0;
    left:0;
    background:#9999af;
    color: #fff;
}

*:focus {
    outline: 0;
}

textarea:focus, input:focus{
    outline: 0;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #ccc;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #ccc;
}

.active {
    text-decoration: underline;
}

JavaScript

$('.container #sb-search').focus(function() {
                $(this).animate({width: "100%"}, 400)
                // .addClass('active')
                .parent().siblings().fadeOut(100);
            });
            $('.container #sb-search').blur(function(){
                $(this).animate({width: "40%"}, 400)
                // .removeClass('active')
                .parent().siblings().delay(300).fadeIn(300);
            });

            $('ul > li').click(function() {
                if ($(this).hasClass('active')) {
                    return;
                } else {
                    $(this).addClass('active')
                    .siblings().removeClass('active');
                }

            });