<div x-data="{open:false}">
		                    <p class="flex">
		                      <a x-on:click.prevent="open=!open" class="py-2 uajskeiolksb inline-block text-center rounded leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-none focus:ring-0 me-2">
		                      Link with href
		                      </a>
		                      <button @click="open=!open" class="py-2 uajskeiolksb inline-block text-center rounded leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-none focus:ring-0" type="button">
		                      Button with data-target
		                      </button>
		                    </p> 
		                    <div x-show="open" x-collapse class="border uajskeiolksb py-3 my-2 dark:border-gray-700">
		                      Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
		                    </div>
		                  </div>