CodePen Embed -

Live

This code preview is provided by CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjM0NTM4ODIxLCJpYXQiOjE2MzQ1MzUyMjEsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.0GxZgm2XViKK-N2Y7WyENxP4KLEnyzAhzRHSf6FFiHJSc01F870gxt_vPXwyRQ1fGHQopqb1PDFM77bKmQordmVPMWrmom4EZ9pXDaTbOnKBdDggL_MU2dEceBz9H0JHoShFpu6Au9C1OpvhclSoze60DoJ7l4hmxaCKNMmvrtfIbRYPihKtSh8ravC9BJC7LlGOdF4DZAH6q904Q5DGpIlwZ9x75uUiZQgI3nQOuEwo82IQel0onvgJOc5OivxKgZbvqMn9G2_20c7Dlv6dkZqK4LGjEEEidXe28fqdft9Y_BLgCmwqi-OQ_giycP-rXVmZ2vYutk66os-oAvk-hw"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"USER","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":null,"teams":[],"__typename":"User"}}},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cp/internal/boomboom","store_url":"https://codepen.io/cp/internal/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"auto_save\":true,\"format_on_save\":false,\"indent_with\":\"spaces\",\"tab_size\":\"2\",\"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\":\"monaco\",\"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\":null,\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://unpkg.com/react/umd/react.development.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://unpkg.com/react-dom/umd/react-dom.development.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://unpkg.com/@stitches/react/dist/index.global.js\",\"order\":2,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":0,\"user_id\":1,\"html\":null,\"css\":null,\"parent\":0,\"js\":\"const { styled } = stitches\\n\\n// add your code here!\\n// see https://stitches.dev for documentation\",\"html_pre_processor\":\"\",\"css_pre_processor\":\"\",\"js_pre_processor\":\"\",\"html_classes\":\"\",\"css_starter\":\"\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":\"https://unpkg.com/react/umd/react.development.js;https://unpkg.com/react-dom/umd/react-dom.development.js;https://unpkg.com/@stitches/react/dist/index.global.js\",\"created_at\":null,\"updated_at\":null,\"session_hash\":null,\"title\":\"\",\"description\":\"\",\"slug_hash\":\"\",\"head\":null,\"private\":false,\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":null,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":null,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTYzNDUzODgyMX0.nt7BbXGf-NHVycYOjpfe2AB8h10RYRnbNwiZDc1DASM","__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-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.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-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.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-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}