Playground

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<div class="p-8">
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>

    <div x-data="{ count: 0 }">
        <button x-on:click="count++">Increment</button>
        <button x-on:click="count--">Decrease</button>
        <span x-text="count">
            << /span>

    </div>

    <hr class="my-12">

    <div x-data="{ open: false, toggle() { this.open = ! this.open } }">
        <button @click="toggle()">Toggle Content</button>

        <div x-show="open">
            Content...
        </div>
    </div>

    <hr class="my-12">

    <h2 class="text-xl">
        Building a search input
    </h2>

    <div x-data="{
        search: '',

        items: ['foo', 'bar', 'baz'],

        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }">
        <input class="border px-1 py-px my-2" x-model="search" placeholder="Search...">

        <ul>
            <template x-for="item in filteredItems" :key="item">
                <li x-text="item"></li>
            </template>
        </ul>
    </div>

    <hr class="my-12">

    <div x-data="{ placeholder: 'Type here...' }">
        <input type="text" x-bind:placeholder="placeholder">
    </div>

    <hr class="my-12">

    <div x-data="{ open: false }">
        <button x-on:click="open = ! open">Toggle Dropdown</button>

        <div :class="open ? '' : 'hidden'">
            Dropdown Contents...
        </div>
    </div>

</div>