JSFiddle - React, Tailwind, and code Playground

by johnny000

HTML

<div class="head-container">
    
<h1>deliverus</h1>
    <div class="login-button">Anmelden</div>
    <div class="login-button">Registrieren</div>
</div>
<div class="container">
    <div class="box">
        <label>Postleitzahl / Stadt</label>
        <input name="zip" placeholder="13371, Berlin">
        <div class="autocomplete">
            <ul>
                <li>52146, Würselen</li>
                <li>52146, Herzogenrath</li>
                <li>52146, Alsdorf</li>
                <li>52146, Eschweiler</li>
            </ul>
        </div>
        <div class="button">Supermarkt finden</div>
    </div>
</div>
<div class="info-box">
    <ol>
        <li>Supermarkt auswählen</li>
        <li>Bestellung abgeben mit wunsch Liefertermin</li>
        <li>Bequem zuhause den einkauf empfangen</li>
    </ol>
</div>

CSS

html, body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}
html {
    background: #3399FF;
}
* {
    font-family:'Roboto', sans-serif;
}
h1 {
    margin:0;
    padding: 0 10px;
    color:white;
    text-shadow: 0 1px 0 #000;
    display:inline;
}
.head-container {
    display:block;
}
.head-container .login-button{
    display:inline;
    float:right;
    color:#FFF;
    background:#000;
    padding:4px;
    border-radius:5px;
    margin:5px;
}
input {
    border:0px;
    background:#EEE;
    border-radius:5px;
    padding:10px;
    outline:none;
    color:#999;
    font-weight:bold;
    margin:0 0 10px 0;
    display:block;
    border:1px solid #EEE;
    width:230px;
}
input:focus {
    border:1px solid #33CC66;
    box-shadow:0 0 10px #339933;
    background:#FFF;
}
.box {
    margin:0 auto;
    width:250px;
    padding:10px 10px 15px 10px;
    border-radius:5px;
    background:rgb(255, 255, 255);
    box-shadow: 0 0 15px #000;
    margin-top:100px;
    margin-bottom:100px;
    display:block;
}
.box label {
    color:#AAA;
    font-weight:bold;
}
.button {
    cursor:pointer;
    background: #acd347;
    /* Old browsers */
    background: -moz-linear-gradient(top, #acd347 0%, #33cc66 74%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #acd347), color-stop(74%, #33cc66));
    background: -webkit-linear-gradient(top, #acd347 0%, #33cc66 74%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #acd347 0%, #33cc66 74%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #acd347 0%, #33cc66 74%);
    /* IE10+ */
    background: linear-gradient(to bottom, #acd347 0%, #33cc66 74%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#acd347', endColorstr='#33cc66', GradientType=0);
    border-radius:5px;
    padding:9px;
    display:block;
    color:#FFF;
    font-weight:bold;
    text-shadow:0 1px 0px #000;
    text-align:center;
   ...

JavaScript

(function ($) {

    function showAutocomplete() {
        $(".autocomplete").show();
    }

    $(document).on("keyup", "input[name=zip]", function (e) {
        showAutocomplete();
    })
        .on("blur", "input[name=zip]", function (e) {
        setTimeout(function () {
            $(".autocomplete").hide();
        }, 200);
    })
        .on("click", ".autocomplete li", function (e) {
        $("input[name=zip]").val($(this).text());
    });
})(jQuery)