JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<footer class="releated-articles"><hr class="g-article-hr"><section class="section"><header><h1 data-bind="title:text">Related Articles</h1></header><section><ul data-bind="items:tpl(related-articles-item)"><li><a data-bind="url:href" target="_blank" href="http://artsbeat.blogs.nytimes.com/2015/10/26/pentatonix-billboard-chart-number-one/"><picture data-bind="!!image.url:data-has-src" data-has-src="true"><img data-bind="image.url:src,title:title" src="https://lh3.googleusercontent.com/lhoBJO20gEXu3Gy98TclZKH54-lCuXJgmtsKIkxTuPD6pzYOSb0CXxrbyhUHYm61iG-y-GyfNUeiwtKLRmU=w800-h450-pf" title="Pentatonix Earn a No. 1 Album Before Big November Releases Arrive"><figcaption data-bind="image.attribution:text">Benjamin Norman for The New York Times</figcaption></picture><h1 data-bind="title:text">Pentatonix Earn a No. 1 Album Before Big November Releases Arrive</h1><p data-bind="abstract:text">It’s only a matter of time until the sleepy Billboard charts get a jolt, with major November releases scheduled from Adele, Justin Bieber and One Direction. In the meantime, an a cappella group without much radio play can keep the No. 1 spot warm. Pentatonix, the vocal quintet known for its cover songs and Christmas carols, made its debut atop the album chart this week with its first collection of originals. The group’s self-titled album, released by RCA, sold 88,000 albums and its songs were played 7.8 million times on streaming services for a total of more than 98,000 album equivalent uni...</p><footer><img data-bind="publication.image.url:src,publication.title:title" src="https://lh3.googleusercontent.com/S4MVUmoUQKTTM4GtOVEaSDQW8DQPQ2UPzSGViJPqOGS3dOrdyOsb8k8PYKbITN3lETgSqlwABQhf2-oPgSnr=w50-h50-pf" title="The New York Times"><small data-bind="publication.title:text">The New York Times</small></footer></a></li><li><a data-bind="url:href" target="_blank" href="http://www.nytimes.com/2015/10/27/business/dealbook/in-trying-to-explain-itself-valeant-muddies-the-water.html"><picture...

CSS

/* line 41, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
html {
  box-sizing: border-box;
  font-family: 'Roboto';
  font-size: 10px;
  font-weight: 400;
}

/* line 48, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* line 54, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

/* line 64, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
body {
  background: transparent;
  margin: 0;
  overflow: scroll;
  overflow-x: hidden;
  padding: 0;
}

/* line 72, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
progress {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
}
/* line 82, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.33);
}
/* line 86, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
progress::-webkit-progress-value {
  background: #fc0;
}

/* line 91, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
.amp-image-lightbox-caption {
  color: #fff;
}

/* line 95, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
.amp-image-lightbox-caption > span {
  display: inline-block;
  margin-right: 5px;
}

/* line 100, ../../../../../../../../../java/com/google/apps/dots/webapp/client/articlerenderer/article-renderer.scss */
.amp-header,
.amp-footer {
  overflow: hidden;
}

/* line 106,...