JSFiddle - React, Tailwind, and code Playground

by alanzam2223

HTML

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

<div id="showBox">

    <div id="boxContentContainer" class="leftContainer">
    
        <div id="boxExitButton" class="containerType1">
            x
        </div>
        
        <div class="containerType2" >
            
            <div id="coverSection" class="boxSectionContent">
                    
                    <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="rightContainer textContainer">
                        
                        <div  class="coverTextContainer">
                            <span class="boxCoverTitle">Placeholder</span>
                        </div>
                        
                        <div  class="coverTextContainer">
                            <span class="boxCoverCategory">Games</span>
                        </div>
                        
                    </div>
                
            
            </div>
            
            
        </div>
    
    </div>
    
    <div id="boxButtonContainer" class="rightContainer">
        
        <div class="boxSectionDisplay" ng-class="{'highlightedSectionButton' : currentBoxSection == 'cover'}"
        ng-click="currentBoxSection = 'cover'"
        >
            <img class="boxSectionIcon" src="https://demo-project-hutson.c9users.io/coverIcon.png" />
            <span class="basicText ninePoints">cover</span>
        </div>
        
        <div class="boxSectionDisplay" ng-class="{'highlightedSectionButton' : currentBoxSection == 'description'}"
        ng-click="currentBoxSection = 'description'"
        >
   ...

CSS

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

*{
  font-family:ubuntu;
  
}


#showBox
{
    width:480px;
    height:220px;
    
}
#boxExitButton
{
  width:100%;
  height:20px;
  text-align:center;
  background:rgb(255,92,92);
  color:white;
  cursor:pointer;
}
#boxButtonContainer
{
  width:90px;
  padding-top:20px;
  margin-top:5px;

}
#boxContentContainer
{
    background:white;
    border-radius:5px;
    box-shadow:0 0 2px rgb(210,210,210);
    width:calc(100% - 90px);
    height:100%;
    border:1px solid rgb(218,218,218);
    box-sizing:border-box;
}



.leftContainer
{
    float:left;
}

.rightContainer
{
    float:right;
}

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

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

.boxSectionDisplay
{
    width:100%;
    height:60px;
    padding-top: 5px;
    box-sizing: border-box;
    text-align:center;
}

.basicText
{
    color:#616161;
}

.ninePoints
{
    font-size: .9em;
}

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

#coverWrapper
{
    width:160px;
    box-sizing: border-box;
    padding-top:20px;
    padding-left:10px;
}

#boxCoverImage
{
    width:150px;
    height:150px;
    border-radius: 50%;
}

.textContainer
{
    text-align: center;
    box-sizing: border-box;
}

#boxCoverInformation
{
    height: 100%;
    width:calc(100% - 170px);
    text-align:right;
    padding-top:30px;
}

.coverTextContainer
{
    width:100%;
    max-height: 50%;
    text-align:center;
    margin-top:10px;
}

.boxCoverTitle
{
    font-size: 1.8em;
    color:rgb(56,56,56);
}

.boxCoverCategory
{
    font-size: 1.2em;
    color:rgb(180,180,180);
}

.boxSectionDisplay
{
  width:100%;
  border:1px solid rgb(218,218,218);
  margin-bottom:5px;
  padding-top:10px;
  box-sizing:border-box;
  cursor:pointer;
  background:rgb(245,245,245);
}

.boxSectionIcon
{
  display:block;
  width:25px;
 ...

JavaScript

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

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

	$scope.currentBoxSection = 'cover';


});