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" id="bod">
  
  <div id="snapshotShowcase" ng-show="showSnapshotBox">

		  <div id="snapshotLayoutContainer">
			  <img class="displayedSnapshot" ng-src="{{displayed}}"  />
		  
		  </div>
		  
		  <div id="snapshotDecorationContainer">
		  
			  <div class="triangleMiddle triangle" >
			  </div>
			  
		  </div>


	</div>

    <div id="showcase">
      <img ng-repeat="i in links" ng-src="{{i}}" ng-mouseleave="showSnapshotBox = false" ng-mouseenter="showSnapshot($index)" class="snapshot" />
    </div>

</div>

CSS

#bod
{
  width:500px;
  height:500px;
  
}

#snapshotShowcase
{
  width:300px;
  height:300px;
  box-sizing:border-box;
  margin:0 auto;
}

#snapshotLayoutContainer
{
  width:100%;
  height:200px;
  background:white;
  box-sizing:border-box;
  padding-top:15px;
  text-align:center;
  box-shadow:0 0 2px rgb(210,210,210);
}

#snapshotDecorationContainer
{
  width:100%;
  height:50px;
}

.triangleLeft
{
  border-right:35px solid transparent;
  border-top:50px solid white;
  box-shadow:-1px 0 0 rgb(240,240,240);
}

.triangleRight
{
  border-left:35px solid transparent;
  border-top:50px solid white;
  box-shadow:1px 0 0 rgb(230,230,230);
  float:right;
}

.triangleMiddle
{
  border-top:50px solid white;
  border-right:35px solid transparent;
  border-left:35px solid transparent;
  margin-right:auto;
  margin-left:auto;
}

.triangle
{
  width:0;
  height:0;
    

  
}
.displayedSnapshot
{
  max-width:80%;
  max-height:95%;
}

#showcase
{
  width:600px;
  height:160px;
  padding-top:5px;
  background:lightgrey;
  text-align:center;
}

.snapshot
{
  cursor:pointer;
  border-radius:8px;
  margin-right:5px;
}

JavaScript

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

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

	$scope.links =  ["http://orig13.deviantart.net/1d75/f/2009/220/b/0/spongebob_4_150x150_png_by_somemilk.png","http://orig13.deviantart.net/7f4c/f/2009/220/5/e/spongebob_2_150x150_png_by_somemilk.png","http://orig13.deviantart.net/6f9f/f/2009/230/f/e/spongebob_11_150x150_png_by_somemilk.png"];

  
  $scope.showSnapshot = function(index)
  {
  		$scope.displayed = $scope.links[index];
      $scope.showSnapshotBox = true;
  };


});