php-flasher/docs/_includes/playground.html

<div data-controller="playground"
     data-playground-adapter-value="flasher"
     data-playground-type-value="info"
     data-playground-message-value="Welcome to PHPFlasher!"
     data-playground-title-value="Information"
     class="max-w-7xl mx-auto p-8 bg-white rounded-xl shadow-lg my-10">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
        <div class="space-y-6">
            <div class="space-y-4">
                <div>
                    <label for="title" class="block text-sm font-semibold text-gray-700">Title</label>
                    <input id="title" type="text" data-playground-target="title" value="Information"
                           class="mt-2 block w-full rounded-lg border border-gray-300 shadow-sm focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 text-lg px-4 py-2" />
                </div>

                <div>
                    <label for="message" class="block text-sm font-semibold text-gray-700">Message</label>
                    <input id="message" type="text" data-playground-target="message" value="Welcome to PHPFlasher!"
                           class="mt-2 block w-full rounded-lg border border-gray-300 shadow-sm focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 text-lg px-4 py-2" />
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700">Type</label>
                    <div id="type-options" class="mt-4 flex space-x-4">
                        <button type="button"
                                class="py-1 px-4 rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                data-action="click->playground#selectType" data-value="info">info
                        </button>
                        <button type="button"
                                class="py-1 px-4 rounded-md text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500"
                                data-action="click->playground#selectType" data-value="warning">warning
                        </button>
                        <button type="button"
                                class="py-1 px-4 rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                                data-action="click->playground#selectType" data-value="error">error
                        </button>
                        <button type="button"
                                class="py-1 px-4 rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                                data-action="click->playground#selectType" data-value="success">success
                        </button>
                    </div>
                </div>
            </div>

            <div data-playground-target="optionsContainer" class="space-y-4"></div>

            <button data-action="click->playground#showNotification"
                    class="w-full bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md transition ease-in-out duration-150">
                Show Notification
            </button>
        </div>

        <div class="rounded-lg">
            <pre id="php-code-snippet" class="text-white overflow-auto"><code data-playground-target="codeSnippet"
                                                                              class="language-php"></code></pre>
        </div>
    </div>
</div>