JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
<div ng-app="hutStuff" ng-controller="c">
    
<show-box open-handle="navigateToHomepage()" description-object="currentObject" control-object="showBox">
        
</show-box>
    
    <button ng-click="showBox != showBox" >show</button>
    
    </div>

CSS

.infoBox
{
    -webkit-transition : .3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
   transition : .3s cubic-bezier(0.215, 0.610, 0.355, 1.000);

    bottom:100px;
    
    width:600px;
    height:450px;
    background-color:white;
    border:1px solid rgb(220,220,220);
    position:fixed;
    right:0;
    left:0;
    margin-left:auto;
    margin-right: auto;
    border-radius: 5px;
}

.infoBox.ng-hide
{
     -webkit-transition : .3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition : .3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    opacity:0;
    bottom:200px;

  

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

.exitButton
{
    width:20px;
    height:20px;
    border:1px solid rgb(220,220,220);
    background-color:rgb(225,62,33);
    position:absolute;
    top:-10px;
    right:-10px;
    color:white;
    font-size:1em;
    outline:none;
    text-align: center;
    cursor:pointer;
    z-index: 1;
}


.infoBoxContent
{
    width:100%;
    height:100%;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border-radius: 8px;
    padding-top: 5px;
}

.infoBoxHeader
{
    width:100%;
    height:50%;
    box-sizing: border-box;
}

.infoBoxImageSection
{
    width:40%;
    height:100%;
    display: inline-block;
    float:left;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.infoBoxImageContainer
{
    width:167px;
    height:180px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    border:8px solid #ddd;
}

.headerInformation
{
    width:50%;
    height:95%;
    display: inline-block;
  
}

.textContainer
{
    width:100%;
    height:150px;
   
}

.infoBoxText
{
    color:rgb(134,126,126);
    font-size:1.8em;
    text-align: center;
}


.playButtonContainer
{
    width:100%;
    height: 30px;
    text-align: center;
}

.playButton
{
    width:100px;
    height:28px;
    background:rgb(156,256,86);
   ...

JavaScript

var box = angular.module('hutInfoBox', ['ngAnimate']).directive('showBox',hutShowBox);


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


mod.controller('c',function($scope){
    
    $scope.showBox = true;
    
    $scope.navigateToHomepage = function(str)
    {
    	alert(str);
    }
    
});




function hutShowBox()
{
	var obj = {
    	restrict : "E",
        scope : {
        	descriptionObject  : '=',
            openHandle : '&',
            controlObject : '='
        },
        template : '<div class="infoBox" ng-show="showInfoBox">'+
          
             '<button class="exitButton" ng-click="showInfoBox ='+ 'false">X</button>'+
         
                '<div class="infoBoxContent">'+
                    
                    
                    '<div class="infoBoxHeader">'+
                        '<div class="infoBoxImageSection">'+
                            '<div class="infoBoxImageContainer">'+
                                '<img ng-src="https://demo-project-alanz2223.c9.io/app/{{descriptionObject.coverPhotoPath}}"'+ 'class="infoBoxImage"></img>'
                            +'</div>'
                        
                        +'</div>'
                        
                        +'<div class="headerInformation">'+
                            
                            '<div class="textContainer">'+
                                '<p class="infoBoxText">'+'{{descriptionObject.title}}</p>'+
                                
        '<p class="infoBoxText">{{descriptionObject.developer}}</p>'
                           +'</div>'+
                            
                            '<div class="playButtonContainer">'+
                                '<a ng-href="https://demo-project-alanz2223.c9.io/app/{{descriptionObject.mainFilePath}}"><button class="playButton" >Start</button></a>'+
                                '<div class="ratingStars"></div>'+
                                
                         ...