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" x="0px" y="0px"
viewBox="0 0 595.3 70" enable-background="new 0 0 595.3 70" xml:space="preserve">
<g id="Capa_1">
<rect y="-1" fill="none" width="16.8" height="71"/>
<rect fill="none" width="16.8" height="70"/>
<path fill="none" d="M0,34.5"/>
<rect fill="none" width="13" height="11.5"/>
<rect x="6.5" y="4" fill="none" width="8.3" height="1.8"/>
<rect x="13" fill="none" width="13.3" height="8.5"/>
<g id="XMLID_1_">
<g>
<polygon fill="#1AD5D5" points="35,8.5 19.5,34.1 34.7,60.5 19.5,60.5 4.3,34.1 19.5,8.5 "/>
</g>
<g>
</g>
</g>
<rect x="36.3" y="4.9" fill="none" width="30" height="55.4"/>
<rect x="19.5" y="8.5" fill="none" width="15.5" height="6.8"/>
<rect x="51.3" y="8.5" fill="none" width="15" height="8.8"/>
</g>
<g id="Capa_1_copia_2">
<rect y="-1" fill="none" width="16.8" height="71"/>
<rect fill="none" width="16.8" height="70"/>
<path fill="none" d="M0,34.5"/>
<rect fill="none" width="13" height="11.5"/>
<rect x="6.5" y="4" fill="none" width="8.3" height="1.8"/>
<rect x="13" fill="none" width="13.3" height="8.5"/>
<g id="XMLID_2_">
<g>
<polygon fill="#1AD5D5" points="242.2,60.5 257.8,34.9 242.6,8.5 257.8,8.5 273,34.9 257.7,60.5 "/>
</g>
<g>
</g>
</g>
<rect x="36.3" y="4.9" fill="none" width="30" height="55.4"/>
<rect x="19.5" y="8.5" fill="none" width="15.5" height="6.8"/>
<rect x="51.3" y="8.5" fill="none" width="15" height="8.8"/>
</g>
<g id="Capa_1_copia">
<rect y="-1" fill="none" width="16.8" height="71"/>
<rect fill="none" width="16.8" height="70"/>
<path fill="none" d="M0,34.5"/>
<rect fill="none" width="13" height="11.5"/>
<rect x="6.5" y="4" fill="none" width="8.3" height="1.8"/>
<rect x="13" fill="none" width="13.3" height="8.5"/>
<rect x="36.3" y="4.9" fill="none" width="30" height="55.4"/>
<rect x="19.5" y="8.5" fill="none" width="15.5" height="6.8"/>
<rect x="51.3" y="8.5"...
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;
}
}