jsx を埋め込むテスト <style> { } </style> <div className="relative w-[12em] overflow-hidden rounded bg-[ 1a1a1a] px-4 py-6 font-mono text-[1em] text-[ 00ff00] shadow-[0…

<p>jsx を埋め込むテスト</p>
<style>
  {`
    @keyframes blinkCursor {
      50% { border-right-color: transparent; }
    }
    @keyframes typeAndDelete {
      0%, 10% { width: 0; }
      45%, 55% { width: 6.2em; } /* adjust width based on content */
      90%, 100% { width: 0; }
    }
  `}
</style>
<div className="relative w-[12em] overflow-hidden rounded bg-[#1a1a1a] px-4 py-6 font-mono text-[1em] text-[#00ff00] shadow-[0_4px_8px_rgba(0,0,0,0.2)] border border-[#333] box-border">
  {/* Header */}
  <div className="absolute left-0 right-0 top-0 h-6 rounded-t bg-[#333] px-2 box-border">
    <div className="float-left leading-6 text-[#eee]">Status</div>
<pre><code>{/* Controls */}
&#x3C;div className="float-right">
  &#x3C;span className="ml-2 inline-block h-[0.6em] w-[0.6em] rounded-full bg-[#e33]" />
  &#x3C;span className="ml-2 inline-block h-[0.6em] w-[0.6em] rounded-full bg-[#ee0]" />
  &#x3C;span className="ml-2 inline-block h-[0.6em] w-[0.6em] rounded-full bg-[#0b0]" />
&#x3C;/div>
</code></pre>
  </div>
<p>{/* Animated Text */}</p>
  <div     className="mt-6 inline-block overflow-hidden whitespace-nowrap border-r-[0.2em] border-r-[green]"
    style={{
      animation:
        "typeAndDelete 4s steps(11) infinite, blinkCursor 0.5s step-end infinite alternate",
    }}
  >
    Loading...
  </div>
</div>


mdxコードテスト

次に読む

この記事を共有