JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<material-button label="Click Me"></material-button>

<material-card title="Card Title">
  <p>This is a Material Design card component.</p>
</material-card>

<material-textfield
  label="Username"
  placeholder="Enter your username"
></material-textfield>

<material-checkbox label="Remember me"></material-checkbox>

<material-dialog title="Confirmation">
  <p>Are you sure you want to delete this item?</p>
</material-dialog>

<material-appbar title="My App">
  <material-button label="Login"></material-button>
</material-appbar>

<material-tabs
  tabs='[{"label": "Tab 1", "content": "Content for Tab 1"}, {"label": "Tab 2", "content": "Content for Tab 2"}]'
></material-tabs>

<material-button
  label="Show Snackbar"
  onclick="document.body.appendChild(document.createElement('material-snackbar')).setAttribute('message', 'This is a snackbar!')"
></material-button>

<material-progress value="50%"></material-progress>

<material-slider min="0" max="100" value="50"></material-slider>

<material-menu>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
</material-menu>

<material-chip label="Chip 1"></material-chip>
<material-chip label="Chip 2" deletable></material-chip>

<material-radio label="Option 1" name="group1"></material-radio>
<material-radio label="Option 2" name="group1"></material-radio>

<material-switch label="Toggle Switch"></material-switch>

<material-tooltip text="This is a tooltip">
  <material-button label="Hover Me"></material-button>
</material-tooltip>

<material-badge text="3">
  <material-button label="Notifications"></material-button>
</material-badge>

<material-drawer>
  <h2>Drawer Title</h2>
  <p>This is a drawer component.</p>
</material-drawer>

<material-stepper
  steps='["Step 1", "Step 2", "Step 3"]'
  current-step="1"
></material-stepper>

<material-table
  headers='["Name", "Age", "Role"]'
  rows='[["John Doe", "28", "Developer"], ["Jane Smith", "32", "Designer"]]'
></material-table>

CSS

:root {
  --primary-color: #6200ee;
  --primary-light: #bb86fc;
  --primary-dark: #3700b3;
  --secondary-color: #03dac6;
  --background-color: #ffffff;
  --surface-color: #ffffff;
  --error-color: #b00020;
  --on-primary: #ffffff;
  --on-secondary: #000000;
  --on-background: #000000;
  --on-surface: #000000;
  --on-error: #ffffff;
  --font-family: "Roboto", sans-serif;
}

body {
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--on-background);
  margin: 0;
  padding: 0;
}

JavaScript

class MaterialButton extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: "open" })

    const button = document.createElement("button")
    button.classList.add("material-button")
    button.innerHTML = this.getAttribute("label") || "Button"

    const style = document.createElement("style")
    style.textContent = `
      .material-button {
        background-color: var(--primary-color);
        color: var(--on-primary);
        border: none;
        border-radius: 4px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }
      .material-button:hover {
        background-color: var(--primary-dark);
      }
      .material-button:active {
        background-color: var(--primary-light);
      }
    `

    shadow.appendChild(style)
    shadow.appendChild(button)
  }
}

customElements.define("material-button", MaterialButton)

class MaterialCard extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: "open" })

    const card = document.createElement("div")
    card.classList.add("material-card")

    const title = document.createElement("h2")
    title.textContent = this.getAttribute("title") || "Card Title"
    card.appendChild(title)

    const content = document.createElement("div")
    content.classList.add("content")
    content.innerHTML = this.innerHTML
    card.appendChild(content)

    const style = document.createElement("style")
    style.textContent = `
      .material-card {
        background-color: var(--surface-color);
        color: var(--on-surface);
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 16px;
        margin: 16px;
        transition: box-shadow 0.3s ease;
      }
      .material-card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
     ...