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="content">
<div class="appContainer">
    
    <div class="appBodySection">
        
        
<div class="commentsSection" ng-app="myapp" ng-controller="c">
                
                    <div class="commentsBox">
                        
                            <div class="commentsHeader">
                                </div>
                        
                        
                             <div class="comments">
                                 
                                     <div class="comment" ng-repeat="comment in comments">
                                         <span>{{comment.content}}</span>
                                        </div>
                                 
                                </div>
                        
                            
                         <div class="commentsFooter">
                                </div>
                        
                        
                        </div>
                
                
                </div>
        </div>
     </div>
</div>

CSS

body
{
    
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
    
}

.appContainer{
width:100%;
    box-sizing: border-box;
    margin-top:10px;
    min-width:800px;
}

.appBodySection
{
    width:96%;
    margin-right:auto;
    margin-left: auto;
    padding-top: 10px;
    position: relative;
    margin-top: 5px;
    border-bottom: 1px solid rgb(240,240,240);
    box-shadow: 0 4px 6px rgb(240,240,240);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    padding-right:10px;
}
.content
{
        width:70%;
    min-height:100%;
    margin-left: auto;
    margin-right: auto;
	background:rgb(255,255,255);
     min-width:860px;
    
}

.commentsSection
{
    width:96%;
    margin-right: auto;
    margin-left: auto;
    height:300px;
    text-align: center;
    margin-top: 20px;
}

.commentsBox
{
    width:80%;
    height:280px;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
}

.commentsHeader
{
    width:100%;
    height:40px;
     background:blue;
}

.comments
{
    width:100%;
    height: calc(100% - 80px);
    overflow: hidden;
    position: relative;
     background:cyan;
    box-sizing: border-box;
}
.comment
{
    width:100%;
    max-height: 100px;
    background:orange;
    box-sizing:border-box;
}




.commentsFooter
{
    width:100%;
    height:40px;
    background:magenta;
}

JavaScript

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


mod.controller('c',function($scope,$timeout){
    
    $scope.comments = [{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '},{content:'hello there this is text that is not supposed to be longer than 255 chars '}];
    
    
      $scope.initComments = function()
   {
          console.log(document.getElementsByClassName('comments')[0]);
         initializeScrollbars();
          
   };
    
  $timeout(function () { // You might need this timeout to be sure its run after DOM render.
                   
                 
    $scope.initComments();
    
                       }, 500);


});
function...