JSFiddle - React, Tailwind, and code Playground

by Colin Brauns

HTML

<phone>
  <screen>
    <app>
      <box></box>
      <actions>
        <button reject>No</button>
        <button accept>Yes</button>
      </actions>
    </app>
  </screen>
</phone>

CSS

body {
  font-family: sans-serif;
  background: #fff;
  padding: 1em;
}

* {
  font-family: inherit;
}

phone {
  display: block;
  background: #444;
  width: 240px;
  height: 360px;
  margin: 0 auto; 
  border-radius: 20px;
  padding: 50px 10px;
}

screen {
  display: block;
  background: #fff;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

app {
  display: block;
  background: #eee;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

button {
  background-color: #ccc;
  color: #444;
  border: none;
  font-size: 1em;
  text-align: center;
  padding: .3em .5em .2em;
  box-sizing: border-box;
  cursor: pointer;
}

actions {
  display: block;
  width: 80%;
  margin: 10% auto;
  position: relative;
  height: 10%;
}

actions button {
  position: absolute;
  height: 100%;
  width: 40%;
}

button[reject] {
  left: 0;
}

button[accept] {
  right: 0;
}

box {
  background-color: white;
  display: block;
  width: 80%;
  height: 70%;
  margin: 10% auto;
  transition: transform 500ms ease-in-out;
  position: relative;
  border-radius: .25em;
  box-shadow: 0 .5em 1em rgba(0, 0, 0, .2);
}

box img {
  position: absolute;
  height: 120px;
  width: 120px;
  top: 0; right: 0; bottom: 50px; left: 0;
  margin: auto;
}

box span {
  position: absolute;
  text-align: center;
  display: block;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  bottom: 30px;
  font-size: 1.25em;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

box[review="reject"] {
  transform: translateX(-150%) rotate(-10deg)
}

box[review="accept"] {
  transform: translateX(150%) rotate(10deg)
}

JavaScript

var faceImageUrlPrefix =  'https://s3.amazonaws.com/uifaces/faces/twitter';
var people = [
  { username: 'zeldman', imageUrl: '/zeldman/128.jpg' },
  { username: 'iannnnn', imageUrl: '/iannnnn/128.jpg' },
  { username: 'jsa', imageUrl: '/jsa/128.jpg' },
  { username: 'zack415', imageUrl: '/zack415/128.jpg' },
  { username: 'faulknermusicasdasdajsdkasdhaksdasdjaksdkjashdakjsdakjsdaksjdas', imageUrl: '/faulknermusic/128.jpg' },
  { username: 'marcogomes', imageUrl: '/marcogomes/128.jpg' },
  { username: 'k', imageUrl: '/k/128.jpg' }
];
var currentFace = 0;

var app = document.querySelector('app');
var box = document.querySelector('box');
var actions = document.querySelector('actions');
var rejectButton = document.querySelector('button[reject]');
var acceptButton = document.querySelector('button[accept]');

rejectButton.addEventListener('click',function(){
  box.setAttribute('review', 'reject');
  addNewBox();
});

acceptButton.addEventListener('click',function(){
  box.setAttribute('review', 'accept');
  addNewBox();
});

var addNewBox = function() {
  setTimeout(function(){
    box.parentNode.removeChild(box);
    var newBox = document.createElement('box');
    var imageUrl = faceImageUrlPrefix + people[currentFace].imageUrl;
    newBox.innerHTML = '<img src="' + imageUrl + '"><span>' + people[currentFace].username + '</span>';
    currentFace = (currentFace + 1) % people.length;
    app.insertBefore(newBox, actions);
    box = newBox;
  }, 600);
};