Конкретно этот пример самый дефолтный на чистом коде. Не знаю по какой причине он может у вас не работать. Его достаточно просто скопировать и вставить в свой HTML-файл. Часто бывает, что написанный код использует какой-то процессор. То есть это не чистый код и по дефолту браузер его обработать не сможет. Он не будет работать если вы его просто вставите без обработки. Используемый процессор будет приписан в скобках в заголовке. Например HTML (Pug) - CSS (Stylus) - JS (Babel) и так далее. Если используется процессор, то чтобы получить чистый код прямо в окне Codepen достаточно просто выбрать в выпадающем меню блока (стрелка вниз) пункт View Compiled ... и код будет сразу же преобразован. Преобразованный код уже можно смело вставлять к себе и он будет обрабатываться браузером по дефолту. Так же могут быть подключены дополнительные библиотеки без которых код не будет работать. Чтобы посмотреть список подключенных библиотек надо нажать на настройки блока (шестеренка) и посмотреть есть ли в списке ссылки на них. Если есть ссылки на библиотеки соответственно вам тоже нужно их подключить в код. Ну а проще всего конечно зарегистрироваться на сайте. Нажать в правом нижнем углу Export -> Export .zip и получить архив с содержимым. Соответственно index.html это будет HTML-код. В папке css будет файл с CSS-кодом. В папке js будет скрипт с JS-кодом. Все эти файлы будут на чистом коде. Если использовались дополнительные процессоры, то код под них будет в соответствующих папках.
Простой