JSFiddle - React, Tailwind, and code Playground

by Sandra Caroline Hansen

HTML

<link rel="preload" href="//m.finncdn.no/static/mfinn.37ae1c51.js" as="script" crossorigin>

        <link rel="dns-prefetch" href="https://finncdn.global.ssl.fastly.net">
            <link rel="preconnect" href="https://finncdn.global.ssl.fastly.net">
        <link rel="dns-prefetch" href="https://images.finncdn.no">
            <link rel="preconnect" href="https://images.finncdn.no">
        <link rel="stylesheet" href="//m.finncdn.no/static/mfinn.46a910b8.css" crossorigin>



        <link rel="manifest" href="/manifest.json">
        <meta name="format-detection" content="telephone=no">
        <meta name="FINN.marketplace" content="">
        <meta name="FINN.usergroup" content="17">
        <meta name="FINN.userid" content="1495142053">
        <meta name="csrf-token" content="t+cAhDrreOGQ+7YQwffrsGfthXdvepkxQOid+c0cQ2c=">
        <meta name="resultListLayout" content="list">
    <meta name="siteConfig.spidClientId" content="5087dc1b421c7a0b79000000">
        <meta name="siteConfig.spidBaseUri" content="https://payment.schibsted.no">
        <meta name="siteConfig.insecureWwwSite" content="http://www.finn.no">
        <meta name="siteConfig.wwwSite" content="https://www.finn.no">
        <meta name="siteConfig.cdnUrl" content="//m.finncdn.no">
        <meta name="siteConfig.imageCdnUrl" content="https://finncdn.global.ssl.fastly.net">
        <meta name="siteConfig.timingEnabled" content="true">
        <meta name="siteConfig.streamBannerPosition" content="3">
        <meta name="siteConfig.lazyLoadBanners" content="true">

        <link rel="icon" href="/static/images/favicon.ico">
<link rel="icon" href="//m.finncdn.no/static/images/favicon-t-32x32.6ecbe5ed.png" sizes="32x32">
<link rel="icon" href="//m.finncdn.no/static/images/favicon-t-192x192.7800f1c8.png" sizes="192x192">
<link rel="icon" href="//m.finncdn.no/static/images/favicon-t-96x96.bc97d1f4.png" sizes="96x96">
<link rel="icon" href="//m.finncdn.no/static/images/favicon-t-16x16.38956ddb.png"...

CSS

.topbar-finnlet-jmcNn{width:100%;background-color:#06befb;top:0;z-index:3;-webkit-backface-visibility:hidden;backface-visibility:hidden}.topbar-finnlet-jmcNn img{border-radius:50%}.topbar-finnlet-jmcNn svg,.topbar-finnlet-jmcNn img{margin-right:5px;vertical-align:middle}.topbar-nav-2PYdG{margin-right:10px;height:55px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;min-width:0}.topbar-nav-2PYdG a{height:100%;display:inline-block}.topbar-nav-2PYdG a{font-size:16px;color:#fff;position:relative;text-align:center;display:-webkit-flex;display:-ms-flexbox;display:f

   
        [tabindex]:not([tabindex="-1"]) {
            cursor: default;
        }
        button.blank:focus {
            box-shadow: none;
        }lex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-items:center;-ms-flex-align:center;align-items:center;min-width:0}.topbar-nav-2PYdG a:hover{text-decoration:none}.topbar-logoItem-YKXtr{padding:0 20px 0 0;color:#fff}.topbar-item-ptVXt{background-color:#0063fb;padding:0 20px;white-space:nowrap}.topbar-item-ptVXt:hover:after,.topbar-itemActive-1WjCH:after{content:"";position:absolute;height:5px;width:100%;background:#06befb;bottom:0;left:0}.topbar-pushContentDown-3pFf-{height:65px}.topbar-pushToCenter-qdswa{margin-left:auto}@media(max-width:767px){.topbar-nav-2PYdG{margin:0}.topbar-item-ptVXt span{font-size:10px;display:block}.topbar-logoItem-YKXtr{padding:0 10px}.topbar-item-ptVXt,a.topbar-item-ptVXt{display:inline-block;padding:7px 20px 0 20px}.topbar-finnlet-jmcNn svg,.topbar-finnlet-jmcNn img{margin:0}}@media(max-width:479px){a.topbar-item-ptVXt{padding:7px 8px 0 8px}}@media print{.topbar-finnlet-jmcNn{position:static}.topbar-pushContentDown-3pFf-{height:0}dummy::-ms-expand,.topbar-item-ptVXt,a.topbar-item-ptVXt{display:none}}

   
        [tabindex]:not([tabindex="-1"]) {
            cursor: default;
    ...

JavaScript

(function() {
                var imgs = document.querySelectorAll("[data-ref=\"error-image\"]");
                for (var n = 0, e; e = imgs[n++];) {
                    e.onerror = function(evt) {
                        window.setTimeout(function() {
                            if (window.trackJs) {
                                trackJs.addMetadata("failed-image-src", evt.target.src);
                                trackJs.addMetadata("failed-image-srcset", evt.target.srcset);
                                trackJs.addMetadata("failed-image-device-time", (new Date().toISOString()));
                                trackJs.track("failed-image");
                                trackJs.removeMetadata("failed-image-src");
                                trackJs.removeMetadata("failed-image-srcset");
                                trackJs.removeMetadata("failed-image-device-time");
                            }
                        }, 5000);
                    }
                }
            })();
            
            
            (function() {
                        var container = document.querySelector("[data-some-footer-tracking]");
                        if (container) {
                            container.addEventListener('click', trackInteraction);
                        }

                        var events = {
                            facebook: {analyticsName: 'other.visit-finn-facebook.click', eventFlags: 'start,ltp'},
                            twitter: {analyticsName: 'other.visit-finn-twitter.click', eventFlags: 'start,ltp'},
                            instagram: {analyticsName: 'other.visit-finn-instagram.click', eventFlags: 'start,ltp'},
                            youtube: {analyticsName: 'other.visit-finn-youtube.click', eventFlags: 'start,ltp'}
                        }

                        function trackInteraction(evt) {
                            if (window.FINN && window.FINN.analytics) {
                          ...