React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by _abl

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment-with-locales.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://fonts.googleapis.com/css?family=Lato"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

@import url('//fonts.googleapis.com/css?family=Lato');
body {
  background-color: rgba(207, 231, 230, 0.4);
  /*background-color: #cfe7e6;*/
}

body * {
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
}

.centerer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  font-size: 20px;
  color: #222;
  display: inline-block;
  width: 292px;
  height: 180px;
  border: 1px solid #eee;
  background-color: white;
  border-radius: 6px;
  -webkit-box-shadow: 0px 4px 0px 0px rgba(207, 231, 230, 1);
  -moz-box-shadow: 0px 4px 0px 0px rgba(207, 231, 230, 1);
  box-shadow: 0px 4px 0px 0px rgba(207, 231, 230, 1);
}

.card-top {
  height: 65%;
}

.card-top > * {
  vertical-align: top;
}

.card-bottom {
  height: 35%;
  border-top: 1px solid #eee;
}

.card-dates,
.card-name-and-logo {
  height: 100%;
  width: 50%;
}

.card-dates {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
}

.card-name-and-logo {
  display: inline-block;
  padding-left: 14px;
}

.card-logo {
  display: block;
  height: 50px;
  width: 50px;
  border: 3px solid #0c5eb1;
  border-radius: 50%;
  background-color: #dfebf6;
}

.card-logo-container {
  display: flex;
  align-items: center;
  height: 78px;
}

.card-name {
  color: #0c5eb1;
  font-weight: bold;
  font-size: 17px;
}

.date {
  font-size: 10.5px;
  display: inline-flex;
  color: #445;
}

.date-icon img {
  height: 16px;
  width: 16px;
  margin-right: 5px;
  z-index: 10;
}

.date-icon img,
.date {
  vertical-align: middle;
}

.date-at {
  color: #aaa;
}

.card-dates::after {
  position: absolute;
  height: 40%;
  top: 30%;
  left: 6px;
  border: 1px dashed #ddd;
  content: " ";
}

.card-dates-line {
  position: absolute;
  border: 1px solid transparent;
  height: 50%;
  z-index: 2;
}

.power {
  width: 33.33%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content:...

Babel + JSX

class Hello extends React.Component {
  render() {
    return (
    <Centerer>
    <Card/>
    </Centerer>
    );
  }
}

const Centerer = function(props) {
  return <div className="centerer">
    {props.children}
  </div>
}

const images = {
  square: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABPSURBVEhLYxgFpAIBIHahEIPMwAlsgPg/hRhkBk4As6AAiLG5Dh8G6SHaAryKcACi9I5aMGoBXjBqAUEwwiygeWFHCcZrAc0rnFGABhgYAMF7WcVq5xvwAAAAAElFTkSuQmCC",
  triangle: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADZSURBVEhL7ZPBCQIxFEQDHrUD7UGwEG1EsA9PViLbhoetYUErEI8KOk/yYV2Im03iQdiBB3H+JKjMd6P+ThvPTzQTFw/n4jqIp4dzUa3EowNeEU1ELeyb2y/BY5atneDBs+C/B854zLK0EDfBY2sML854zMgkqxI8dHx/+hQeMzJJou88cBVzjI7wmJEZvBvWeS5vMQJiRmbwblhTTuJbU5iRIRu9G9b5u1hi9IgM2ajdaHd+jxEpstzp3Q3rfCOmGJEiyx3uBnej3fkcgrthnS9B8m6MKi3nXuz3XmO1LQRnAAAAAElFTkSuQmCC"
}

const Card = function() {
  return (
      <div className="card">
        <div className="card-top">
          <div className="card-name-and-logo">
            <div className="card-logo-container">
              <div className="card-logo"></div>
            </div>
            <div className="card-name">GJA20851</div>
          </div>
          <div className="card-dates">
            <div>
              <span className="date-icon">
                <img src={images.triangle} style={{transform: "rotate(90deg)"}}/>
              </span>
              <DateTime date="2017-12-06 15:30"/>
            </div>
            <div>
              <span className="date-icon">
                <img src={images.square}/>
              </span>
              <DateTime date="2017-12-07 4:15"/>
            </div>
            <div class="card-dates-line"></div>
          </div>
        </div>
        <div className="card-bottom">
          <Power label="Target Power" value="142"/>
          <Power...