JSFiddle - React, Tailwind, and code Playground

by simmi_simmi987

HTML

<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://angular-ui.github.io/ng-grid/lib/angular.js"></script>
<script src="http://angular-ui.github.io/ng-grid/lib/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div class="container">
    <div class="row">


    <h1>Hello, world! {{hello}}</h1>
    <input type="text" />

    <div ng-style="{backgroundColor:bgcolordef}">I'm a banner! + {{bgcolordef}}</div>

          <div ng-style="{height:heightdef,width:widthdef,backgroundColor:bgcolordef}" class="col-md-10 col-md-offset-1" id="largebox">
            <br/>
            I am main Box

          <a href={{link1}}><div class="smallbox pull-right col-md-2" id="box1" >{{box1label}}</div></a>
          <a href={{link2}}><div class="smallbox pull-right col-md-2" id="box3" >{{box3label}}</div></a>
          <a href={{link3}}><div class="smallbox pull-right col-md-2" id="box4" >{{box4label}}</div></a>
        <!--   <div class="smallbox pull-right col-md-1" id="box5" >box5</div>
          <div class="smallbox pull-right col-md-1" id="box6" >box6</div> -->


          </div>
    </div><!-- row closed  -->
    <br/><br/><br/><br/>
    <div class="row">
        <div class="form col-md-5 category">


           <!-- Height input-->
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">Height</label>
              <div class="col-md-9">
                <input ng-model="heightdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
            </div>

            <br/>

           <!-- Width input-->
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">Width</label>
             ...

CSS

#largebox
    {
      background-color: pink
    }
    .smallbox
    {
      margin:20px;
      display:inline-block;
      background-color: gray
    }
    .form-group
    {
      margin-top:25px !important;
    }
    .indiv-box
    {
      margin-top:35px !important;
      border-bottom: 1px solid #ccc;
    }
    .category
    {
      border:2px solid black;
    }
    .form-group
    {
      margin-bottom:50px !important;
    }
    .form-group input
    {
      margin-top:25px !important;
    }
    .border-row {
    border-bottom: 1px solid #ccc;
    }

JavaScript

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope, $http) {
    $scope.hello="My dear very good morning";
    $scope.heightdef=100;
    $scope.widthdef=1000;
    $scope.box1label="box1";
    $scope.box2label="box2";
    $scope.box3label="box3";
    $scope.box4label="box4";
    $scope.link1="box1.html";
    $scope.link2="box2.html";
    $scope.link3="box3.html";
    $scope.link4="box4.html";
    
    });