JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/css/perfect-scrollbar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/js/min/perfect-scrollbar.min.js"></script>
<div class="commentSection" ng-app="myApp" ng-controller="c">
    
    <div class="commentBox">
        <div class="commentHeader">
        </div>
        
        <div class="comments">
            <div class="comment" ng-repeat="comment in comments" ng-class="{lightComment : $index % 2 == 0 ,darkComment : $index % 2 == 1}">
                <span>{{comment.content}}</span>
            </div>
        </div>
        
        <div class="commentFooter">
        </div>
        
        
    </div>
    
    
</div>

CSS

.commentSection
{
    width:96%;
    height:350px;
    margin-right:auto;
    margin-left:auto;
    padding-top:25px;
    box-sizing:border-box;
}

.commentBox
{
    width:80%;
    height:300px;
    border-radius:8px;
    box-shadow:0 0 6px rgb(240,240,240);
    margin-right:auto;
    margin-left:auto;
}

.commentHeader
{
    width:100%;
    box-sizing:border-box;
    height:40px;
    background:rgb(243,255,226);
}

.comments
{
    width:100%;
    height:calc(100% - 80px);
    position:relative;
    overflow:hidden;
    
}

.commentFooter
{
    width:100%;
    height:40px;
    box-sizing:border-box;
    background:#ddd;
}

.comment
{
    width:100%;
    max-height:80px;
}
.lightComment
{
    background:rgb(240,240,240);
}
.darkComment
{
     background:rgb(230,230,250);
    
}

JavaScript

var mod = angular.module('myApp', []);

mod.controller('c',function($scope){
    
    $scope.comments = [{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'},{content : 'hello there mate'}];
    
    initScrollbars();

});


function initScrollbars()
{
    Ps.initialize(document.getElementsByClassName('comments')[0]);
}