JSFiddle - React, Tailwind, and code Playground

by alanzam2223

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.min.js"></script>
<div ng-app="myApp" ng-controller="c" class="content">

<div id="showBox" class="dialog" ng-show="showDescriptionBox">

    <div id="boxContentContainer" class="leftContainer">
    
        <div class="dialog-header" ng-click="showDescriptionBox = !showDescriptionBox">
            x
        </div>
        
        <div class="dialog-content containerType1 clearfix" >
            
            <div id="coverSection" class="boxSectionContent upAndOut" ng-show="currentBoxSection == 'cover'">
                    
                    <div id="coverWrapper" class="leftContainer">
                        
                        <img id="boxCoverImage" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
                        
                    </div>
                
                    <div id="boxCoverInformation" class="leftContainer textContainer upAndOut" ng-hide="showDescription">
                        
                        <div  class="coverTextContainer">
                            <span class="boxCoverTitle">Placeholder</span>
                        </div>
                        
                        <div  class="coverTextContainer">
                            <span class="boxCoverCategory">Games</span>
                        </div>
                        
                        <div  id="buttonContainer" class="coverTextContainer">
                            <button id="boxOpenButton" class="greenButton standardButton">Open</button>
                        </div>
                        
                    </div>
                
                    <div id="boxDescriptionSection" class="rightContainer upAndOut" ng-show="showDescription">

                        <div id="boxDescription" >
                            <span class="lightText"> </span>
                        </div>

                  ...

CSS

@font-face
{
  font-family:ubuntu;
  src:url(https://demo-project-hutson.c9users.io/fonts/ubuntu.ttf);
  
}

*{
  font-family:ubuntu;
  
}








.dialog {
  box-shadow: 0 0 2px rgb(210,210,210);
  border-radius: 5px;
}

#showBox {

    
  -webkit-transition: all .2s cubic-bezier(0.390, 0.575, 0.565, 1.000); 
   -moz-transition: all .2s cubic-bezier(0.390, 0.575, 0.565, 1.000); 
     -o-transition: all .2s cubic-bezier(0.390, 0.575, 0.565, 1.000); 
        transition: all .2s cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */    
    
  max-width: 490px;
  background: white;
  height: auto;
  position: fixed;
  top:120px;
    left:0;
    right:0;
    margin: 0 auto;
    overflow: hidden;
}

.dialog-header {
  background-color: #FF5C5C;
  text-align: center;
  color: white;
  padding: 2px;
  max-height: 15px;    
}

#showBox.ng-hide-add {
   
    opacity: 0;
    top:0;
}


.dialog-content {
  padding: 16px;
overflow: hidden;
    box-sizing: border-box;
    max-height: 100%;
}


#showBox.ng-hide-remove {
     -webkit-transition: all .2s cubic-bezier(0.390, 0.575, 0.565, 1.000); 
   -moz-transition: all .2s cubic-bezier(0.390, 0.575, 0.565, 1.000); 
     -o-transition: all .2s cubic-bezier(0.390, 0.575, 0.565, 1.000); 
        transition: all .2s cubic-bezier(0.390, 0.575, 0.565, 1.000); /* easeOutSine */
  animation:0.2s show;
}

@keyframes show {
  0% {
    opacity:0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.02);
  }
  100% { 
    opacity:1;
    transform: scale(1);
  }
}

@-webkit-keyframes show {
  0% {
    opacity:0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.02);
  }
  100% { 
    opacity:1;
    transform: scale(1);
  }
}

#boxContentContainer
{
    background:white;
    border-radius:5px;
    width:100%;
    height:100%;
    box-sizing:border-box;
}



.leftContainer
{
    float:left;
}

.rightContainer
{
    float:right;
}

.containerType1
{
    width:100%;
    box-sizing:border-box;
}

.containerType2
{
   ...

JavaScript

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

mod.controller('c',function($scope){

	$scope.currentBoxSection = 'cover';

    $scope.descriptionObject= {
        snapshots : ['http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSn9UO2FZSlsNom4cFs5lsbZljZxM_S0PBd5Py4qV34pNmbYwYkBLdjgA'],
        tags : ['alan','zetta','octane','propane']
    }

});