JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <link href="http://127.0.0.1:3000/assets/application.css?body=1" media="all" rel="stylesheet" />
    </head>
    
    <body>
        <div class="wrapper">
            <div class="l-timeline">
                <section class="posts">
                    <article ng-repeat="image in images" class="post">
                        <div class="post-wrapper">
                            <figure class="post-content">
                                <div class="post-image-options">
                                    <ul class="btn-group fade">
                                        <li><a href="#" class="btn btn-s">Download</a>

                                        </li>
                                        <li><a href="#" class="btn btn-s">Edit</a>

                                        </li>
                                    </ul>
                                </div>
                                <div class="zoom-in">	<i class="icon icon-zoom"></i>

                                </div>
                                <img class="image l-block" src="https://lorempixel.com/700/700" />
                                <figcaption class="post-header">
                                    	<h4><!-- id:{{image.id}} --> On the Carousel</h4>

                                </figcaption>
                            </figure>
                            <footer class="post-footer">
                                <div class="footer-content-left footer-content">	<i class="icon icon-comments"></i>
2 comments</div>
                                <div class="hide">image is backed up: {{image.backup}}</div>
                                <ul class="footer-content-right footer-content horizontal-list">
                                    <li>
                                        <time datetime="{{formatSince(image.created_at)}}{{serverTime}}">less than a minute ago</time>
                                    </li>
     ...

CSS

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

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 */

/* line 17, /Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
/* line 22, /Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 html {
    line-height: 1;
}
/* line 24, /Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
    list-style: none;
}
/* line 26, /Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
 table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* line 28,...