JSFiddle - React, Tailwind, and code Playground

HTML

<!-- T'Pico showcase: paste this fragment into JSFiddle's HTML panel. -->
<header>
	<hgroup>
		<h1>T'Pico</h1>
		<p>Modern, classless CSS. Semantic HTML, native interactions, and no JavaScript required for the components below.</p>
	</hgroup>

	<nav aria-label="Page sections">
		<a href="#typography">Typography</a>
		<a href="#content">Content</a>
		<a href="#buttons">Buttons</a>
		<a href="#forms">Forms</a>
		<a href="#components">Components</a>
		<a href="#navigation">Navigation</a>
	</nav>
</header>

<main>
	<section id="introduction">
		<h2>HTML first, CSS second</h2>
		<p>T'Pico styles ordinary HTML elements, meaningful attributes, and native browser APIs. This page uses no framework classes, custom data attributes, or JavaScript.</p>

		<nav aria-label="Breadcrumb">
			<ol>
				<li><a href="#introduction">Home</a></li>
				<li><a href="#components">Showcase</a></li>
				<li aria-current="page">All features</li>
			</ol>
		</nav>
	</section>

	<hr>

	<section id="typography">
		<h2>Typography</h2>
		<p>Headings, paragraphs, and inline elements inherit a consistent type scale.</p>

		<h3>Heading level 3</h3>
		<h4>Heading level 4</h4>
		<h5>Heading level 5</h5>
		<h6>Heading level 6</h6>

		<p>This paragraph includes <strong>strong text</strong>, <b>bold text</b>, <em>emphasis</em>, <i>italics</i>, <mark>highlighted text</mark>, and <small>small text</small>.</p>
		<p>There is also <del>deleted content</del>, <ins>inserted content</ins>, an <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation, H<sub>2</sub>O, and x<sup>2</sup>.</p>
		<p>Use <code>&lt;article&gt;</code> for standalone content, press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save, inspect <samp>Build complete</samp>, or refer to the variable <var>x</var>.</p>

		<blockquote>
			<p>Good HTML provides the structure. CSS should enhance it, not replace it.</p>
			<footer><cite>T'Pico...

CSS

@layer reset{:where(*){box-sizing:border-box;background-repeat:no-repeat}:where(){text-decoration:inherit;vertical-align:inherit}}@layer tokens{:root,:host{--t-pico-amber-950:oklch(17.65% .0283 87.9);--t-pico-amber-900:oklch(22.3% .0405 88.4);--t-pico-amber-850:oklch(26.59% .0521 84.9);--t-pico-amber-800:oklch(30.97% .0635 84.6);--t-pico-amber-750:oklch(35.23% .0724 83.6);--t-pico-amber-700:oklch(39.59% .0813 84.1);--t-pico-amber-650:oklch(43.83% .0899 84.4);--t-pico-amber-600:oklch(48.1% .0987 84);--t-pico-amber-550:oklch(52.48% .1076 84.5);--t-pico-amber-500:oklch(56.89% .1167 84.3);--t-pico-amber-450:oklch(61.22% .1256 84.1);--t-pico-amber-400:oklch(65.47% .1344 84);--t-pico-amber-350:oklch(69.65% .143 83.9);--t-pico-amber-300:oklch(74.08% .1521 83.9);--t-pico-amber-250:oklch(78.33% .1606 84.3);--t-pico-amber-200:oklch(84.03% .1724 84.1);--t-pico-amber-150:oklch(86.94% .1345 83.7);--t-pico-amber-100:oklch(91.33% .0794 82.1);--t-pico-amber-50:oklch(95.66% .0322 81);--t-pico-amber:var(--t-pico-amber-200);--t-pico-azure-950:oklch(17.53% .0312 242.2);--t-pico-azure-900:oklch(22.6% .0446 242.8);--t-pico-azure-850:oklch(26.94% .0582 242);--t-pico-azure-800:oklch(31.19% .0722 242.6);--t-pico-azure-750:oklch(35.55% .0829 241.5);--t-pico-azure-700:oklch(39.89% .0938 241.8);--t-pico-azure-650:oklch(44.12% .1044 242.1);--t-pico-azure-600:oklch(48.57% .1149 242.1);--t-pico-azure-550:oklch(52.9% .1254 242);--t-pico-azure-500:oklch(57.16% .1355 242);--t-pico-azure-450:oklch(61.39% .1465 242.4);--t-pico-azure-400:oklch(65.79% .1564 242.2);--t-pico-azure-350:oklch(70.72% .1679 242.1);--t-pico-azure-300:oklch(74.33% .1426 244.4);--t-pico-azure-250:oklch(78.57% .1153 246.7);--t-pico-azure-200:oklch(82.84% .0863 248.9);--t-pico-azure-150:oklch(87.23% .0607 249.3);--t-pico-azure-100:oklch(91.39% .0369 250.8);--t-pico-azure-50:oklch(95.73% .0165 250.8);--t-pico-azure:var(--t-pico-azure-550);--t-pico-black:oklch(0% 0 0);--t-pico-white:oklch(100% 0...