Anonymous Pens can't be embedded.
Edit on CodePen
{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"indent_with\":\"spaces\",\"tab_size\":2,\"auto_save\":true,\"format_on_save\":false,\"auto_run\":true,\"id\":\"VoDkNZ\",\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"html_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"theme\":\"twilight\"},\"hashid\":\"pmNBNO\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":35932964,\"user_id\":1,\"html\":\"\\n <!-- Tab links -->\\n<div class=\\\"tabs\\\">\\n <button class=\\\"tablinks active\\\" data-country=\\\"Халаты\\\"><p data-title=\\\"Халаты\\\">Халаты</p></button>\\n <button class=\\\"tablinks\\\" data-country=\\\"Фартуки\\\"><p data-title=\\\"Фартуки\\\">Фартуки</p></button>\\n <button class=\\\"tablinks\\\" data-country=\\\"Костюмы\\\"><p data-title=\\\"Костюмы\\\">Костюмы</p></button>\\n <button class=\\\"tablinks\\\" data-country=\\\"Жилеты\\\"><p data-title=\\\"Жилеты\\\">Жилеты</p></button>\\n <button class=\\\"tablinks\\\" data-country=\\\"Куртки\\\"><p data-title=\\\"Куртки\\\">Куртки</p></button>\\n <button class=\\\"tablinks\\\" data-country=\\\"Рукавицы\\\"><p data-title=\\\"Рукавицы\\\">Рукавицы</p></button>\\n <button class=\\\"tablinks\\\" data-country=\\\"Головные уборы\\\"><p data-title=\\\"Головные уборы\\\">Головные уборы</p></button>\\n <button class=\\\"tablinks\\\" data-country=\\\"Прочее\\\"><p data-title=\\\"Прочее\\\">Прочее</p></button>\\n</div>\\n\\n <!-- Tab content -->\\n<div class=\\\"wrapper_tabcontent\\\">\\n <div id=\\\"bathrobes\\\" class=\\\"tabcontent active\\\">\\n <h3>Халаты</h3>\\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor omnis sequi delectus reprehenderit odio molestias quasi tenetur eius, maiores commodi id rerum? Quaerat quos expedita consectetur modi odit sunt nobis, nisi minima. Deserunt dolore dolor fuga ea ratione ipsa sit adipisci, cum nostrum, ullam, id distinctio explicabo? At, aperiam iusto.</p>\\n </div>\\n\\n <div id=\\\"aprons\\\" class=\\\"tabcontent\\\">\\n <h3>Фартуки</h3>\\n <p>1111Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas, doloremque esse, voluptates pariatur totam praesentium itaque numquam, culpa iste laboriosam iure? Reprehenderit quasi excepturi modi quidem dignissimos ut voluptatibus fugit hic temporibus provident nisi delectus error atque, qui quo, dolorum, architecto aliquam expedita maiores ea libero eius a accusamus.</p>\\n </div>\\n\\n <div id=\\\"costumes\\\" class=\\\"tabcontent\\\">\\n <h3>Костюмы</h3>\\n <p>323Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas, doloremque esse, voluptates pariatur totam praesentium itaque numquam, culpa iste laboriosam iure? Reprehenderit quasi excepturi modi quidem dignissimos ut voluptatibus fugit hic temporibus provident nisi delectus error atque, qui quo, dolorum, architecto aliquam expedita maiores ea libero eius a accusamus.</p>\\n </div>\\n\\n <div id=\\\"vests\\\" class=\\\"tabcontent\\\">\\n <h3>Жилеты</h3>\\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas, doloremque esse, voluptates pariatur totam praesentium itaque numquam, culpa iste laboriosam iure? Reprehenderit quasi excepturi modi quidem dignissimos ut voluptatibus fugit hic temporibus provident nisi delectus error atque, qui quo, dolorum, architecto aliquam expedita maiores ea libero eius a accusamus.</p>\\n </div>\\n\\n <div id=\\\"jackets\\\" class=\\\"tabcontent\\\">\\n <h3>Куртки</h3>\\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas, doloremque esse, voluptates pariatur totam praesentium itaque numquam, culpa iste laboriosam iure? Reprehenderit quasi excepturi modi quidem dignissimos ut voluptatibus fugit hic temporibus provident nisi delectus error atque, qui quo, dolorum, architecto aliquam expedita maiores ea libero eius a accusamus.</p>\\n </div>\\n\\n <div id=\\\"mittens\\\" class=\\\"tabcontent\\\">\\n <h3>Рукавицы</h3>\\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas, doloremque esse, voluptates pariatur totam praesentium itaque numquam, culpa iste laboriosam iure? Reprehenderit quasi excepturi modi quidem dignissimos ut voluptatibus fugit hic temporibus provident nisi delectus error atque, qui quo, dolorum, architecto aliquam expedita maiores ea libero eius a accusamus.</p>\\n </div>\\n\\n <div id=\\\"hats\\\" class=\\\"tabcontent\\\">\\n <h3>Головные уборы</h3>\\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas, doloremque esse, voluptates pariatur totam praesentium itaque numquam, culpa iste laboriosam iure? Reprehenderit quasi excepturi modi quidem dignissimos ut voluptatibus fugit hic temporibus provident nisi delectus error atque, qui quo, dolorum, architecto aliquam expedita maiores ea libero eius a accusamus.</p>\\n </div>\\n\\n <div id=\\\"other\\\" class=\\\"tabcontent\\\">\\n <h3>Прочее</h3>\\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore voluptas, doloremque esse, voluptates pariatur totam praesentium itaque numquam, culpa iste laboriosam iure? Reprehenderit quasi excepturi modi quidem dignissimos ut voluptatibus fugit hic temporibus provident nisi delectus error atque, qui quo, dolorum, architecto aliquam expedita maiores ea libero eius a accusamus.</p>\\n </div>\\n\\n </div>\\n </div>\\n </div>\\n </div>\\n </section>\\n\",\"css\":\".tabs {\\n margin: 0;\\n background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-pack: justify;\\n -ms-flex-pack: justify;\\n justify-content: space-between;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center;\\n height: 80px;\\n border-radius: 2px 2px 0px 0px;\\n}\\n\\n.tablinks {\\n background: transparent;\\n background-image: -webkit-gradient(linear, left top, right top, color-stop(70%, transparent), to(rgba(255, 255, 255, 0.2)));\\n background-image: linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, 0.2) 100%);\\n border: none;\\n outline: none;\\n cursor: pointer;\\n width: 25%;\\n height: 80px;\\n position: relative;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center;\\n font-size: 16px;\\n overflow: hidden;\\n -webkit-transition: 0.3s ease;\\n transition: 0.3s ease;\\n}\\n\\n.tablinks:focus {\\n outline: none;\\n}\\n\\n.tablinks:before {\\n background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\\n content: '';\\n width: 100%;\\n height: 0px;\\n position: absolute;\\n top: 0;\\n left: 0;\\n -webkit-transition: 0.3s ease-in-out;\\n transition: 0.3s ease-in-out;\\n z-index: 2;\\n}\\n\\n.tablinks:hover::before {\\n height: 100%;\\n z-index: 2;\\n bottom: 0;\\n}\\n\\n.tablinks.active {\\n background-color: white;\\n z-index: 0;\\n border-right: 0px;\\n border-left: 0px;\\n height: 110px;\\n bottom: 0px;\\n overflow: hidden;\\n}\\n\\n.tablinks.active:before {\\n content: '';\\n width: 100%;\\n height: 5px;\\n top: 0;\\n left: 0;\\n}\\n\\n.tablinks p {\\n opacity: 0.6;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center;\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center;\\n z-index: 2;\\n -webkit-transition: 0.5s ease;\\n transition: 0.5s ease;\\n padding: 0;\\n margin: 0;\\n color: #686868;\\n -webkit-backface-visibility: hidden;\\n backface-visibility: hidden;\\n font-weight: 400;\\n}\\n\\n.tablinks p:before {\\n content: attr(data-title);\\n position: absolute;\\n height: auto;\\n width: auto;\\n color: white;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n -webkit-box-align: center;\\n -ms-flex-align: center;\\n align-items: center;\\n -webkit-box-pack: center;\\n -ms-flex-pack: center;\\n justify-content: center;\\n opacity: 0.1;\\n font-size: 40px;\\n -webkit-transition: 1s ease-out;\\n transition: 1s ease-out;\\n z-index: -1;\\n font-weight: 600;\\n top: 110%;\\n}\\n\\n.tablinks:hover p {\\n color: white;\\n opacity: 1;\\n}\\n\\n.tablinks:hover p:before {\\n opacity: 0.1;\\n font-size: 40px;\\n top: -80%;\\n}\\n\\n.tablinks.active p,\\n.tablinks.active:hover p {\\n opacity: 1;\\n background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n}\\n\\n.wrapper_tabcontent {\\n background-color: white;\\n margin-top: 0px;\\n z-index: -3;\\n position: relative;\\n opacity: 1;\\n padding: 40px 60px;\\n overflow: hidden;\\n -webkit-transition: all 1s ease;\\n transition: all 1s ease;\\n top: 0;\\n}\\n\\n.wrapper_tabcontent:after {\\n content: '';\\n height: 5px;\\n width: 100%;\\n position: absolute;\\n background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\\n left: 0;\\n bottom: 0;\\n z-index: -2;\\n -webkit-transition: all 1s ease;\\n transition: all 1s ease;\\n}\\n\\n.tabcontent {\\n display: none;\\n min-height: 180px;\\n}\\n\\n.tabcontent h3 {\\n font-size: 40px;\\n top: 75px;\\n -webkit-transform: rotate(90deg);\\n transform: rotate(90deg);\\n position: absolute;\\n left: -90px;\\n opacity: 0.1;\\n width: 200px;\\n height: 60px;\\n background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);\\n -webkit-background-clip: text;\\n -webkit-text-fill-color: transparent;\\n padding: 0;\\n -webkit-animation: city 1s ease;\\n animation: city 1s ease;\\n}\\n\\n.tabcontent p {\\n color: #686868;\\n margin: 0;\\n padding: 0;\\n line-height: 28px;\\n font-weight: 100;\\n -webkit-transition: all 1s ease;\\n transition: all 1s ease;\\n -webkit-animation: fadeEffect 0.6s ease;\\n animation: fadeEffect 0.6s ease;\\n width: 100%;\\n font-size: 16px;\\n}\\n\\n.tabcontent.active {\\n -webkit-transition: all 1s ease;\\n transition: all 1s ease;\\n display: block;\\n}\\n\\n@-webkit-keyframes tabEffect {\\n from {\\n top: -40px;\\n }\\n to {\\n top: 0px;\\n }\\n}\\n\\n@keyframes tabEffect {\\n from {\\n top: -40px;\\n }\\n to {\\n top: 0px;\\n }\\n}\\n\\n@-webkit-keyframes city {\\n from {\\n left: -150px;\\n }\\n to {\\n left: -90px;\\n }\\n}\\n\\n@keyframes city {\\n from {\\n left: -150px;\\n }\\n to {\\n left: -90px;\\n }\\n}\\n\\n@-webkit-keyframes fadeEffect {\\n from {\\n opacity: 0;\\n margin-left: 30px;\\n }\\n to {\\n opacity: 1;\\n margin-left: 0;\\n }\\n}\\n\\n@keyframes fadeEffect {\\n from {\\n opacity: 0;\\n margin-left: 30px;\\n }\\n to {\\n opacity: 1;\\n margin-left: 0;\\n }\\n}\\n\",\"js\":\"// tabs\\n\\nvar tabLinks = document.querySelectorAll(\\\".tablinks\\\");\\nvar tabContent = document.querySelectorAll(\\\".tabcontent\\\");\\n\\n\\ntabLinks.forEach(function(el) {\\n el.addEventListener(\\\"click\\\", openTabs);\\n});\\n\\n\\nfunction openTabs(el) {\\n var btnTarget = el.currentTarget;\\n var country = btnTarget.dataset.country;\\n\\n tabContent.forEach(function(el) {\\n el.classList.remove(\\\"active\\\");\\n });\\n\\n tabLinks.forEach(function(el) {\\n el.classList.remove(\\\"active\\\");\\n });\\n\\n document.querySelector(\\\"#\\\" + country).classList.add(\\\"active\\\");\\n \\n btnTarget.classList.add(\\\"active\\\");\\n}\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2019-05-14T16:03:41.000Z\",\"updated_at\":\"2019-05-14T16:05:15.000Z\",\"title\":\"Untitled\",\"description\":\"\",\"slug_hash\":\"pmNBNO\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":null,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:57.485Z\",\"cpid\":null,\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}