JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<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 : 'this is a great app for whenever you need to fight some zombies and yea it works like a charm', upVotes:'350,000,000 ',downVotes : '500', author:'bolin'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350 ',downVotes : '5', author:'coco'},{content : 'couldnt agree more ya lazy cnt', upVotes:'350...