JSFiddle - React, Tailwind, and code Playground

HTML

<html>                                        
  <head>                                  
    <script type="importmap">                                                                                      
      {
        "imports": {                      
          "stimulus": "https://cdn.skypack.dev/stimulus", 
          "@hotwired/turbo": "https://cdn.skypack.dev/@hotwired/turbo",
          "@seanpdoyle/turbo_stream_button": "https://cdn.jsdelivr.net/gh/seanpdoyle/turbo_stream_button@8ab87f7cdbae13cb24d4e5644c744f45a6107fc5/app/assets/javascripts/turbo_stream_button.js"
        }
      }
    </script>
    <script type="module">
      import "@hotwired/turbo"
      import { Application } from "stimulus"
      import { TurboStreamButtonController } from "@seanpdoyle/turbo_stream_button"

      const application = Application.start()
      application.register("turbo-stream-button", TurboStreamButtonController)
    </script>
    <script type="module" src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  </head>
  <body>
    <button type="button" id="call-to-action"
          data-controller="turbo-stream-button"
          data-action="click->turbo-stream-button#evaluate">
      <span>Click me to insert the template's contents after this button!</span>

      <template data-turbo-stream-button-target="turboStreams">
        <turbo-stream action="after" target="call-to-action">
          <template><p>You clicked the button!</p></template>
        </turbo-stream>
      </template>
    </button>
  </body>
</html>