JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-animate.js"></script>
<div class="content" ng-app="myApp" ng-controller="c">
    <div class="rootFolder">
        <div class="folderContents">
                <div class="folderHeader">
                    <span>Root</span>
                </div>
                <div class="folders">
                </div>
                <div class="folderFooter">
                    <button class="addButton" ng-click="addFolder()">+</button>
                </div>
        </div>
    </div>
    
    <div class="folderRow">
            <div class="folderContainer">
                                <div class="folderDivision">
                                    <div class="childFolder">
                                        <div class="folderContents">
                                <div class="folderHeader">
                                    <span>child</span>
                                </div>
                                <div class="folders">
                                </div>
                                <div class="folderFooter">
                                    <button class="addButton" ng-click="addFolder()">+</button>
                                </div>
                        </div>
                    </div>
                </div>
                
                <div class="folderDivision">
                    <div class="childFolder">
                                        <div class="folderContents">
                                <div class="folderHeader">
                                    <span>child</span>
                                </div>
                                <div class="folders">
                                </div>
                                <div class="folderFooter">
                                    <button class="addButton"...

CSS

.content
{
width:100%;
height:100%;
}

.rootFolder
{
    width:130px;
    height:130px;
    box-shadow:0 4px 6px rgb(230,230,230);
    border-radius:5px;
    border:2px solid rgb(240,240,240);
    margin-right:auto;
    margin-left:auto;
    
}
.folderContents
{
    width:96%;
    height:100%;
    margin-right:auto;
    margin-left:auto;
}
.folderHeader
{
    width:100%;
    height:25px;
    text-align:center;
}
.folders
{
    width:100%;
    height:calc(100% - 50px);
    
}
.folderFooter
{
    width:100%;
    height:25px;
 
}
.addButton
{
    width:20px;
    height:25px;
    float:right;
    color:white;
    background:rgb(126,236,75);
    outline:none;
    border:0;
    cursor:pointer;
}

.folderRow
{
    width:100%;
    height:280px;
     background:cornflowerblue;
}
.folderContainer
{
    width:500px;
    height:100%;
    background:yellow;
}
.folderDivision
{
    width:100%;
    height:50%;
    background:red;
    text-align:center;
}

.childFolder
{
    width:130px;
    height:130px;
    box-shadow:0 4px 6px rgb(230,230,230);
    border-radius:5px;
    border:2px solid rgb(240,240,240);
    display:inline-block;
    background:white;
}

JavaScript

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

mod.controller('c',function()
               {
               
                   $scope.addFolder = function()
                   {
                       
                   };
               
               });