JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<section id="charting">
    <div id="chart-wrapper">
        <div id="information-pane" class="chart-pane flip-wrapper">
            <div class="flipper">
                <div id="information-pane-front" class="front">
                    <div class="chart-pane-header-wrapper">
                        <div class="chart-pane-header">
                            <p>Wed June 3, 2014</p>
                        </div>
                    </div>
                    <div class="chart-pane-body-wrapper">
                        <div class="chart-pane-extended-body">
                            <p><span>Open:</span><span>0.00</span>

                            </p>
                            <p><span>High:</span><span>0.00</span>

                            </p>
                            <p><span>Low:</span><span>0.00</span>

                            </p>
                            <p><span>Close:</span><span>0.00</span>

                            </p>
                            <p><span>&Delta;:</span><span>0.00</span>

                            </p>
                        </div>
                    </div>
                    <div class="chart-pane-footer-wrapper">
                        <div class="information-button-wrapper">
                            <svg class="information-button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24.576px" height="24.577px" viewBox="0 0 24.576 24.577" enable-background="new 0 0 24.576 24.577" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
                                <g>
                                    <path d="M12.288,0C5.502,0,0,5.501,0,12.289c0,6.786,5.502,12.288,12.288,12.288s12.288-5.502,12.288-12.288 C24.576,5.501,19.074,0,12.288,0z M12.167,17.238c0.062,0.064,0.127,0.098,0.195,0.098c0.115,0,0.232-0.053,0.348-0.154...

CSS

.flip-wrapper {
    position: absolute;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
.flip-wrapper .flipper.flip {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
.flipper {
    position: relative;
    transition: 0.6s;
    -webkit-transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.front, .back {
    position: absolute;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
}
.back {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
#chart-wrapper {
    position: relative;
}
#information-pane {
    top: 10px;
    left: 10px;
}
.chart-pane {
    position: absolute;
    min-height: 100px;
    min-width: 50px;
}
.chart-pane * {
    padding: 0;
    margin: 0;
}

.chart-pane .chart-pane-header-wrapper, 
.chart-pane .chart-pane-body-wrapper, 
.chart-pane .chart-pane-footer-wrapper {
    width: 110px;
    position: relative;
}

.chart-pane .chart-pane-header-wrapper {
    border: 1px solid #0076A4;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.chart-pane .front .chart-pane-header-wrapper {
    background: #0076A4;
    color: #ffffff;
}

.chart-pane .back .chart-pane-header-wrapper {
    background: #ffffff;
    color: #0076A4;
}

.chart-pane .chart-pane-header-wrapper .chart-pane-header {
    padding: 2px 7px;
}

.chart-pane .chart-pane-header-wrapper .chart-pane-header > p {
    font-weight: bold;
    text-align: center;
    font-size: 10px;
}


.chart-pane .chart-pane-body-wrapper {
    border: 1px solid #0076A4;
    border-width: 0 1px;
}

.chart-pane .front .chart-pane-body-wrapper {
    background: #F5FBFE;
    color: #0076A4;
}

.chart-pane .back .chart-pane-body-wrapper {
    background: #ffffff;
    color: #0076A4;
}

.chart-pane .front .chart-pane-footer-wrapper {
    background: #F5FBFE;
    color: #0076A4;
}

.chart-pane .back...

JavaScript

$(function () {
    $('.information-button-wrapper').click(function () {
        $(this).closest('.flipper').toggleClass('flip');
    });
});