JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="toolbar">

  <button id="reveal-duplicates">
    Reveal Duplicates
  </button>

</div>

<div class="gallery">

  <figure data-time="2016-12-19 13:10:48" data-title="IMG 115">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 115"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 23:58:10" data-title="IMG 019" duplicate>
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/300x400/000000/D3D3D3/?text=IMG 019"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:42" data-title="IMG 016">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/300x400/000000/D3D3D3/?text=IMG 016"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:10:02" data-title="IMG 019" duplicate>
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/300x400/000000/D3D3D3/?text=IMG 019"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 05:33:32" data-title="IMG 013" duplicate>
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 013"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:37" data-title="IMG 020">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 020"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:31" data-title="IMG 014">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/400x300/000000/D3D3D3/?text=IMG 014"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:16" data-title="IMG 011">
    <a href="#">
      <div class="translate"><img alt="" src="http://placehold.it/300x400/000000/D3D3D3/?text=IMG 011"></div>
    </a>
  </figure>

  <figure data-time="2016-12-19 13:09:26" data-title="IMG 013" duplicate>
    <a href="#">
      <div class="translate"><img alt=""...

SCSS

FIGURE {
	border: 10px solid white;
	margin: 0;
  background: #D3D3D3;
  width: 25%;
  float: left;
  position: relative;
  overflow: hidden;
	
	&.duplicate {
		background: red;
		
	}
	
	&.latest-duplicate {
		background: green !important;
		
	}
  
  &:before {
    height: 0;
    width: 100%;
    padding: { top: 100%; }
    content: "";
    display: block;
    
  }
  
  > A {
    position: absolute;
    top: 5px; left: 5px; bottom: 5px; right: 5px;
    display: block;
    overflow: hidden;
    
    .translate {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translate(50%,50%);
      
      IMG {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        transform: translate(-50%,-50%);
        display: block;
        
      }
      
    }
    
  }
  
}

HTML {
	background: #ffffff;
	padding: 10px;
}

* {
	box-sizing: border-box;
}

.toolbar {
	padding: 20px;
	text-align: center;
	
	BUTTON {
		display: inline-block;
    padding: 6px 12px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
		background: #D3D3D3;
		color: #000000;
		
		&:hover,
		&:focus {
			background: #000000;
			color: #D3D3D3;
		}
		
	}
	
}

.gallery {
  padding: 10px;
  overflow: hidden;
  
}

JavaScript

// reveal duplicated images and highligh latest
$('#reveal-duplicates').on('click', function() {

  // do stuff
  alert('Yep.. you clicked it');

});