Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Normal font

Mono font

Sans font

Custom font - Roboto

Hey there! this is a test

This is bold This is italic actually, and it's pretty cool This is underline this is small this is marked this is code THIS IS A SPAN AND SHOULDNT BE ANY DIFFERENT

Hello gang

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks

🧪 CSS Properties Test

Opacity 75% with cursor pointer and z-index 10 - Text should show pointer cursor, not I-beam

Opacity 50% with cursor text and z-index 20 - Text should show I-beam cursor

Custom opacity 0.25 with cursor default and z-index 999 - Text should show arrow cursor

Cursor move - Text should show move cursor

Cursor crosshair - Text should show crosshair cursor

Cursor help - Text should show help cursor

Cursor not-allowed - Text should show forbidden cursor

🖱️ Cursor Inheritance Test

This paragraph is inside a div with cursor-pointer.

Both paragraphs should show pointer cursor instead of default I-beam.

This nested paragraph should also inherit the pointer cursor.

border

border-2

border-4

border-2 border-red-500

border-solid

border-dashed

border-dotted

border-none

border-t

border-r

border-b

border-l

border-t-4

border-b-2

border-l-6

border-t-3 border-green-500

border-white

border-black

border-transparent

border-gray-400

border-slate-700

border-red-500

border-green-600

border-blue-400

border-yellow-300

<form action="/submit" method="POST">
		<span>Name:</span>
		<input type="text" placeholder="First name" value="John" maxlength="20" minlength="3" />
		<span>Email regex:</span>
		<input type="text" placeholder="Last name" value="Doe" pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$" />
		<span>Smart:</span>
		<input type="checkbox" />
		<input type="checkbox" value="true" />

<p>favorite food</p>
		<input type="radio" group="food" />
		<span>Pizza</span>
		<input type="radio" group="food" />
		<span>Berry</span>
		<input type="radio" group="food" />
		<span>Gary</span>

<h2>Color</h2>
		<input type="color" value="#ff0000" />
		<h2>Date</h2>
		<input type="date" value="2018-07-22" />

<h2>Range Slider</h2>
		<input style="max-w-2 max-h-2" type="range" min="0" max="100" step="5" value="50" />

<h2>Number Input</h2>
		<input type="number" min="1" max="10" step="0.5" value="5" placeholder="Enter number" />

<h2>File Upload</h2>
		<input type="file" accept=".txt,.pdf,image/*" />
	</form>
	<separator direction="horizontal" />

<ol>
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
	</ol>

<ol type="zero-lead">
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ol>

<ol type="lower-alpha">
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ol>

<ol type="upper-alpha">
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ol>

<ol type="lower-roman">
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ol>

<ol type="upper-roman">
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ol>

<ul>
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ul>

<ul type="circle">
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ul>
	<ul type="none">
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ul>
	<ul type="square">
		<li>hello gang</li>
		<li>this</li>
		<li>is</li>
		<li>a test</li>
	</ul>
	<img style="text-center max-w-24 max-h-24"
		src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMNUPIKabszX0Js_c0kfa4cz_JQYKfGTuBUA&s" />
	<separator direction="vertical" />

<h2>Flex Row (gap, justify-between, items-center)</h2>
	<div style=\"flex flex-row gap-4 justify-between items-center w-64 h-16 bg-[#f0f0f0]\">
		<span style=\"bg-[#ffaaaa] w-16 h-8 flex items-center justify-center\">A</span>
		<span style=\"bg-[#aaffaa] w-16 h-8 flex items-center justify-center\">B</span>
		<span style=\"bg-[#aaaaff] w-16 h-8 flex items-center justify-center\">C</span>
	</div>

<h2>Flex Column (gap, items-center, content-center)</h2>
	<div style=\"flex flex-col gap-2 items-center content-center h-32 w-32 bg-[#e0e0e0]\">
		<span style=\"bg-[#ffaaaa] w-16 h-6 flex items-center justify-center\">1</span>
		<span style=\"bg-[#aaffaa] w-16 h-6 flex items-center justify-center\">2</span>
		<span style=\"bg-[#aaaaff] w-16 h-6 flex items-center justify-center\">3</span>
	</div>

<h2>Flex Grow/Shrink/Basis</h2>
	<div style=\"flex flex-row gap-2 w-64 bg-[#f0f0f0]\">
		<span style=\"bg-[#ffaaaa] flex-grow-1 h-8 flex items-center justify-center\">Grow 1</span>
		<span style=\"bg-[#aaffaa] flex-grow-2 h-8 flex items-center justify-center\">Grow 2</span>
		<span style=\"bg-[#aaaaff] flex-shrink-0 w-8 h-8 flex items-center justify-center\">No Shrink</span>
	</div>

<h2>Align Self</h2>
	<div style=\"flex flex-row h-24 bg-[#f0f0f0] items-stretch gap-2 w-64\">
		<span style=\"bg-[#ffaaaa] w-12 h-8 self-start flex items-center justify-center\">Start</span>
		<span style=\"bg-[#aaffaa] w-12 h-8 self-center flex items-center justify-center\">Center</span>
		<span style=\"bg-[#aaaaff] w-12 h-8 self-end flex items-center justify-center\">End</span>
		<span style=\"bg-[#ffffaa] w-12 h-8 self-stretch flex items-center justify-center\">Stretch</span>
	</div>
</body>