JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav class='navbar'>
        <ul>
            <li class='right'>
                <a href='#' class='item link'>
                    link
                </a>
            </li>
            <li class='right'>
                <a href='#' class='item link'>
                    link
                </a>
            </li>
            <li class='right'>
                <label class='item text'>
                    text
                </label>
                <div class='vertical-mid-hack'></div>
            </li>
        </ul>
    </nav>
    <div class="navbar-under-fill"></div>

    <section class="page-section">
        <h3 class="section-title">
          Small Components
        </h3>
        <div class="page-column">
            <div>
                <div class="bubble-with-message">
                    <div class="bubble md orange"></div>
                    <label>
                        Required
                    </label>
                </div>
            </div>
            <div>
                <div class="bubble-with-message">
                    <div class="bubble md red"></div>
                    <label>
                        Invalid
                    </label>
                </div>
            </div>
            <div>
                <div class="bubble-with-message">
                    <div class="bubble md green"></div>
                    <label>
                        Valid
                    </label>
                </div>
            </div>
            <div>
                <div class="bubble-with-message">
                    <div class="bubble md blue"></div>
                    <label>
                        Regular
                    </label>
                </div>
            </div>
        </div>


        <div class="page-column">
            <div class="page-row sm">
                <div class='tooltip-box'>
                  <div class='text'>
                    <input type="text" class="input required" placeholder="Hover" />
 ...

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  color: #4F4F4F;
  background-color: #eee; }

h3 {
  font-size: 16px;
  margin: 10px 0; }

.section-title {
  color: #008729;
  text-shadow: 0 0 5px 0 black; }

.vertical-mid-hack {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -2px; }

.vertical-bot-hack {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  margin-left: -2px; }

.vertical-top-hack {
  display: inline-block;
  height: 100%;
  vertical-align: top;
  margin-left: -2px; }

.box {
  display: inline-block;
  vertical-align: middle; }

.empty-50-px {
  height: 50px; }

.page-row {
  padding: 10px 0; }

.page-row.sm {
  padding: 5px 0; }

.page-row.lg {
  padding: 20px 0; }

.page-column {
  display: inline-block;
  vertical-align: top;
  margin: 0 20px; }

.navbar {
  position: fixed;
  z-index:...

JavaScript

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


function data() {
	var self = this;
  self.colors = [
    'green',
    'orange',
    'blue'
  ]
  
  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'
    },
    
  ];
}