JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://arteriacr.com/js/libs/impress.js"></script>
<script src="http://arteriacr.com/js/libs/prefix.js"></script>
<link rel="stylesheet" href="http://arteriacr.com/css/bootstrap.css">
<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<img src="img/push-space.png" id="title-icon">
<img src="img/logo.png" class="step-logo">

<div id="icon-home" class="side-icon home icon"></div>
<div id="icon-filosofia" class="side-icon heart icon"></div>
<div id="icon-services" class="side-icon tag icon"></div>
<div id="icon-portfolio" class="side-icon trophy icon"></div>
<div id="icon-about" class="side-icon profie icon"></div>
<div id="icon-contact" class="side-icon conversation icon"></div>

<div id="impress">
         
    <!-- Welcome -->
    <div class="step" data-rotate-x="-90" data-scale="4" data-x="0" data-y="0" data-z="-1000" id="title">
        <div>
            <span class="welcome">bienvenidos a</span>
            <span class="name">Arteria Comunicaciones</span>
        </div>
    </div>

    <!-- Home -->
    <div class="step" data-rotate="0" data-rotate-x="-13" data-scale="1" data-x="-42" data-y="-169" id="home">
        <header id="home-header">
            <h1>Creatividad – Estrategia – Resultados</h1>
            <small>Hacemos más y lo hacemos mejor</small>
        </header>

        <div id="home-text">
            <strong>Arteria Comunicaciones es más que un concepto, deseamos darle soluciones innovadores y efectivas para hacer de su marca algo que el cliente desee.</strong>

            <p>Nos movilizamos en tres ejes para brindarle una solución integral a la situación actual de su imagen, presencia o  ventas en su empresa.</p>

            <p>Un equipo de...

CSS

/* enable clicking on elements 'hiding' behind body in 3D */
body     { pointer-events: auto; line-height: 1; }
#impress { pointer-events: auto; }

/* Spacebar image */
#title-icon {position: absolute;bottom: -42px;right: 49%;width: 96px;}
.step-logo {position: absolute; width:222px; left: 42px;bottom: 42px;}

/* COMMON STEP STYLES */

body {
min-height: 740px;
background: #eee;

-webkit-font-smoothing: antialiased;
background-size: cover;
background-repeat: no-repeat;
transition: background 1s;
}

.impress-on-title {
background: #a90329;
background: -moz-radial-gradient(center, ellipse cover,  #a90329 0%, #8f0222 44%, #6d0019 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
background: -webkit-radial-gradient(center, ellipse cover,  #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -o-radial-gradient(center, ellipse cover,  #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -ms-radial-gradient(center, ellipse cover,  #a90329 0%,#8f0222 44%,#6d0019 100%);
background: radial-gradient(ellipse at center,  #a90329 0%,#8f0222 44%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
}
.impress-on-title .step-logo {display: none;}

.impress-on-home {
background: #4096ee;
background: -moz-radial-gradient(center, ellipse cover,  #4096ee 0%, #3c42e8 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4096ee), color-stop(100%,#3c42e8));
background: -webkit-radial-gradient(center, ellipse cover,  #4096ee 0%,#3c42e8 100%);
background: -o-radial-gradient(center, ellipse cover,  #4096ee 0%,#3c42e8 100%);
background: -ms-radial-gradient(center, ellipse cover,  #4096ee 0%,#3c42e8 100%);
background: radial-gradient(ellipse at center,  #4096ee 0%,#3c42e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee',...

JavaScript

// Stuff to do as soon as the DOM is ready;
    impress().init();