JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<article class="rw-thumbnail-wrap fourth" style="position: absolute; top: 0px; left: 0px; ">
            <figure>
                <a href="#viewing" class="rw-thumbnail">
                    <img src="http://placehold.it/221x293" alt="">
                </a>
            </figure>
            <aside class="rw-thumbnail-detail">
                <a href="#viewing" class="rw-item-title">Title for this item</a>
                <a href="#profile" class="rw-item-postedby">Mister Fabulous</a>
                <span class="rw-item-liked">liked by 99999</span>
                <a class="spch-bub-inside" href="#viewing"><em>0</em></a>
            </aside>
            <!-- comments -->
            <section class="comments comments-list">
                <ol class="unstyled">
                    <li>
                        <p><a href="#profile" class="profile url"><strong>username user</strong></a> Beautifil Omg so cool, uspeli vibrasit' tavar v ulitsu...</p>
                    </li>
                    
                    <li>
                        <p><a href="#profile" class="profile url"><strong>nickname yours</strong></a> What is this stuff? and how did it get here? I have no clue, tell someone else!</p>
                    </li>
                    
                    <li>
                        <p><a href="#profile" class="profile url"><strong>username</strong></a> Beautifil!</p>
                    </li>
                </ol>
                <div class="comments-more">view more</div>
            </section>
            <!-- / comments -->
        </article>

CSS

.rw-thumbnail-wrap { 
/*
display: inline-block;
*/
position: relative;
border: 1px solid 
#EEE;
vertical-align: top;
background: 
white;
float: left;
margin: 6px;
}
.rw-thumbnail-wrap.liked, #page-register-interest .liked  { position: relative; }
.rw-thumbnail-wrap.liked a { /*color: #B50360;*/ }
.rw-thumbnail-wrap figure { position: relative; margin: 0; padding: 0; }
.rw-thumbnail-detail { padding: 9px 0 0 9px; position: relative; }
.rw-thumbnail { display: block; }
.rw-thumbnail img { margin: 0; padding: 0; display: block; }
.rw-item-title {
display: block;
font-size: 123%;
line-height: normal;
}
.rw-item-liked {
color: #999;
font-size: smaller;
}



/* Runway Item sizes */
.rw-thumbnail-wrap.fourth {width:221px;}
.rw-thumbnail-wrap.third {width:690px;}
.rw-thumbnail-wrap.half {width:456px;}
.rw-thumbnail-wrap.single {width:926px;}
.rw-thumbnail-wrap.columns {width:299px;}
.rw-thumbnail-wrap.ff-second {width: 336px;}
.rw-thumbnail-wrap.ff-third {width: 336px;}


/* Comments */
.comments { padding: 11px; border-top: 1px dashed lavender; display: none; position: absolute; background: rgba(250, 250, 250, 0.96); z-index: 1; top: 0; bottom: 47px; left: 0; right: 0; overflow-y: auto; }
 .comments.show { display: block; }
.photo .comments { padding-bottom: 0; }
.comments .text { }

.comments .you:hover .delete-comment { display: inline-block; }
.comments .delete-comment { display: none; position: absolute; right: 3px; font-size: 9px; color: tomato; top: 3px; }
.comments li.you { position: relative; }
.comments-more {
text-align: center;
font-size: 11px;
background: #EEE;
line-height: 23px;
cursor: pointer;
}




/* Comments :listing */
.comments-list li { padding: 3px 0 0 0; display: block; overflow: hidden; position: relative; }
.comments-list li:first-child { padding-top: 0; }
.comments-list li p { font-size: 11px; line-height: 13px; }
.comments-list li.you p { margin-right: 42px; }

.double .comments-list {  }
.large .comments-list {  }
.large-side .comments-list {...