JSFiddle - React, Tailwind, and code Playground

by Alejandro M

HTML

<ol>
    <li>Al clickear sobre las opciones deberia cambiar el color segun el estado.</li>
    <li>agregar una clase que muestre o oculte el status.</li>
</ol>
<div id="my-app" ng-app="myWarnings" ng-controller="MainCtrl">
    <div id="status" ng-show="warningVisible">
        <div id="status-rec" ng-class="currentWarning">
            <p>{{currentWarning}}</p>
        </div>
    </div>
    <form action="">
        <label ng-repeat="warning in warnings">
            <span>{{warning}}</span>
            <input type="radio" name="status" value="{{warning}}" ng-model="$parent.currentWarning" ng-checked="warning === warning[1]">
        </label>
    </form>
    <form action="">
        <input type="checkbox" name="status" ng-model="warningVisible">
        <label>Visible</label>
    </form>

</div>

CSS

form {
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px;
}

input,
label {
    display: inline-block;
}

label {
    margin-right: 1em;
    padding: 0 5px;
}

#status {
    text-align: center;
}

#status-rec {
    border: 1px solid #aaa;
    display: inline-block;
    width: 80px;
    height: 80px;
    padding: 10px;
    border-radius: 20px;
    background: white;
    margin: 20px;
}

#status-rec p {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    padding: 20px 0;
}

#status-rec.alert {
    background: red;
    color: #fff;
}

#status-rec.warning {
    background: orange;
    color: #fff;
}

#status-rec.ok {
    background: green;
    color: #fff;
}

JavaScript

var app = angular.module('myWarnings', []);
app.controller('MainCtrl', function($scope) {
    $scope.warnings = ["general", "alert", "warning", "ok"];
    $scope.currentWarning = "general";

    $scope.warningVisible = true;
});