JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg" 
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="500px" height="500px">
            <defs>
                <linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse" 
                    x1="196" y1="485.6281" x2="196" y2="732.5812" 
                    gradientTransform="matrix(1 0 0 1 -71 -486.5)">
                    <stop  offset="0" stop-color="#03a9f4"/>
                    <stop  offset="1" stop-color="#0288d1"/>
                </linearGradient>
                <radialGradient id="right_2_" cx="146.3819" cy="449.8799" 
                    r="408.7811" gradientTransform="matrix(1 0 0 1 -71 -486.5)" 
                    gradientUnits="userSpaceOnUse">
                    <stop  offset="0" stop-color="#64b5f6"/>
                    <stop  offset="1" stop-color="#0d47a1"/>
                </radialGradient>
                <radialGradient id="left_1_" cx="139.0562" cy="454.2622" 
                    r="507.5908" gradientTransform="matrix(1 0 0 1 -71 -486.5)" 
                    gradientUnits="userSpaceOnUse">
                    <stop  offset="0" stop-color="#01579b"/>
                    <stop  offset="1" stop-color="#0288d1"/>
                </radialGradient>
                <linearGradient id="top_1_" gradientUnits="userSpaceOnUse" 
                    x1="195.922" y1="486.8864" x2="195.922" y2="732.5903" 
                    gradientTransform="matrix(1 0 0 1 -71 -486.5)">
                    <stop  offset="0" stop-color="#00b0ff"/>
                    <stop  offset="1" stop-color="#311b92"/>
                </linearGradient>
                </defs>
            <polygon id="bottom" fill="url(#bottom_1_)" stroke="url(#bottom_1_)" 
            points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24 
            51,211.82 124.941,247.884 199,211.9 160.771,192.962 "/>
            <polygon id="right" fill="url(#right_2_)" stroke="url(#right_2_)" 
     ...

CSS

html {
    overflow: hidden;
}

body {
    background: #eee;
    text-align: center;
}

svg {
    display: inline-block;
    width:100%;
}

iframe {
    display: inline-block;
    border: none;
    height: 300px;
    width: 400px;
    margin: 10px;
}

@media all and (max-width:900px) { 
    iframe {
        width: 360px;
        height: 270px;
        margin: 0;
    }
}

@media all and (max-width:800px) { 
    iframe {
        width: 340px;
        height: 260px;
        margin: 0;
    }
}