JSFiddle - React, Tailwind, and code Playground

Config Windows

by chrischilcoat

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<script src="//d3js.org/d3.v3.min.js"></script>
Bar Chart
<header class="nav-down">
  <i class="fa fa-home fa-3x"></i>
</header>
<main>
  <div class="container">
    <div class="row" >
      <div class="col-xs-6">

        <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block;">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Setup your Bar Chart</h4>
              </div>
              <div class="modal-body clearfix">
              
              <div class="row" style="margin:-20px -35px 30px;">
                <div class="col-xs-12">
                  <div class="chart horizontal">
  <div style="height: 40%;"></div>
  <div style="height: 80%;"></div>
  <div style="height: 70%;"></div>
  <div style="height: 60%;"></div>
  <div style="height: 90%;"></div>
  <div style="height: 100%;"></div>
  <div style="height: 80%;"></div>
  <div style="height: 60%;"></div>
  <div style="height: 40%;"></div>
  <div style="height: 20%;"></div>
</div>
                </div>
              </div>

                <div class="row">
                  <div class="col-xs-5">
               
                   

                    
             
                    <br /> <br />

                    <div class="row">
                      <h5...

CSS

body {
  padding-top: 50px;
  padding-bottom: 60px;
}
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 10px;
  margin: 5px;
  width:6.5%;
  color: white;
  display: inline-block;
}
.chart {
  border-left:1px solid lightgray;
  border-bottom:1px solid lightgray;
  padding-left:3px;
  padding-bottom:3px;
  height:200px;
  background:#efefef;
}
 .chart rect {
   fill: steelblue;
}
.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}                 
svg {
  height: 200px; // the contents will scale to fit because of viewBox
}
header {
  background: #000;
  height: 50px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  padding: 5px;
  color: #fff;
  z-index: 200;
}

.pie {
  position: relative;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
  color: transparent;
  text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(.5turn);
  }
}

@keyframes bg {
  50% {
    background: #655;
  }
}

.pie::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

footer {
  background: #000;
  height: 50px;
  position: fixed;
  bottom: 0;
  transition: bottom 0.2s ease-in-out;
  width: 100%;
}

.nav-up {
  top: -50px;
}

.footer-hide {
  bottom: -200px;
}

.footer-show {
  bottom: 0;
}

main {
  color: #666
}

footer {
  background: #ddd;
  position: fixed;
  bottom: 0;
}

.navbar-inverse .navbar-brand {
  color: #FFF;
}

.navbar-inverse .navbar-text {
  color: #fff;
}

.navbar-right {
  margin-left: 10px;
}

.chart div {
  position:relative;
}
.chart.horizontal div span {
 ...