JSFiddle - React, Tailwind, and code Playground

by Ritwika Das

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.css">
<div class="GraphBackground">

<div class="flipcard h">
    <div class="front">
     <div id="chart1"></div>
    </div>
    <div class="back">
	  <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>
<div class="flipcard h">
    <div class="front">
     <div id="chart2"></div>
    </div>
    <div class="back">
	  <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>
<div class="flipcard h">
    <div class="front">
     <div id="chart3"></div>
    </div>
    <div class="back">
	  <p>lorem epsum asd dfse fsdfseesgdgr</p>
    </div>
</div>
<!--<div id="chart2"></div>
<div id="chart3"></div>-->

</div>
<div class="imageBackground">
<div id="patternAnalysis"><img src="https://raw.githubusercontent.com/vadymmarkov/Fakery/master/Images/logo.png"></div>
<div id="purchase"><img src="https://raw.githubusercontent.com/vadymmarkov/Fakery/master/Images/logo.png"></div>
<div id="tam">
<img src="https://raw.githubusercontent.com/vadymmarkov/Fakery/master/Images/logo.png"></div>
</div>

CSS

.GraphBackground{
height:auto;
width:100%;
background-color:#e1e5e8;
margin-top:2%;
padding:2% 0 2% 2%;
box-sizing: border-box;
display:flex;
}

.imageBackground{
height:auto;
width:100%;
background-color:#e1e5e8;
//margin-top:2%;
padding:0% 0 2% 2%;
box-sizing: border-box;
display:flex;
}

.imageBackground img{
width:200px;
height:200px;
margin:auto;
display:block;
padding-bottom:2%;
}

#chart1{
height:auto;
width:100%;
background-color:#f8f8ff;
display:block;
padding-bottom:2%;
}

#chart2{
height:auto;
width:31.33%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding-bottom:2%;
}

#chart3{
height:auto;
width:31.33%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding-bottom:2%;
}

#patternAnalysis{
height:auto;
width:31.33%;
background-color:#f8f8ff;
display:block;
padding:2% 0 0 0;
}



#purchase{
height:auto;
width:31.33%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding:2% 0 0 0;
}

#tam{
height:auto;
width:31.33%;
background-color:#f8f8ff;
display:block;
margin-left:2%;
padding:2% 0 0 0;
}

.flipcard {
  position: relative;
  width: 31.33%;
  height: auto;
  perspective: 500px;
  min-height:320px;
 
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateX(180deg);
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
}
.flipcard.v .back{
  transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
}
.flipcard.h .back{
  transform: rotateY(-180deg);
}
.flipcard .front
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  background-color: #f8f8ff;
  /*padding: 10px;*/
  backface-visibility: hidden;
}
.flipcard .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  background-color: #424242;
  /*padding: 10px;*/
 ...

JavaScript

var chart1 = c3.generate({
    bindto: '#chart1',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});


var chart2 = c3.generate({
bindto:'#chart2',
     data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});

var chart3 = c3.generate({
bindto:'#chart3',
     data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});