JSFiddle - React, Tailwind, and code Playground

by imall

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
  <div id="app">
    <dialog-box>
      <template #header>
        <h1>這是標題</h1>
      </template>

      <p>這是內容1</p>
      <p>這是內容2</p>
      <p>這是內容3</p>
      <p>這是內容4</p>
    </dialog-box>
  </div>

CSS

body {
  background-color: #1E1E1E;
  color: white;
}

.container {
  background-color: #2E2E2E;
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

header {
  background-color: #3E3E3E;
  padding: 1rem;
  border-radius: 0.5rem;
}

main {
  background-color: #4E4E4E;
  padding: 1rem;
  border-radius: 0.5rem;
}

JavaScript

const app = Vue.createApp();

app.component("dialog-box", {
  template: `
    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
    </div>
    `,
});
app.mount("#app");