JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div ng-app='data-columns' ng-controller='data as data'>


  <div ng-repeat='item in data.colors' class='data-column {{item}}'>
    <header>
      <div class='content centered'>
        <label>
          Header
        </label>
      </div>
    </header>
    <section class='data'>
      <ul>
        <li ng-repeat='datar in data.datas'>
          <div class='content centered'>
            <section class='data-row'>
              <label class='title'>
                {{datar.key1}}
              </label>
              <label class='value'>
                {{datar.value1}}
              </label>
            </section>
            <section class='data-row'>
              <label class='title'>
                {{datar.key2}}
              </label>
              <label class='value'>
                {{datar.value2}}
              </label>
            </section>
            <section class='data-row'>
              <label class='title'>
                {{datar.key3}}
              </label>
              <label class='value'>
                {{datar.value3}}
              </label>
            </section>
          </div>
        </li>

      </ul>
    </section>
    <footer>
      <div class='content centered'>
        <label>
          Footer
        </label>
      </div>
    </footer>
  </div>


</div>

SCSS

$teal: #5EDBD5;
$red: #E63570;
$orange: #F5A05B;
$green: #59DE7C;
$yellow: #FFF394;
$dark-gray-1: #454545;

.data-column {
  
  display: inline-block;
  vertical-align: top;
  margin: 10px;
  width: 200px;
  background-color: white;
  font-family: calibri;
  font-size: 14px;
  box-shadow: 0 0 5px -2px;
  color: $dark-gray-1;

  
  header {
    padding: 20px 0;
    border-bottom: 1px solid gray;
    background-color: gray;
    color: white;
    font-size: 16px;
  }
  
  .data {
    
    max-height: 300px;
    overflow-y: scroll;
    
    ul {
      
      list-style: none;
      margin: 0;
      padding: 0;
      
      li {
        padding: 10px 0;
        
        .data-row {
          padding: 1px 0;
          text-align: center;
          
          label {
            display: inline-block;
            vertical-align: top;
          }
          .title {
            width: 32%;
            text-align: right;
            margin-right: 5px;
          }
          .title:after {
            content: ':';
            margin-left: -3px;
          }
          .value {
            width: 60%;
            text-align: left;
          }
        }
      }
      li:nth-of-type(even) {
        background-color: #eee;
      }
      
    }
  }
  
  footer {
    padding: 10px 0;
    background-color: white;
    border-top: 1px solid gray;
  }
}

.content {
  width: 90%;
}
.content.centered {
  margin: 0 auto;
}

.data-column.teal {
  
  border-color: $teal;
  header {
    background-color: $teal;
    border-color: $teal;
  }
  footer {
    border-color: $teal;
  }
}
.data-column.red {
  
  border-color: $red;
  header {
    background-color: $red;
    border-color: $red;
  }
  footer {
    border-color: $red;
  }
}

.data-column.orange {
  
  border-color: $orange;
  header {
    background-color: $orange;
    border-color: $orange;
  }
  footer {
    border-color: $orange;
  }
}

.data-column.green {
  
  border-color: $green;
  header {
    background-color: $green;
   ...

JavaScript

angular.module('data-columns', [])
.controller('data', data);


function data() {
	var self = this;
  self.colors = [
  	'',
    'teal',
    'red',
    'yellow',
    'green',
    'orange',
  ]
  
  self.datas = [
    {
      key1: 'data',
      value1: 'value',
      key2: 'data',
      value2: 'val',
      key3: 'dat',
      value3: 'valuee'
    },
    {
      key1: 'data',
      value1: 'value',
      key2: 'data',
      value2: 'val',
      key3: 'dat',
      value3: 'valuee'
    },
    {
      key1: 'data',
      value1: 'value',
      key2: 'data',
      value2: 'val',
      key3: 'dat',
      value3: 'valuee'
    },
    {
      key1: 'data',
      value1: 'value',
      key2: 'data',
      value2: 'val',
      key3: 'dat',
      value3: 'valuee'
    },
    {
      key1: 'data',
      value1: 'value',
      key2: 'data',
      value2: 'val',
      key3: 'dat',
      value3: 'valuee'
    },
    {
      key1: 'data',
      value1: 'value',
      key2: 'data',
      value2: 'val',
      key3: 'dat',
      value3: 'valuee'
    },
    
  ];
}