@zeix/ui-element/docs/examples/component-demo.html

UIElement - minimal reactive framework based on Web Components

<tab-group>
	<div role="tablist">
		<button type="button" role="tab" id="trigger_component-demo.css" aria-controls="panel_component-demo.css" aria-selected="false" tabindex="-1">CSS</button>
	</div>
	
<div role="tabpanel" id="panel_component-demo.css" aria-labelledby="trigger_component-demo.css" hidden>
	<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">component-demo.css</span>
			<span class="language">css</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">component-demo</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">flex</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	flex-direction</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">column</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	gap</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	margin-block-end</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-l);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	.preview {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</span><span style="color:#F92672">px</span><span style="color:#66D9EF"> dotted</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-border);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs); </span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		padding</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span></code></pre>
		<input-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</input-button>
	</code-block>
</div>
</tab-group>