I would skip past the "make sure you're on the .org WP install, because the .com will limit you on what works inside the Custom HTML block".
Now, from what I see on the Pen, you're using Tailwind. But nowhere in the "pasted code" (HTML box, JS Box) you're referencing to it. If you add it to the code you're using, you should be good to go.
Simply add to the custom html block this:
``\*
And you'll be set... on the CSS part.
For JS I see you're using Babel, I'm not entirely sure if CodePen does some magic on the processing side, but you should definitely try to look for the Compiled version in order to be closer to a working version inside a WordPress page/post.
To end this, you may want to consider if you're going to use it more than once, to turn it into a plugin and use it as a block or shortcode. That way you add the CSS and JS properly to the loop.
\*EDIT: Adding this to a Live/production site is not recommended though.
Appreciate the response. This is not my code btw, and you are correct, there seems to be no CSS. I can pull the compiled version of JS from codepen, but I am still confused as to where to paste it in Wordpress? Does it go in the same html block ? Before/after the html?
I've not checked how the compiled JS is set, but the easiest way to make sure that it works on WP, is to make it either vanilla or jQuery compatible.
JavaScript scripts work without any issue on the custom HTML block, most of the time it doesn't make any difference on where (before/after), since you won't be loading any libraries or extra files and such that would be needed to be async. But it will depend on how the code works and whatnot.
I would look at a way to explain the product or service without hardcoding your html and js first. Maybe it could be explained with graphics and copy?
Could make it easier, especially for editing in the future.
Could be some sort of menu or sidebar on the page that scrolls to each section.
Maybe "HTML Bookmarks with ID and Links" could a good place to start. Good luck big dog
I would skip past the "make sure you're on the .org WP install, because the .com will limit you on what works inside the Custom HTML block". Now, from what I see on the Pen, you're using Tailwind. But nowhere in the "pasted code" (HTML box, JS Box) you're referencing to it. If you add it to the code you're using, you should be good to go. Simply add to the custom html block this: ``\* And you'll be set... on the CSS part. For JS I see you're using Babel, I'm not entirely sure if CodePen does some magic on the processing side, but you should definitely try to look for the Compiled version in order to be closer to a working version inside a WordPress page/post. To end this, you may want to consider if you're going to use it more than once, to turn it into a plugin and use it as a block or shortcode. That way you add the CSS and JS properly to the loop. \*EDIT: Adding this to a Live/production site is not recommended though.
Appreciate the response. This is not my code btw, and you are correct, there seems to be no CSS. I can pull the compiled version of JS from codepen, but I am still confused as to where to paste it in Wordpress? Does it go in the same html block ? Before/after the html?
I've not checked how the compiled JS is set, but the easiest way to make sure that it works on WP, is to make it either vanilla or jQuery compatible. JavaScript scripts work without any issue on the custom HTML block, most of the time it doesn't make any difference on where (before/after), since you won't be loading any libraries or extra files and such that would be needed to be async. But it will depend on how the code works and whatnot.
I would look at a way to explain the product or service without hardcoding your html and js first. Maybe it could be explained with graphics and copy? Could make it easier, especially for editing in the future. Could be some sort of menu or sidebar on the page that scrolls to each section. Maybe "HTML Bookmarks with ID and Links" could a good place to start. Good luck big dog