JSFiddle - React, Tailwind, and code Playground

by ps200306

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.js"></script>

</head>

<body>

    <div x-data="{clicked: false}">
    
      <div>Clicked is <span x-text="clicked"></span></div>
      
      <div x-data="dropdown" x-bind="bind" x-model="clicked"></div>
 
    </div>
     
    <template id="dropdown">
      <button @click="show = !show">Click me!</button>
      <div x-show="show">Hello World</div>      
    </template>

</body>

<script type="text/javascript">

  document.addEventListener('alpine:init', () => {
    Alpine.data('dropdown', () => ({
      show: false,

      bind: {
        ['x-modelable']: 'show',
        ['x-html']() { return document.querySelector('#dropdown').innerHTML},
      },
    }));
  })

</script>

</html>