JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

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

CSS

/*###########     Purchased app      ##############*/
.purchasedAppDisplay
{
    
     -webkit-transition: .2s cubic-bezier(0.250, 0.250, 0.000, 1.095); 
   transition: .2s cubic-bezier(0.250, 0.250, 0.000, 1.095);
    
    width:350px;
    height:400px;
    box-sizing: border-box;
    background-image: url(https://demo-project-alanz2223.c9.io/images/noisyBg.png);
    background-size: cover;
    background-repeat: no-repeat;
    border:1px solid rgb(240,240,240);
    border-radius: 5px;
    padding:5px;
    position: fixed;
    top:100px;
    left:0;
    right:0;
    margin:0 auto;
    z-index: 1;
}


.purchasedAppDisplay.ng-hide
{
    opacity: 0;
    top:0;
}

.appDisplayExitButton
{
    background:transparent;
    width:20px;
    height:20px;
    position: absolute;
    top:-10px;
    right:-10px;
    box-sizing: border-box;
    cursor: pointer;
}

.appDisplayHeader
{
    width:100%;
    height:200px;
    box-sizing: border-box;
    padding-top:30px;
    padding-left: 10px;
}

.appDisplayCoverContainer
{
    width:130px;
    height:140px;
    display:inline-block;
    text-align: center;
    box-sizing: border-box;
    border:5px solid rgb(240,240,240);
    border-radius: 5px;
}

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

.appDisplayDetails
{
    display: inline-block;
    width:calc(100% - 150px);
    height:200px;
    float:right;
    box-sizing: border-box;
    text-align: center;
}

.appDisplayTitleContainer
{
    text-align: center;
    width:100%;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
}

.appDisplayInfoText
{
  font-size: 1.4em;
    color:#616161;
}

.appDisplayAuthorContainer
{
    text-align: center;
    width:100%;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
}

.appDisplayHomepageButton
{
    text-align: center;
    width:100%;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    height:...

JavaScript

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

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


    
});



var display = angular.module('hutPurchased',['ngAnimate']);

display.directive('purchasedAppDisplay',function(){

    var obj = {
    	restrict : 'E',
        template :'<div class="purchasedAppDisplay" ng-show="displayPurchasedInformation">'+
	
	'<img class="appDisplayExitButton" ng-click="displayPurchasedInformation = false" src="https://demo-project-alanz2223.c9.io/images/exitButton.png"></img>'+

    
    '<div class="appDisplayHeader">'+
        
        '<div class="appDisplayCoverContainer">'+
            
            '<img class="appDisplayCover" ng-src="https://demo-project-alanz2223.c9.io/app/{{displayedPurchasedApp.coverPhotoPath}}"></img>'+
            
        '</div>'+
        
        '<div class="appDisplayDetails">'+
            
            '<div class="appDisplayTitleContainer">'+
                
                '<span class="appDisplayInfoText">{{displayedPurchasedApp.title}}</span>'+
                
            '</div>'+
            
            '<div class="appDisplayAuthorContainer">'+
                
                '<span class="appDisplayInfoText">{{displayedPurchasedApp.developer.name}}</span>'+
                
            '</div>'+
            
            '<div class="appDisplayHomepageButton">'+
                
                '<button class="visitHomepageButton" ng-click="visitHomePage(displayedPurchasedApp.title)">'+
                    'Homepage'+
                '</button>'+
                
            '</div>'+
            
        '</div>'+
        
    '</div>'+
    
    '<div class="appDisplayBody">'+
        
        '<div class="appDisplayPurchasedVersions">'+
            
            '<div class="appPurchasedVersionsContainer">'+
                
                '<div class="purchasedVersionsHeader">'+
                    
                            '<div class="purchasedVersionHeading"  style="float:left">'+

  ...