<div class="md:w-2/3 mx-auto flex flex-col">
  <div 
    x-data="greet()"
  >
    <button 
      @click="showMessage()" class="mb-8 justify-center flex bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
      Greet Me
    </button>
    <div>Message: <span 
      x-text="messageDisplay"
    ></span></div>
  </div>
  <script type="text/javascript"
  >
    function greet() {
      return {
        message: "Hello Alpine.js",
        messageDisplay: "",
        showMessage() {
          this.messageDisplay = this.message;
        },
      };
    }
  </script>
</div>