JSFiddle - React, Tailwind, and code Playground

by Ignas Bernotas

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<div class="fixed sidebar">
    <div class="ui segment" id="top-menu"> <a href="#" class="ui basic button">Begin</a>
 <a href="#dashboard" class="ui basic button">Dashboard</a>

    </div>
</div>
<div class="ui celled grid" ng-controller="beginController">
    <div class="sixteen wide column">
        <div class="ui grid vertical stackable" id="start-app">
            <div class="four wide column" ng-repeat="step in steps">
                <div class="ui circular segment starting-step" ng-init="step.init()" ng-class="step.class" ng-click="step.click()">
                     <h2 class="ui icon header" ng-class="{true: 'hidden'}[step.completed || step.formVisible]">
                        <i class="{{ step.icon }} icon"></i>
                        {{ step.title }}
                    </h2>
                    
                    <div class="ui big input" ng-class="{false: 'hidden'}[step.formVisible && !step.completed]">
                        <form name="{{ step.type }}">
                            <input type="text" dynamic-name="step.type" ng-model="step.value" ng-minlength="5" ng-required="true" />
                        </form>
                    </div>
                     <h2 class="ui icon header" ng-class="{false: 'hidden'}[step.completed]">
                        <i class="checkmark icon"></i>
                        Well done!
                    </h2>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

/*******************************
            Global
*******************************/
 html, body {
    font-size: 15px;
    height: 100%;
}
body {
    font-family:"Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    background: #FFFFFF;
    margin: 0px;
    padding: 0px;
    color: #555555;
    text-rendering: optimizeLegibility;
    min-width: 320px;
}
.ui.header {
    font-family:'Source Sans Pro', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
/*******************************
            Global
*******************************/

/*-------------------
        Sidebar
--------------------*/
 #feed .sidebar {
    overflow: visible;
}
/*-------------------
        Grid
--------------------*/
 #feed .grid {
    height: 100%;
}
#feed > .grid > .column {
    height: 100%;
}
/*-------------------
       Inbox
--------------------*/
 #feed .inbox.tab {
    background-color: #FFFFFF;
}
#feed .inbox.tab .item {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#feed .inbox.tab .item .rating {
    margin-top: 0.2rem;
}
#feed .inbox.tab .item .description {
    margin-left: 2em;
}
#feed .page {
    float: right;
    margin-top: 0.9em;
}
#feed .middle.column {
    padding: 1em 2em;
}
#feed .middle.column h2 {
    margin-top: 0em;
}
/*rtl:ignore*/
 #feed .right.column {
    padding: 1em 2em;
    background-color: #FAFAFA;
}
/*******************************
          Responsive
*******************************/
 @media only screen and (max-width : 1000px) {
    #feed .inbox .date {
        float: none;
        margin-bottom: 0.5em;
    }
}
@media only screen and (max-width : 1250px) {
    /*rtl:ignore*/
    #feed .left.column > .menu .item {
        font-size: 1rem;
    }
}
/*******************************
              App
*******************************/
 #start-app {
    margin: 0;
}
#start-app .starting-step {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    cursor: pointer;
    box-shadow: none;
    border: 1px solid #1abc9c;
   ...

JavaScript

var testApp = angular.module('testApp', []);
testApp.directive('dynamicName', function($compile, $parse) {
  return {
    restrict: 'A',
    terminal: true,
    priority: 100000,
    link: function(scope, elem) {
      var name = $parse(elem.attr('dynamic-name'))(scope);
      elem.removeAttr('dynamic-name');
      elem.attr('name', name);
      $compile(elem)(scope);
    }
  };
});
testApp.controller('beginController', function ($scope, $rootScope) {
    $scope.message = 'Everyone come and see how good I look!';
    $rootScope.menu = false;

    $scope.step = 0;
    $scope.models = {};
    var showNextStep = function ($this, next) {
        if ($scope.steps[next]) {
            if ($this.index == $scope.step) {
                if(!$this.formVisible) {
                    $this.formVisible = true;
                    // && $this.formCompleted
                } else if($this.formVisible && !$this.formCompleted) {
                    //check if form is valid, if so send data to server and continue to next step
                    console.log($scope.step1);
                    console.log(step1);
                    console.log(step1.step1);
                    console.log(step1.step1.$valid);
                } else {
                    $scope.steps[next].class = '';
                    $scope.step++;
                    $this.completed = true;
                    $this.class = 'bigEntrance';
                }
            } else if (!$this.completed) {
                $this.class = 'disabled';
            }
        }
    };

    $scope.steps = [];
    _.each([{
        title: 'Step1',
        icon: 'exclamation',
        type: 'step1'
    }, {
        title: 'Step2',
        icon: 'exclamation',
        type: 'step2'
    }, {
        title: 'Step3',
        icon: 'exclamation',
        type: 'step3'
    }, {
        title: 'Step4',
        icon: 'exclamation',
        type: 'step4'
    }], function (element, index) {
        $scope.steps.push({
            index:...