JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='h-100' ng-app='scrollView' ng-controller='scrollViewController as svc'>

<div class='view page-width'>
  <header class='view-header'>
    <nav class='page-width'>
      <div class='nav-item'>
        View
      </div>
      <div class='nav-item'>
        Ideas
      </div>
      <div class='nav-item'>
        Add +
      </div>
    </nav>
  </header>
  
  <div class='scroll-view'>
    
    <div ng-repeat='item in svc.data' ng-click='svc.flipCard(item.id)' class='idea {{item.flippedClass}}'>
      <div class='front'>
     
      <header>
        <div class='content'>
          <article class='body'>
            {{item.text}}
          </article>
          <div class='likes'>
            <!--
            <img src='http://www.freeiconspng.com/uploads/new-flame-icon-png-12.png'/>
            -->
            <!--<img src='http://www.bmtinfonet.org/sites/default/files/imagecache/product_full/Donate%20candle-flame%20In%20Memory.png'/>
            -->
            <img src='http://cliparts.co/cliparts/gie/EdM/gieEdM4AT.svg'/>
            <label>
              {{item.id}}
            </label>
          </div>
        </div>
      </header>
      <footer>
        <div class='content'>
        
          <div class='person'>
            <img src='{{item.person}}'/>
            <div class='details'>
              <label class='name'>
                John Smith
              </label>
              <label class='profession'>
                Spanish Cuisine Chef
              </label>
            </div>
          </div>
          
          <div class='interaction'>
            <div class='icon-box comments'>
              <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/5907-200.png'/>
              <label>
                {{item.id}}
              </label>
            </div>
            
            <div class='icon-box shares'>
              <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/152855-200.png'/>
              <label>
                {{item.id}}
 ...

CSS

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  background-color: #624F63;
  background-color: #eee;
  background-color: #e9ebee;
  font-family: sans-serif;
  font-weight: 100;
  font-size: 14px;
  color: #4A4A4A;
}
.page-width {
  width: 100%;
  max-width: 1200px;
  min-width: 300px;
  height: 100%;
  margin: 0 auto;
}
.h-100 {
  height: 100%;
}
.content {
  width: 90%;
  margin: 0 auto;
  height: 100%;
}
.view {
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  height: 100%;
}
header.view-header {
  background-color: white;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}
header.view-header nav {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
header.view-header nav .nav-item {
  padding: 11px 10px 10px 10px;
  font-size: 14px;
}
footer.view-footer {
  background-color: white;
  border-top: 1px solid #ddd;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}
footer.view-footer nav {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}
footer.view-footer nav .nav-item {
  padding: 11px 0 10px 0;
  font-size: 14px;
  flex-grow: 1;
  -webkit-flex-grow: 1;
  text-align: center;
  border-right: 1px solid #eee;
}
footer.view-footer nav .nav-item:last-of-type {
  border-right: none;
}
.scroll-view {
  margin: 0 auto;
  padding: 5px 0;
  flex-grow: 1;
  -webkit-flex-grow: 1;
  text-align: center;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.scroll-view::-webkit-scrollbar { 
    display: none; 
}

.idea {
  display: inline-block;
  vertical-align: top;
  width: 95%;
  background-color: white;
  margin: 5px;
  text-align: left;
  /*
  box-shadow: 0 0 5px 0 #FF7300;
  */
  box-shadow: 0...

JavaScript

angular.module('scrollView', [])
.controller('scrollViewController', scrollViewController);

function scrollViewController() {
	var self = this;
  
  self.flipCard = function(id) {
  	var classs = self.data[id - 1].flippedClass;
    if(classs === '') {
    	self.data[id - 1].flippedClass = 'flip';
    } else {
    	self.data[id - 1].flippedClass = '';
    }
  };
  self.data = [
  	{
    	id: 1,
    	title : 'one',
      img: 'http://simpleicon.com/wp-content/uploads/light-bulb-3.png',
      text: 'dolor sit amet, consectetur adipiscing elit, sed do eiusmod aliqua.',
      person: 'http://www.loudounsmilecenter.com/images/image_implant.jpg',
      flippedClass: '',
    },
    {
    	id: 2,
    	title : 'two',
      img: 'http://simpleicon.com/wp-content/uploads/light-bulb-3.png',
      text: 'Lorem ip consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
      person: 'http://www.loudounsmilecenter.com/images/image_implant.jpg',
      flippedClass: '',
    },
    {
    	id: 3,
    	title : 'three',
      img: 'http://simpleicon.com/wp-content/uploads/light-bulb-3.png',
      text: 'Lorem ipsum dolor sit amet, et dolore magna aliqua.',
      person: 'http://www.loudounsmilecenter.com/images/image_implant.jpg',
      flippedClass: '',
    },
    {
    	id: 4,
    	title: 'four',
      img: 'http://simpleicon.com/wp-content/uploads/light-bulb-3.png',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
      person: 'http://www.loudounsmilecenter.com/images/image_implant.jpg',
      flippedClass: '',
    },
     {
    	id: 5,
    	title: 'four',
      img: 'http://simpleicon.com/wp-content/uploads/light-bulb-3.png',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
      person: 'http://www.loudounsmilecenter.com/images/image_implant.jpg',
      flippedClass: '',
    },
     {
    	id: 6,
    	title: 'four',
      img:...