React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Artem

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <div class="timeline-wrapper">

    <div class="timeline-item timeline-item--large">
      <div class="animated-background facebook">
        <div class="background-masker header-top"></div>
        <div class="background-masker header-left"></div>
        <div class="background-masker header-right"></div>
        <div class="background-masker header-bottom"></div>
        <div class="background-masker subheader-left"></div>
        <div class="background-masker subheader-right"></div>
        <div class="background-masker subheader-bottom"></div>
        <div class="background-masker content-top"></div>
        <div class="background-masker content-first-end"></div>
        <div class="background-masker content-second-line"></div>
        <div class="background-masker content-second-end"></div>
        <div class="background-masker content-third-line"></div>
        <div class="background-masker content-third-end"></div>
      </div>
    </div>

    <div class="timeline-item timeline-item--medium">
      <div class="animated-background facebook">
        <div class="background-masker header-top"></div>
        <div class="background-masker header-left"></div>
        <div class="background-masker header-right"></div>
        <div class="background-masker header-bottom"></div>
        <div class="background-masker subheader-left"></div>
        <div class="background-masker subheader-right"></div>
        <div class="background-masker subheader-bottom"></div>
        <div class="background-masker content-top"></div>
        <div class="background-masker content-first-end"></div>
        <div...

CSS

@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}

html {
  box-sizing: border-box;
}

html *,
html *::before,
html *::after {
  box-sizing: inherit;
}

#container {
  background-color: #e9eaed;
  color: #141823;
  padding: 20px;
  border: 1px solid #ccc;
}

.timeline-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 600px;
}

.timeline-item {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 3px;
  padding: 12px;
  width: 472px;
  height: 200px;
  margin-bottom: 20px;
  overflow: hidden;
}

.timeline-item--large {
  flex-basis: 600px;
}

.timeline-item--medium {
  flex-basis: 186px;
  margin-right: 20px;
}

.timeline-item--medium h1 {
  font-size: 1.2em;
}

.timeline-item--medium:last-child {
  margin-right: 0;
}

.animated-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: #eeeeee;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative;
}

.background-masker {
  background: #fff;
  position: absolute;
  box-sizing: border-box;
}

.outlined .background-masker {
  border: 1px solid #ddd;
}

.outlined:hover .background-masker {
  border: none;
}

.outlined:hover .background-masker:hover {
  border: 1px solid #ccc;
  z-index: 1;
}

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
  top: 0;
  left: 40px;
  right: 0;
  height:...

JavaScript 1.7

// Server side
const articles = [
	{
  	title: 'Lorem ipsum dolor',
    content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita vel quam quaerat incidunt, molestias voluptatum quas quia dolore, voluptas placeat cum explicabo voluptate non neque molestiae autem magnam libero. Dolore, nam itaque mollitia unde! Temporibus dolore in tempore laudantium similique quasi voluptatum suscipit amet minus tenetur odio commodi eligendi.'
  },
  {
  	title: 'Ipsam libero dolore',
    content: 'Recusandae quam accusantium voluptatem modi, numquam neque et libero atque eius quisquam? Porro deleniti consequuntur.'
  },
  {
  	title: 'Reiciendis laborum minus sed at',
    content: 'Rem esse natus quas ipsa tenetur dolores fugiat dolore numquam deleniti dolorum dicta maxime possimus saepe atque, repellat.'
  },
  {
  	title: 'Dolore, nam itaque mollitia unde',
    content: 'Temporibus dolore in tempore laudantium similique quasi voluptatum suscipit amet minus tenetur odio commodi eligendi.'
  }
];

var App = React.createClass({
  render: function() {
    return (
    	<div className="timeline-wrapper">
      	{
        	articles.map((article, idx) => {
          	const size = idx === 0 ? 'timeline-item--large' : 'timeline-item--medium';
          	return (
            	<div key={article.title} className={`timeline-item ${size}`}>
              	<h1>{article.title}</h1>
                <p>{article.content}</p>
              </div>
            );
          })
        }
      </div>
    );
  }
});

setTimeout(() => {
	ReactDOM.render( <App /> ,
  	document.getElementById('container')
	);
}, 3000);