JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div class="pseudobody" ng-app="myapp">
  <div ng-controller="MyCtrl as vm">
    
    <div class="zinput">
      <h3>Create a List</h3>
      <p>Enter the name of the list you wish to create below.</p>
      <input type='text' ng-model="vm.listname" />
      <button ng-click="vm.addListName()">Create</button>
    </div>

    <div class="zinput">
      <h3>Add Items to a List</h3>
      <p>First choose a list. Then add an item to it.</p>
      <form name="listitems" ng-submit="vm.addListItem()" novalidate>
        <div ng-repeat="list in vm.listarr">
          <input name="listitem" type="radio" ng-model="vm.itemkey" ng-value="list" id="{{list}}" />
          <label for={{list}}>{{list}}</label>
        </div>
        <input class="mt-10" type='text' ng-model="vm.itemvalue" />
        <input type="submit" value="Add Item" />

        <ul class="listdetails cf">
          <li ng-repeat="(key, value) in vm.lists">
            <h5>{{key}}</h5>
            <div ng-repeat="item in value">{{item}}</div>
          </li>
        </ul>
      </form>
    </div>

    <div class="zinput">
      <h3>Create a User</h3>
      <p>Enter the name of the user you wish to create below.</p>
      <input type='text' ng-model="vm.personname" />
      <button ng-click="vm.addPersonName()">Create</button>
    </div>

    <div class="zinput">
      <h3>Assign a List to a User</h3>
      <p>First choose a list in the lefthand column. Then in the righthand column, choose a user to whom the list apples.</p>
      <form name="personlists" ng-submit="vm.linkPersonList()" novalidate>
        <div class="cf">
        
          <div class="col2">
            <ul class="listtitles">
              <li ng-repeat="(key, value) in vm.lists">
                <input name="listmatchperson" type="radio" ng-model="vm.listmatchkey" ng-value="key" id="{{key}}" />
                <h5>{{key}}</h5>
              </li>
            </ul>
          </div>

          <div class="col2">
            <div...

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pseudobody {
  background: white;
  color: #3e4756;
  font-family: 'Arial', sans-serif;
  padding: 20px;
}

.zinput {
  margin-bottom: 30px;
}

input {
  outline: none;
}

input[type="text"] {
  padding: 2px 4px;
}

button,
input[type="submit"] {
  background: #007db9;
  border: none;
  color: white;
  cursor: pointer;
  min-width: 70px;
  padding: 4px 10px;
  transition: all 600ms ease-in-out;
}

button:hover,
input[type="submit"]:hover {
  background: crimson;
}

h3,
h5 {
  margin-bottom: 4px;
}

h5 {
  position: relative;
  text-transform: uppercase;
}

h5:after {
  background: #ccc;
  bottom: -2px;
  content: '';
  height: 1px;
  position: absolute;
  right: 0;
  width: 100%;
}

label {
  margin-left: 6px;
}

p {
  font-size: 12px;
  margin: 0 0 8px 0;
}

ul {
  list-style: none;
  margin-top: 20px;
  text-align: center;
}

.listdetails li {
  float: left;
  margin-right: 2%;
  width: 32%;
}

.listdetails li:nth-of-type(3n) {
  margin-bottom: 24px;
  margin-right: 0;
}

.mt-10 {
  margin-top: 10px;
}

.cf:after,
.cf:before {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}

.listtitles li {

}

.col2 {
  float: left;
  width: 50%;
}

JavaScript

angular.module('myapp', []);

angular.module('myapp')
.controller('MyCtrl', function() {
	vm = this;
  
  // LIST NAMES
  vm.listname = '';
  vm.listarr = [];
  vm.addListName = function() {
  	vm.listarr.push(vm.listname);
    vm.listname = '';
  }
  
  // LIST ITEMS
  vm.itemvalue = '';
  vm.lists = {};
  vm.addListItem = function() {
  	if(vm.lists[vm.itemkey]) {
    	vm.lists[vm.itemkey][vm.itemvalue] = vm.itemvalue;
    	vm.itemvalue = '';
    } else {
    	vm.lists[vm.itemkey] = {};
    	vm.lists[vm.itemkey][vm.itemvalue] = vm.itemvalue;
    	vm.itemvalue = '';
    }
  }
  
  // USERS
  vm.personname = '';
  vm.personarr = [];
  vm.addPersonName = function() {
  	vm.personarr.push(vm.personname);
    vm.personname = '';
  }
  
  // ASSIGN LISTS TO USERS
  vm.linkPersonList = function() {
  	vm.linkresults = vm.personmatchkey + ' has list ' + vm.listmatchkey;
  }
  
});