Token: {token}
\nHex: {hex}
\nToken: {token}
\nHex: {hex}
\nToken: {token}
\nHex: {hex}
\nToken: {token}
\nHex: {hex}
\nToken: {token}
\nHex: {hex}
\nToken: {token}
\nHex: {hex}
\nToken: {token}
\nHex: {hex}
\nToken: {token}
\nHex: {hex}
\nToken: {token}
\nHex: {hex}
\n..
blocks on a page.\n */\n function initHighlighting() {\n if (initHighlighting.called)\n return;\n initHighlighting.called = true;\n\n var blocks = document.querySelectorAll('pre code');\n ArrayProto.forEach.call(blocks, highlightBlock);\n }\n\n /*\n Attaches highlighting to the page load event.\n */\n function initHighlightingOnLoad() {\n addEventListener('DOMContentLoaded', initHighlighting, false);\n addEventListener('load', initHighlighting, false);\n }\n\n function registerLanguage(name, language) {\n var lang = languages[name] = language(hljs);\n restoreLanguageApi(lang);\n if (lang.aliases) {\n lang.aliases.forEach(function(alias) {aliases[alias] = name;});\n }\n }\n\n function listLanguages() {\n return objectKeys(languages);\n }\n\n function getLanguage(name) {\n name = (name || '').toLowerCase();\n return languages[name] || languages[aliases[name]];\n }\n\n function autoDetection(name) {\n var lang = getLanguage(name);\n return lang && !lang.disableAutodetect;\n }\n\n /* Interface definition */\n\n hljs.highlight = highlight;\n hljs.highlightAuto = highlightAuto;\n hljs.fixMarkup = fixMarkup;\n hljs.highlightBlock = highlightBlock;\n hljs.configure = configure;\n hljs.initHighlighting = initHighlighting;\n hljs.initHighlightingOnLoad = initHighlightingOnLoad;\n hljs.registerLanguage = registerLanguage;\n hljs.listLanguages = listLanguages;\n hljs.getLanguage = getLanguage;\n hljs.autoDetection = autoDetection;\n hljs.inherit = inherit;\n\n // Common regexps\n hljs.IDENT_RE = '[a-zA-Z]\\\\w*';\n hljs.UNDERSCORE_IDENT_RE = '[a-zA-Z_]\\\\w*';\n hljs.NUMBER_RE = '\\\\b\\\\d+(\\\\.\\\\d+)?';\n hljs.C_NUMBER_RE = '(-?)(\\\\b0[xX][a-fA-F0-9]+|(\\\\b\\\\d+(\\\\.\\\\d*)?|\\\\.\\\\d+)([eE][-+]?\\\\d+)?)'; // 0x..., 0..., decimal, float\n hljs.BINARY_NUMBER_RE = '\\\\b(0b[01]+)'; // 0b...\n hljs.RE_STARTERS_RE = '!|!=|!==|%|%=|&|&&|&=|\\\\*|\\\\*=|\\\\+|\\\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\\\?|\\\\[|\\\\{|\\\\(|\\\\^|\\\\^=|\\\\||\\\\|=|\\\\|\\\\||~';\n\n // Common modes\n hljs.BACKSLASH_ESCAPE = {\n begin: '\\\\\\\\[\\\\s\\\\S]', relevance: 0\n };\n hljs.APOS_STRING_MODE = {\n className: 'string',\n begin: '\\'', end: '\\'',\n illegal: '\\\\n',\n contains: [hljs.BACKSLASH_ESCAPE]\n };\n hljs.QUOTE_STRING_MODE = {\n className: 'string',\n begin: '\"', end: '\"',\n illegal: '\\\\n',\n contains: [hljs.BACKSLASH_ESCAPE]\n };\n hljs.PHRASAL_WORDS_MODE = {\n begin: /\\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\\b/\n };\n hljs.COMMENT = function (begin, end, inherits) {\n var mode = hljs.inherit(\n {\n className: 'comment',\n begin: begin, end: end,\n contains: []\n },\n inherits || {}\n );\n mode.contains.push(hljs.PHRASAL_WORDS_MODE);\n mode.contains.push({\n className: 'doctag',\n begin: '(?:TODO|FIXME|NOTE|BUG|XXX):',\n relevance: 0\n });\n return mode;\n };\n hljs.C_LINE_COMMENT_MODE = hljs.COMMENT('//', '$');\n hljs.C_BLOCK_COMMENT_MODE = hljs.COMMENT('/\\\\*', '\\\\*/');\n hljs.HASH_COMMENT_MODE = hljs.COMMENT('#', '$');\n hljs.NUMBER_MODE = {\n className: 'number',\n begin: hljs.NUMBER_RE,\n relevance: 0\n };\n hljs.C_NUMBER_MODE = {\n className: 'number',\n begin: hljs.C_NUMBER_RE,\n relevance: 0\n };\n hljs.BINARY_NUMBER_MODE = {\n className: 'number',\n begin: hljs.BINARY_NUMBER_RE,\n relevance: 0\n };\n hljs.CSS_NUMBER_MODE = {\n className: 'number',\n begin: hljs.NUMBER_RE + '(' +\n '%|em|ex|ch|rem' +\n '|vw|vh|vmin|vmax' +\n '|cm|mm|in|pt|pc|px' +\n '|deg|grad|rad|turn' +\n '|s|ms' +\n '|Hz|kHz' +\n '|dpi|dpcm|dppx' +\n ')?',\n relevance: 0\n };\n hljs.REGEXP_MODE = {\n className: 'regexp',\n begin: /\\//, end: /\\/[gimuy]*/,\n illegal: /\\n/,\n contains: [\n hljs.BACKSLASH_ESCAPE,\n {\n begin: /\\[/, end: /\\]/,\n relevance: 0,\n contains: [hljs.BACKSLASH_ESCAPE]\n }\n ]\n };\n hljs.TITLE_MODE = {\n className: 'title',\n begin: hljs.IDENT_RE,\n relevance: 0\n };\n hljs.UNDERSCORE_TITLE_MODE = {\n className: 'title',\n begin: hljs.UNDERSCORE_IDENT_RE,\n relevance: 0\n };\n hljs.METHOD_GUARD = {\n // excludes method names from keyword processing\n begin: '\\\\.\\\\s*' + hljs.UNDERSCORE_IDENT_RE,\n relevance: 0\n };\n\n return hljs;\n}));\n","module.exports = function(hljs) {\n var XML_IDENT_RE = '[A-Za-z0-9\\\\._:-]+';\n var TAG_INTERNALS = {\n endsWithParent: true,\n illegal: /,\n relevance: 0,\n contains: [\n {\n className: 'attr',\n begin: XML_IDENT_RE,\n relevance: 0\n },\n {\n begin: /=\\s*/,\n relevance: 0,\n contains: [\n {\n className: 'string',\n endsParent: true,\n variants: [\n {begin: /\"/, end: /\"/},\n {begin: /'/, end: /'/},\n {begin: /[^\\s\"'=<>`]+/}\n ]\n }\n ]\n }\n ]\n };\n return {\n aliases: ['html', 'xhtml', 'rss', 'atom', 'xjb', 'xsd', 'xsl', 'plist', 'wsf'],\n case_insensitive: true,\n contains: [\n {\n className: 'meta',\n begin: '',\n relevance: 10,\n contains: [{begin: '\\\\[', end: '\\\\]'}]\n },\n hljs.COMMENT(\n '',\n {\n relevance: 10\n }\n ),\n {\n begin: '<\\\\!\\\\[CDATA\\\\[', end: '\\\\]\\\\]>',\n relevance: 10\n },\n {\n className: 'meta',\n begin: /<\\?xml/, end: /\\?>/, relevance: 10\n },\n {\n begin: /<\\?(php)?/, end: /\\?>/,\n subLanguage: 'php',\n contains: [\n // We don't want the php closing tag ?> to close the PHP block when\n // inside any of the following blocks:\n {begin: '/\\\\*', end: '\\\\*/', skip: true},\n {begin: 'b\"', end: '\"', skip: true},\n {begin: 'b\\'', end: '\\'', skip: true},\n hljs.inherit(hljs.APOS_STRING_MODE, {illegal: null, className: null, contains: null, skip: true}),\n hljs.inherit(hljs.QUOTE_STRING_MODE, {illegal: null, className: null, contains: null, skip: true})\n ]\n },\n {\n className: 'tag',\n /*\n The lookahead pattern (?=...) ensures that 'begin' only matches\n '', returnEnd: true,\n subLanguage: ['css', 'xml']\n }\n },\n {\n className: 'tag',\n // See the comment in the \n\n\n \n {snippet}
\n
\n \n Large copy\n : Phasellus at aliquet mi. Nulla venenatis elementum congue. Ut tincidunt orci nisl, ut convallis nibh egestas quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n ridiculus mus. Phasellus vitae mi ac velit semper pharetra. Nullam facilisis ac diam nec vulputate. Praesent ornare id ex porttitor luctus. Mauris at metus tortor. Nulla a purus ac risus\n gravida congue porta bibendum ante. Sed leo elit, cursus eget malesuada ut, fermentum nec quam. Aliquam facilisis pharetra est eu porta. Quisque tincidunt erat ut leo pulvinar, sed auctor\n justo dapibus.\n
\n\n Normal copy\n : Ut tincidunt orci nisl, ut convallis nibh egestas quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vitae mi ac velit semper pharetra.\n Nullam facilisis ac diam nec vulputate. Praesent ornare id ex porttitor luctus. Mauris at metus tortor. Nulla a purus ac risus gravida congue porta bibendum ante. Sed leo elit, cursus eget\n malesuada ut, fermentum nec quam. Aliquam facilisis pharetra est eu porta. Quisque tincidunt erat ut leo pulvinar, sed auctor justo dapibus.\n
\n\n Small copy\n : Ut tincidunt orci nisl, ut convallis nibh egestas quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vitae mi ac velit semper pharetra.\n Nullam facilisis ac diam nec vulputate. Praesent ornare id ex porttitor luctus. Mauris at metus tortor. Nulla a purus ac risus gravida congue porta bibendum ante. Sed leo elit, cursus eget\n malesuada ut, fermentum nec quam. Aliquam facilisis pharetra est eu porta. Quisque tincidunt erat ut leo pulvinar, sed auctor justo dapibus.\n
\n\n Phasellus at aliquet mi. Nulla venenatis elementum congue. Ut tincidunt orci nisl, ut convallis nibh egestas quis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n ridiculus mus.\n
\n {@html snippet}\n\n Phasellus vitae mi ac velit semper pharetra. Nullam facilisis ac diam nec vulputate. Praesent ornare id ex porttitor luctus. Mauris at metus tortor. Nulla a purus ac risus gravida congue\n porta bibendum ante.\n
\nYou'll also need some vanilla JS for this to work. You can find an example snippet below.
\n\n Importantly, you will need to ensure that your other element has a class of\n \"tabs\"
\n and that each tab content area has an\n id
\n beginning with\n \"tabpanel\"
\n
\n {snippet}
\n
\n \n The Tailwind docs are fantastic. Every available css property is cleary explained with simple examples. We will quickly explain some key concepts here but before continuing down this page\n please familiarise yourself with the offical Tailwind docs.\n
\n Take me to the Tailwind docs!\n\n Tailwind is a utility-based framework, which means you compose together atomic classes to achieve your desired styling. If things are done well you shouldn't need to write CSS at all!\n
\n {@html utilityBased}\n\n Keeping a long list of utility classes in sync across many component instances can quickly become a real maintenance burden, that's why we have extracted some pre-built components for you.\n Take our button for example:\n
\n