Holoviz Panel Tailwind Button

panel_tailwind_button.py

import panel as pn
import param


class CustomButton(pn.reactive.ReactiveHTML):
    clicks = param.Integer()

    _template = """\
        <div id="pn-container" style="height:100%;width:100%">
        <button id="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        onclick="${_button_click}"
        >{{ name }}</button></div>
    """
    __javascript__ = ["https://cdn.tailwindcss.com"]

    def _button_click(self, event):
        self.clicks += 1


button1 = CustomButton(name="button", height=38)

pn.Column(
    button1,
).servable()


"""
panel serve panel_tailwind_button.py --autoreload
"""