JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<div style="perspective: 6900px">
    <div id="inner" style="transform: skewx(0deg) translate(00px, -200px) scale(.6) scaleX(.9) rotateY(40deg); transform-origin: bottom left;">
        <iframe src="http://ourcathedral.org/" width="600" height="800"></iframe>
    <iframe src="http://ourcathedral.org/about/" width="600" height="800"></iframe>
    </div>
</div>

CSS

div {
    font-size:100px;
    border:2px;
    background: linear-gradient(135deg, red 0%, red 40%, black 40%, black 100%), white;
    -webkit-background-clip: text, border;
    color: transparent;
    width:1800px;
    float:left;
}
#inner:hover iframe{
    rotate(0);
}