JSFiddle - React, Tailwind, and code Playground

by jagreehal

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Web Component Shadow Dom Themed</title>
    <link rel="stylesheet" href="https://jagreehal.github.io/styling-web-component-examples/styling-examples/todo.css">
    <script type="module" src="https://jagreehal.github.io/styling-web-component-examples/styling-examples/css-gremlins.js"></script>
    <script src="https://jagreehal.github.io/styling-web-component-examples/styling-examples/web-component-shadow.js"></script>
  </head>

  <body style="max-width:800px">
    <section class="todoapp">
      <section class="main">
        <ul class="todo-list">
          <todo-item text="Web component"></todo-item>
          <todo-item class="dark" text="Dark theme web component"></todo-item>
        </ul>
      </section>
    </section>
  </body>
</html>