JSFiddle - React, Tailwind, and code Playground

Analytics Dashboard Graphs

by Jennifer Perrin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
  <div class="side">
    <h1>Analytics Dashboard</h1>
    <ul class="links">
      <li><a href="#" class="selected" data-metric="visits">Visits</a></li>
      <li><a href="#" data-metric="pageviews">Pageviews</a></li>
      <li><a href="#" data-metric="conversions">Conversions</a></li>
    </ul>
    <div class="stats">
      <ul data-metric="visits">
        <li>
          <div class="key">Total Visits</div>
          <div class="val">356</div>
        </li>
        <li>
          <div class="key">Average</div>
          <div class="val">50.9</div>
        </li>
        <li>
          <div class="key">Change</div>
          <div class="val">+122.2%</div>
        </li>
      </ul>
      <ul data-metric="pageviews">
        <li>
          <div class="key">Total Pageviews</div>
          <div class="val">468</div>
        </li>
        <li>
          <div class="key">Average</div>
          <div class="val">66.9</div>
        </li>
        <li>
          <div class="key">Change</div>
          <div class="val">+16.7%</div>
        </li>
      </ul>
      <ul data-metric="conversions">
        <li>
          <div class="key">Total Conversions</div>
          <div class="val">456</div>
        </li>
        <li>
          <div class="key">Average</div>
          <div class="val">65.1</div>
        </li>
        <li>
          <div class="key">Change</div>
          <div class="val">-47.4%</div>
        </li>
      </ul>
    </div>
    <ul>
      <li>
        <div class="key">Range</div>
        <div class="val">7 days</div>
      </li>
      <li>
        <div class="key">Timezone</div>
        <div class="val">PDT</div>
      </li>
      <li>
        <div class="key">Spirit Animal</div>
        <div class="val">Duck</div>
      </li>
    </ul>
  </div>
  <div class="main">
    <ul>
      <li class="active">
        <article tabindex="0"...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #fff;
  background-color: #232e35;
  font: 1em/1 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
}

.container {
  position: absolute;
  left: calc(50% - 501px);
  width: 1002px;
  margin: 20px 0;
  padding: 30px;
  border: 1px dashed #646c71;
}

.side {
	float: left;
	width: 219px;
  padding-right: 30px;
}

.side h1 {
	margin: 0;
	color: #fff;
	font-size: 1.1em;
	letter-spacing: 1px;
  line-height: 1.3;
	text-transform: uppercase;
}

.side ul {
	margin: 48px 0;
	padding: 0;
	list-style: none;
	font-size: .9em;
	text-transform: uppercase;
}

.side li {
	margin: 16px 0;
}

.side li::after {
	content: '';
	display: block;
	clear: both;
}

.side a {
	display: block;
	padding: 10px;
	color: #1c8ed6;
}

.side a:focus {
	outline: 1px solid #fff;
}

.side .selected {
	background-color: #384248;
}

.side .selected::after {
	content: '\f105';
	float: right;
	color: #7a8185;
	font-family: 'FontAwesome';
}

.side .key {
	float: left;
	color: #7a8185;
}

.side .key::after {
	content: ':';
}

.side .val {
	float: right;
}

.side .links li {
	margin: 4px -10px;
}

.side .stats ul:not(:first-child) {
	display: none;
}

.main {
	float: left;
	width: 721px;
  padding-left: 30px;
	border-left: 1px dashed #646c71;
}

.main ul {
	width: 690px;
	height: 112px;
	margin: 486px 0 0;
	padding: 0;
	list-style: none;
}

.main li {
	float: left;
	position: relative;
	z-index: 1;
	width: 230px;
	height: 100%;
	transition: z-index;
	transition-delay: .8s;
}

.main li::before {
	content: '\f106';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #384248;
	font: 6em/1 'FontAwesome';
	transform: translate(-50%, -50%);
}

.main article {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 688px;
	height: 448px;
	outline: 4px solid #646c71;
	background-color: #384248;
	cursor: pointer;
	transform: translate(-50%,...

JavaScript

function selectMetric(e) {
  e.preventDefault();
  var metric = $(e.currentTarget).attr('data-metric');
  var metricSelector = '[data-metric="' + metric + '"]';

  // set selected link
  $('.side .selected').removeClass('selected');
  $('.side .links a' + metricSelector).addClass('selected');

  // show proper stats
  $('.side .stats ul').hide();
  $('.side .stats ul' + metricSelector).show();

  // activate proper graph
  var $wrapper = $('.main article' + metricSelector).parent();
  var isActive = $wrapper.hasClass('active');
  if (!isActive) {
    $wrapper
      .addClass('active')
      .siblings().removeClass('active');
  }
}

function checkKey(e) {
  if (e.keyCode === 13) {
    // hit enter
    selectMetric(e);
  }
}

$('.side .links a').on('click', selectMetric);
$('.main article').on({
  'click': selectMetric,
  'keyup': checkKey
});