(defisland
  ()
  (let
    ((danger (signal false)) (size (signal 16)))
    (div
      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3")
      (div
        (~tw :tokens "flex items-center gap-3")
        (button
          (~tw :tokens "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700")
          :on-click (fn (e) (swap! danger not))
          (if (deref danger) "Safe mode" "Danger mode"))
        (button
          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
          :on-click (fn (e) (swap! size (fn (s) (+ s 2))))
          "Bigger")
        (button
          (~tw :tokens "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400")
          :on-click (fn (e) (swap! size (fn (s) (max 10 (- s 2)))))
          "Smaller"))
      (div
        :class (str
          "p-3 rounded font-medium transition-colors "
          (if
            (deref danger)
            "bg-red-100 text-red-800"
            "bg-green-100 text-green-800"))
        :style (str "font-size:" (deref size) "px")
        "This element's class and style are reactive."))))
