Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Enable JavaScript -->
<!-- Website: https://enablejavascript.dev -->
<!-- By: Kumar Deepak (https://kumardeepak.me) -->

<!-- IMPORTANT: I've utilized a "div" tag below for preview without requiring JavaScript to be disabled. For the actual website, kindly replace the "first div tag" with a "noscript" tag. -->

<!-- <noscript class="noscript"> -->
<div class="noscript">
	<div class="noscript__wrapper">
		<svg class="noscript--icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
			<path d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM13.3344 16.055C14.0531 16.6343 14.7717 16.9203 15.4904 16.913C15.9304 16.913 16.2677 16.8323 16.5024 16.671C16.7297 16.517 16.8434 16.297 16.8434 16.011C16.8434 15.7177 16.7297 15.4683 16.5024 15.263C16.2677 15.0577 15.8241 14.8523 15.1714 14.647C14.3867 14.4197 13.7817 14.1263 13.3564 13.767C12.9384 13.4077 12.7257 12.9053 12.7184 12.26C12.7184 11.6513 12.9824 11.1417 13.5104 10.731C14.0237 10.3203 14.6801 10.115 15.4794 10.115C16.5941 10.115 17.4887 10.3863 18.1634 10.929L17.3934 12.128C17.1221 11.9153 16.8104 11.7613 16.4584 11.666C16.1064 11.556 15.7911 11.501 15.5124 11.501C15.1311 11.501 14.8267 11.5707 14.5994 11.71C14.3721 11.8493 14.2584 12.0327 14.2584 12.26C14.2584 12.5093 14.3977 12.722 14.6764 12.898C14.9551 13.0667 15.4317 13.2537 16.1064 13.459C16.9204 13.701 17.4997 14.0237 17.8444 14.427C18.1891 14.8303 18.3614 15.3437 18.3614 15.967C18.3614 16.605 18.1157 17.155 17.6244 17.617C17.1404 18.0717 16.4364 18.31 15.5124 18.332C14.3024 18.332 13.2904 17.969 12.4764 17.243L13.3344 16.055ZM7.80405 16.693C8.03872 16.8397 8.32105 16.913 8.65105 16.913C8.99572 16.913 9.28172 16.814 9.50905 16.616C9.73639 16.4107 9.85005 16.055 9.85005 15.549V10.247H11.3351V15.835C11.3131 16.7003 11.0637 17.3237 10.5871 17.705C10.3157 17.9323 10.0187 18.0937 9.69605 18.189C9.37339 18.2843 9.06172 18.332 8.76105 18.332C8.21105 18.332 7.72339 18.2367 7.29805 18.046C6.84339 17.8407 6.46205 17.4777 6.15405 16.957L7.18805 16.11C7.37872 16.3667 7.58405 16.561 7.80405 16.693Z"></path>
		</svg>
		<h3 class="noscript--heading">Oops! JavaScript Disabled</h3>
		<p class="noscript--msg">
			JavaScript is disabled on your browser. For full functionality of this website, it is necessary to enable it. Here are the instructions on how to
			<a class="noscript--a" href="https://enablejavascript.dev" target="_blank">Enable JavaScript</a>
			in your web browser.
		</p>
	</div>
</div>
<!-- </noscript> -->
              
            
!

CSS

              
                /* Enable JavaScript */
/* Website: https://enablejavascript.dev */
/* By: Kumar Deepak (https://kumardeepak.me) */

/* Reset & Defaults */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-family: "Inter", sans-serif;
	font-size: 62.5%; /* 10px = 1rem */
	line-height: 1.5;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	background: url("https://fastly.picsum.photos/id/28/4928/3264.jpg?hmac=GnYF-RnBUg44PFfU5pcw_Qs0ReOyStdnZ8MtQWJqTfA")
		center / cover no-repeat;
}

/* MAIN */
/* NoScript Element */
.noscript {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 0 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--noscript-bg, hsla(0, 0%, 0%, 0.95));
	user-select: none;
	z-index: 99999999;
}

.noscript {
	@supports (-webkit-backdrop-filter: blur()) or (backdrop-filter: blur()) {
		background: var(--noscript-bgs, hsla(0, 0%, 0%, 0.9));
		backdrop-filter: blur(1.5rem) saturate(0%);
	}
}

.noscript__wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	user-select: none;
	max-width: 48rem;
}

.noscript--icon {
	width: 8rem;
	fill: var(--noscript-color, #da4a54);
}

.noscript--heading {
	font-size: 2.2rem;
	color: var(--noscript-color, #da4a54);
	margin: 2rem 0;
	background: none;
	font-weight: bold;
	border: 0;
}

.noscript--msg {
	font-size: 1.5rem;
	color: var(--white, #fff);
	background: none;
	line-height: 1.4;
	border: 0;
}

.noscript--a {
	color: var(--white, #fff);
	text-decoration: underline;
	transition: color 0.2s ease-out;
}

.noscript--a:hover {
	color: var(--noscript-color, #da4a54);
}

              
            
!

JS

              
                
              
            
!
999px

Console