<div class="flex justify-center items-center p-2 h-full">
  <div class="nes-container w-full is-dark is-rounded">
    <span id="typed"></span>
    <div class="mt-5">      
      <label>
        <input type="radio" class="nes-radio is-dark" name="answer-dark" checked />
        <span>はい</span>
      </label>

      <label>
        <input type="radio" class="nes-radio is-dark" name="answer-dark" />
        <span>いいえ</span>
      </label>
    </div>

    <button type="button" class="nes-btn is-primary mt-3" onclick="document.getElementById('dialog-default').showModal();">
      そうしん
    </button>

  </div>

  <dialog class="nes-dialog is-dark is-rounded" id="dialog-default">
    <form method="dialog">
      <p>ほんとうに そうしん しますか?</p>
      <p>※はい を おしても なにも おこりません</p>
      <menu class="dialog-menu">
        <button class="nes-btn is-primary">はい</button>
        <button class="nes-btn">いいえ</button>
      </menu>
    </form>
  </dialog>
  
</div>

@font-face {
  font-family: "dotm";
  src: url("https://www.bauhausify.com/assets/webfonts/pixelmplus/PixelMplus10-Regular.eot") format('eot'),
    url("https://www.bauhausify.com/assets/webfonts/pixelmplus/PixelMplus10-Regular.woff") format('woff');
}

html,body {
  height: 100%;
  font-family: "dotm";
  background-color: black;
}
dialogPolyfill.registerDialog(document.querySelector('dialog'));

new Typed('#typed', {
  strings: [
    'これは NES.css を しようした デモページ です。<br>Typed.js という ライブラリ の タイプライターエフェクト で ファミコン の ように なります。',
  ],
  typeSpeed: 40,
});
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/nes.css/2.2.0/css/nes.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.5/tailwind.min.css
  3. https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js
  2. https://cdn.jsdelivr.net/npm/typed.js@2.0.9