Pen Settings



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


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


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.


Save Automatically?

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.


                <section id="splash-hero">
    <div class="h-screen bg-red-500 flex justify-center items-center">
        <div id="hero-logo-container" class="flex">
            <div class="">
                <svg class="w-28" viewBox="0 0 124 117" fill="none" xmlns=""><path d="M67.6577 58.1928L93.0602 47.2434L87.3965 44.7118L61.8865 55.7078L56.1152 58.1928L61.8865 60.6777L87.6727 71.7824L93.3365 69.2509L67.6577 58.1928Z" fill="#E5F0FC"/><path d="M119.246 85.3875V109.833L67.029 86.0087L61.4727 88.4937L123.774 116.9V82.3589L99.0316 71.7046L93.3679 74.2362L119.246 85.3875Z" fill="#E5F0FC"/><path d="M123.773 0.650002L61.8857 28.3108L67.4728 30.8113L119.245 7.67004V30.9977L93.0902 42.2577L98.754 44.7893L123.773 34.0107V0.650002Z" fill="#E5F0FC"/><path d="M30.3601 69.2816L12.6627 61.2987V55.3192L30.7131 47.2431L36.3769 44.7115L61.8869 33.3117L56.2999 30.8112L30.6824 42.2576L25.0187 44.7892L8.13477 52.3373V64.2806L24.6963 71.72L30.2987 74.2826L55.9315 85.962L61.4878 83.4926L35.9625 71.8443L30.3601 69.2816Z" fill="#E5F0FC"/><path d="M30.3604 69.2818L35.9627 71.8445L61.8872 60.6776L56.116 58.1927L30.3604 69.2818Z" fill="#E5F0FC"/><path d="M36.3776 44.7114L30.7139 47.243L56.1164 58.1924L61.8877 55.7074L36.3776 44.7114Z" fill="#E5F0FC"/><path d="M98.7554 44.7893L93.0916 42.2577L67.4741 30.8113L61.8871 28.3108L0 0.650002V34.0107L25.0188 44.7893L30.6826 42.2577L4.5126 30.9977V7.67004L56.3001 30.8113L61.8871 33.3118L87.3971 44.7116L93.0609 47.2432L111.111 55.3193V61.2988L93.3372 69.2507L87.6734 71.7823L61.488 83.4927L55.9317 85.9621L4.5126 108.948V85.3875L30.2989 74.2828L24.6965 71.7201L0 82.3589V115.968L61.4727 88.4937L67.029 86.0087L93.3679 74.2362L99.0316 71.7046L115.624 64.2808V52.3374L98.7554 44.7893Z" fill="#E5F0FC"/></svg>
            <div id="reveal" class="relative ml-9 w-80 overflow-hidden invisible hidden">
                <div id="logo-letters" class="h-full" style="background-image: url('')"></div>




                let logo = document.querySelector("#hero-logo-container");

if (logo !== null) {
    .from(logo, { y: "100vh" })
    .set("#reveal", { autoAlpha: 1, display: "block" })
    .from("#logo-letters", { xPercent: 100 }, "<");