JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div ng-app="uploader" ng-controller="folderCreate">
        <div class="folderContainer">
            <div class="folderEntry" ng-repeat="folder in folders">
                <div class="folderTitleContainer">
                    <p class="folderText">{{folder.title}}</p>
                </div>
                <div class="filesListContainer">
                      <ul class="folderNamesList">
                        <li ng-repeat="entry in folder.docs">                {{entry.name}}</li>
                        
                         <div ng-show="addNewItem" class="newItemMenu">
                                <div class="optionsContainer">
                                    <button class="addItemButton" ng-click="addDirectory($index)">Add Directory</button>
                               
                                    <button class="addItemButton" ng-click="addFile($index)">Add File</button>
                                    
                                 </div>
                             <div class="decorationsContainer">
                                 <div class="menuDecoration">
                                     
                                 </div>
                             </div>
                            </div>
                    </ul>
					        
                    
                    
                </div>
               
                <div class="addFileButtonContainer">
                    <button class="addFileButton" ng-click="addNewItem=!addNewItem">+</button>
                </div>
                
            </div>        
        
    </div>
    
</div>

CSS

.folderContainer
{
    width:500px;
    height:400px;
    border-radius:10px;
    border:1px solid rgb(230,230,230);
}

.folderEntry
{
    display:inline-block;
    width:30%;
    height:180px;
    box-shadow:-5px 5px 8px rgb(220,220,220);
    border:1px solid rgb(230,230,230);
    border-radius:5px;
    position:relative;
}
.folderTitleContainer
{
    width:100%;
    height:20%;
    vertical-align:top;
    text-align:center;
    margin:0;
}
.folderText
{
    margin-right:auto;
    margin-left:auto;
    font-size:1.2em;
    color:rgb(120,120,120);
    display:inline;
}
.filesListContainer
{
    width:100%;
    height:65%;
     margin:0;
    box-sizing:border-box;
    padding:0;
    vertical-align:top;
}
.folderNamesList
{
    width:100%;
    height:100%;
    display:inline-block; 
}
.addFileButtonContainer
{
    width:100%;
    height:10%;
    align-content:right;
    text-align:right;
    
}
.addFileButton
{
    background-color:rgb(102,153,0);
    border:1px solid rgb(230,230,230);
    outline:none;
    color:white;
    border-radius:3px;
    margin-right:10px;
}
.newItemMenu
{
    width:80%;
    height:40%;
    position:absolute;
    bottom:35px;
    right:0;
}

.optionsContainer
{
    width:100%;
    height:80%;
}
.addItemButton
{
    width:100%;
    height:50%;
    background-color:white;
    color:#555;
    outline:none;
    border-radius:calc(50% / 2);
    border:1px solid rgb(240,240,240);
    cursor:pointer;
    
}
.decorationsContainer
{
    width:100%;
    position:relative;
    height:20%;
}
.menuDecoration
{
    width:0;
    height:0;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
    border-top:10px solid rgb(240,240,240);
    float:right;
    
}

JavaScript

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

mod.controller('folderCreate', function($scope)
               {
                  
                   $scope.folders = [{docs:[{name:'item1.css'}],title:'css'},{docs:[{name:'main.html'}], title:'root'}];          
                   
                   $scope.addFile = function(index)
                   {
                       alert('add file to ' + index);
                       
                   };
                   $scope.addDirectory = function(index)
                   {
                       alert('add dir to ' + index);
                       
                   }
               
               });