JSFiddle - React, Tailwind, and code Playground

by Edward Tanguay

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div ng-controller="mainController">

  <div class="colorControls">
  
    <div class="lineWrapper">
      <div class="control">
        <input type="radio" ng-model="theColor" value="red" />
      </div>
      <div class="label" ng-click="theColor='red'">red</div>
      <div class="clear"></div>
    </div>
    
    <div class="lineWrapper">
      <div class="control">
        <input type="radio" ng-model="theColor" value="green" />
      </div>
      <div class="label" ng-click="theColor='green'">green</div>
      <div class="clear"></div>
    </div>
    
    <div class="lineWrapper">
      <div class="control">
        <input type="radio" ng-model="theColor" value="blue" />
      </div>
      <div class="label" ng-click="theColor='blue'">blue</div>
      <div class="clear"></div>
    </div>
    
  </div>

  <div class="display">
    <div>Selected color: {{theColor}}</div>
  </div>
  
</div>

CSS

body {
  padding: 30px;
}

div.colorControls .control {
  float: left;
  padding: 2px 0 0 0;
}

div.colorControls .label {
  float: left;
  cursor: pointer;
}

div.clear {
  clear: both;
}

div.display {
  margin: 10px 0 0 0;
}

JavaScript

angular.module('myApp', [])
  .controller('mainController', function($scope) {
    $scope.theColor = '(none)';
  });