JSFiddle - React, Tailwind, and code Playground

by lukerichison

HTML

<input id="search" type="search" placeholder="Search" onsearch="javascript:onSearch(this)"/>

CSS

</style>
<meta
    name="viewport"
    content="width=device-width,
        initial-scale=1.0,
        maximum-scale=1.0,
        user-scalable=no" />
<script type="text/javascript">
    function onSearch(input) {
        if (!input.value) {console.log('clear'); }
        else { console.log(input.value); }
    }
</script>
<style>
body,
input {
    font: 1em/1 "Source Sans Pro", sans-serif;
}
#search {
    width: 100%;
    border-radius: 3px;
    margin: 0;
    padding: 0.5em 2em 0.5em 1em;
    box-sizing: border-box;
    box-shadow:
        0 0 0.5em rgba(0,0,0,0.6),
        0 0.5em 0.5em rgba(245,245,245,0.9);
    border: 1px solid #F4F4F4;
    background: none;
    position: relative;
    z-index: 5;
}
#search::-webkit-input-placeholder {
    line-height: 1.25;
}
#search::-webkit-search-cancel-button {
    position: absolute;
    top: 0.5em;
    right:0.5em;
    -webkit-appearance: none;
    display: block;
    height: 1em;
    width: 1em;
    padding: 0;
    margin: 0;
    background-image: url(http://lukerichisondesign.com/images/x.svg);
    background-repeat: no-repeat;
    background-size: 1em 1em;
}
#search.on::-webkit-search-cancel-button {
    background-image: url(http://lukerichisondesign.com/images/loading.svg);
    -webkit-animation: spin 1s infinite linear;
       -moz-animation: spin 1s infinite linear;
        -ms-animation: spin 1s infinite linear;
         -o-animation: spin 1s infinite linear;
            animation: spin 1s infinite linear;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

JavaScript

function onSearch(input) {
    if (!input.value) {searchClear();}
    else { searchSubmit(input.value); }
}
function searchSubmit(searchValue) {
    $('#results').removeAttr('style');
    $('#search').blur().addClass('on');
    console.log(searchValue);
    var t=setTimeout(function(){        
        $('#search').removeClass('on');
        $('#results').css('max-height', MH);
    },2000);
}
function searchClear(){
    $('#results').removeAttr('style');
}