JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="triangle-logo">
    <div class="left-triangle"></div>
    <div class="right-triangle"></div>
    <div class="shadow"></div>
</div>

<!-- Based off of this image -->
<!-- http://www.sirby.fr/projects/relive-web-app -->
<!-- http://www.relive.fr/ -->
<img...

CSS

body {
    background: #293439;
}

.triangle-logo {
    height: 8rem;
    width: 9rem;    
    position: fixed;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 8rem;
}

.triangle-logo .left-triangle, .triangle-logo .right-triangle, .triangle-logo .shadow {
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
}

.triangle-logo .left-triangle {
    position: absolute;
    left: 0;
    top: 0;
    border-width: 4rem 0 4rem 7rem;
    border-left-color: #FF8C3D;
}

.triangle-logo .right-triangle {
    position: absolute;
    right: 0;
    top: 0;
    border-width: 4rem 7rem 4rem 0;    
    border-right-color: rgba(255, 255, 255, 0.6);
}

.triangle-logo .shadow {
    position: absolute;
    left: 0;
    bottom: 3rem;
    border-width: 0 .29rem 4.37rem 2.58rem;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    -webkit-transform: translateX(.74rem) translateY(3.8rem) rotateZ(-150.2deg);
}

img {
    position: fixed;
    margin: auto;
    top: 22rem;
    left: 0;
    right: 0;
    bottom: 0;
    width: 490px;
}