.textbox {
    box-sizing: border-box;
    display: inline-block;
    perspective: 500px;
    position: relative;
    text-align: left;
}

    .textbox input {
        border: none;
        box-shadow: 0 8px 8px -10px rgba(0, 0, 0, .4);
        box-sizing: border-box;
        font-size: 1rem;
        outline: none;
    }

    .textbox input::placeholder {
        color: #ccc;
    }

    .textbox .autoComplete {
        left: 0;
        position: absolute;
        top: calc(100% + 5px);
        width: 100%;
    }

    .textbox .autoComplete .item {
        animation: showItem .3s ease forwards;
        background: #fff url(https://d2r3fkmprkayl1.cloudfront.net/eventapp.png) no-repeat 10px center;
        box-shadow: 0 8px 8px -10px rgba(0, 0, 0, .4);box-sizing: border-box;color: #000;
        cursor: pointer;display: block;font-size: .8rem;opacity: 0;outline: none;padding: 10px 10px 10px 35px;
        text-decoration: none;transform-origin: top;transform: translateX(10px);border-bottom:1px solid #ddd;
    }
    .textbox .autoComplete .item:hover, .textbox .autoComplete .item:focus {
        color: var(--bs-indigo);
        background-color:#eee;
    }
    .textbox .autoComplete .item:last-child {
        border:none;
    }


@keyframes showItem {
    0% {
        opacity: 0;
        /* transform: rotateX(-90deg); */
        transform: translateX(10px);
    }

    100% {
        opacity: 1;
        /* transform: rotateX(0); */
        transform: translateX(0);
    }
}