JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<click-counter></click-counter>

CSS

body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f5f5f5;
    }

JavaScript

class ClickCounter extends HTMLElement {
  constructor() {
    super()
    this.count = 0
    this.attachShadow({ mode: "open" })
    this.render()
  }

  connectedCallback() {
    this.shadowRoot.querySelector("button").addEventListener("click", () => {
      this.count++
      this.updateCount()
    })

    this.shadowRoot.querySelector(".reset").addEventListener("click", () => {
      this.count = 0
      this.updateCount()
    })
  }

  disconnectedCallback() {
    this.shadowRoot
      .querySelector("button")
      .removeEventListener("click", this.incrementCount)
    this.shadowRoot
      .querySelector(".reset")
      .removeEventListener("click", this.resetCount)
  }

  updateCount() {
    this.shadowRoot.querySelector(".count").textContent = this.count
  }

  render() {
    this.shadowRoot.innerHTML = `
          <style>
            .counter-container {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 2rem;
              background-color: white;
              border-radius: 8px;
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }
            
            h2 {
              color: #333;
              margin-top: 0;
            }
            
            .count-display {
              font-size: 4rem;
              font-weight: bold;
              color: #2c3e50;
              margin: 1rem 0;
            }
            
            .count {
              min-width: 5rem;
              text-align: center;
              display: inline-block;
            }
            
            button {
              background-color: #3498db;
              color: white;
              border: none;
              border-radius: 4px;
              padding: 0.75rem 1.5rem;
              font-size: 1rem;
              cursor: pointer;
              transition: background-color 0.2s;
              margin: 0.5rem;
            }
            
            button:hover {
             ...