JSFiddle - React, Tailwind, and code Playground

by lukerichison

HTML

<div id="overlay">
    <a id="optionsB"></a>
    <input id="search" type="search" placeholder="Search" onsearch="javascript:onSearch(this)"/>
    <div id="results">
        <div class="header"><span>zoom to parcel on map</span><span>view parcel information</span></div>
        <ul>
            <li>
                <img src="http://www.vanderburghassessor.org/assessor_images/07/080/09/157/007/DSC00209.JPG" alt="13611 BROWNWOOD LN"/><ul>
                    <li>first item</li>
                    <li>13611 BROWNWOOD LN</li>
                    <li>82-04-10-009-157.007-030</li>
                    <li>SNYDER, LUKE E</li>
                    <li>several</li>
                    <li>extra</li>
                    <li>items</li>
                </ul>
            </li>
            <li>
                <img src="http://www.vanderburghassessor.org/assessor_images/07/080/09/157/007/DSC00209.JPG" alt="13611 BROWNWOOD LN"/><ul>
                    <li>13611 BROWNWOOD LN</li>
                    <li>82-04-10-009-157.007-030</li>
                    <li>SNYDER, LUKE E</li>
                </ul>
            </li>
            <li>
                <img src="http://www.vanderburghassessor.org/assessor_images/07/080/09/157/007/DSC00209.JPG" alt="13611 BROWNWOOD LN"/><ul>
                    <li>13611 BROWNWOOD LN</li>
                    <li>82-04-10-009-157.007-030</li>
                    <li>SNYDER, LUKE E</li>
                    <li>several</li>
                    <li>extra</li>
                    <li>items</li>
                    <li>several</li>
                    <li>extra</li>
                    <li>items</li>
                </ul>
            </li>
            <li>
                <img src="http://www.vanderburghassessor.org/assessor_images/07/080/09/157/007/DSC00209.JPG" alt="13611 BROWNWOOD LN"/><ul>
                    <li>13611 BROWNWOOD LN</li>
                    <li>82-04-10-009-157.007-030</li>
                    <li>SNYDER, LUKE E</li>
               ...

CSS

</style>
    <meta
        name="viewport"
        content="width=device-width,
                initial-scale=1.0,
                maximum-scale=1.0,
                user-scalable=no" />
<style>
.ui-shadow,
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-body-b,
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b,
.ui-bar-c,
.ui-body-c,
.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c,
.ui-bar-c,
.ui-body-d,
.ui-btn-up-d,
.ui-btn-hover-d,
.ui-btn-down-d,
.ui-bar-d,
.ui-body-e,
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e,
.ui-bar-e,
.ui-overlay-shadow,
.ui-shadow,
.ui-btn-active,
.ui-body-a,
.ui-bar-a {
 text-shadow: none;
 box-shadow: none;
 -webkit-box-shadow: none;
}

html, body {
    height: 100%;
    overflow: auto;
}
body {
    margin: 0;
    padding: 0;
    background-image: url(http://www.6717000.com/leftbank/images/gmap.jpg);
}
body, input {
    font: 1em/1em "Source Sans Pro", sans-serif;
}
#optionsB {
    position: absolute;
    right: 0.5em;
    top: 0.75em;
    display: block;
    margin: 0;
    height: 1em;
    width: 1em;
    padding-left: 0.5em;
    background-image: url(http://lukerichisondesign.com/images/sprite.svg?v2);
    background-repeat: no-repeat;
    background-size: 4em 1em;
    background-position: 0.5em 0;
    border-left: 1px solid #777;
}
#search::-webkit-search-decoration {
  display: none;
}
#search::-webkit-input-placeholder {
    line-height: 1.25;
}
#search.placeholder_text {
}
#overlay {
    margin: 0.5em;
    border-radius: 3px;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.6);
    background-color: rgba(235,235,235,0.9);
    overflow: hidden;
    position: relative;
}
#search {
    -webkit-appearance: none;
    width: 100%;
    border-radius: 3px;
    margin: 0;
    padding: 0.5em 4em 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:...

JavaScript

var MH = $(window).height() - ($('#overlay').offset().top * 2) - $('#search').outerHeight();

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

$('#results').children('ul').children('li').click(function () {
    $(this).closest('div').animate({scrollTop: 
        $(this).closest('div').scrollTop()+
        $(this).position().top-
        $(this).closest('div').offset().top+
        $('#overlay').offset().top
    }, 600).css({
        'max-height': $(this).outerHeight(true),
        'overflow' : 'hidden'
    }).on('touchmove', function(e){
        e.preventDefault();
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        // listen for a user to swipe downward, so far
        if (touch.pageY - $(this).offset().top > 200) {
            $('#results').off('touchmove').removeAttr('style').css('max-height', MH);
        }
    });
});