Stylify.dev Playground

index.html

<div class="
	font-weight:bold
	font-size:24px
	border-radius:4px
	padding:24px
	border:2px__dotted__#01befe
	transition:border-color__0.3s__ease-in-out
	hover:border-color:#bd0c65
	width:400px
	margin:50px__auto__0__auto
	text-align:center
	font-family:arial
						
	s-cloak
">
	<!--
		Write selectors as css properties.
		Instead of space use __ (two underscores)
		https://stylify.dev/docs/get-started
	-->
	Edit me 🤩!
	<br><br>
	<a href="https://stylify.dev" class="color:#01befe" target="_blank">Stylify.dev</a>
</div>

script.js

import { Profiler } from 'https://unpkg.com/@stylify/profiler@latest/esm/index.js';
import { Runtime, nativePreset } from 'https://unpkg.com/@stylify/stylify@latest/esm/index.js';

// Profiler is the button on the left bottom side in the preview
new Profiler();
new Runtime(nativePreset);

style.css

.s-cloak {
	visibility:hidden
}

stylify-dev-playground.markdown

Stylify.dev Playground

Playground for @stylify/stylify => https://stylify.dev

A Pen by HARUN PEHLİVAN on CodePen.

License.