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

UIElement - a HTML-first library for reactive Web Components

<module-tabgroup>
	<div role="tablist">
		
			<button
				type="button"
				role="tab"
				id="trigger_module-demo.css"
				aria-controls="panel_module-demo.css"
				aria-selected="true"
				tabindex="0"
			>CSS</button>
	</div>
	
<div role="tabpanel" id="panel_module-demo.css" aria-labelledby="trigger_module-demo.css">
	<module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">module-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">module-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>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>
</module-tabgroup>