JSFiddle - React, Tailwind, and code Playground

by jeykeu

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/[email protected]"></script>
    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
  </head>

  <body>
    <div x-data="{show_new: false}" x-init="$watch('show_new', value => {
       if (show_new) {
         htmx.process(document.querySelector('#new_content'))
       }
    })">
      <button @click="show_new = !show_new">Toggle New Content</button>
      <template x-if="show_new">
        <div id="new_content">
          <a hx-get="/server/newstuff" hx-on="htmx:afterRequest: alert('sfd')" href="#">New Clickable</a>
          <button type="button" hx-get="/" hx-on="htmx:afterRequest: alert('sfd')">Toggle New Content</button>
        </div>
      </template>
    </div>
  </body>
</html>