index.html

<html>
    <!-- <script src="./packages/intersect/dist/cdn.js" defer></script>
    <script src="./packages/morph/dist/cdn.js" defer></script>
    <script src="./packages/persist/dist/cdn.js"></script>
    <script src="./packages/focus/dist/cdn.js"></script>
    <script src="./packages/mask/dist/cdn.js"></script>
    <script src="./packages/ui/dist/cdn.js" defer></script> -->
    <script src="./packages/anchor/dist/cdn.js" defer></script>
    <script src="./packages/sort/dist/cdn.js" defer></script>
    <script src="./packages/alpinejs/dist/cdn.js" defer></script>
    <!-- <script src="//cdn.tailwindcss.com"></script> -->
    <!-- <script src="//cdn.tailwindcss.com"></script> -->

    <div x-data x-sort>
        <div x-sort:item >foo</div>
        <div >foo</div>
        <div x-sort:item >foo</div>
    </div>

    <div x-data="{ val: true }"
    >
   <input type="text" x-model.boolean="val">
   <input type="checkbox" x-model.boolean="val">
   <input type="radio" name="foo" value="true" x-model.boolean="val">
   <input type="radio" name="foo" value="false" x-model.boolean="val">
    </div>
</html>