JSFiddle - React, Tailwind, and code Playground

by gene

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div class="wrapper"><input type="checkbox" /></div>
<button data-bind="click: showHalo">Halo</button>

CSS

@-webkit-keyframes halo-animation {
    0%   {     -webkit-box-shadow: 0 0 12px rgba(0,96,144,0.0); }
    20%  {     -webkit-box-shadow: 0 0 12px rgba(0,96,144,0.9); }
    40%  {     -webkit-box-shadow: 0 0 12px rgba(144,96,144,0.6); }
    70%  {     -webkit-box-shadow: 0 0 20px rgba(144,96,144,0.9); }
    100% {     -webkit-box-shadow: 0 0 20px rgba(144,96,144,0.0); }
}

@-moz-keyframes halo-animation {
    0%   {     -moz-box-shadow: 0 0 12px rgba(0,96,144,0.0); }
    20%  {     -moz-box-shadow: 0 0 12px rgba(0,96,144,0.9); }
    40%  {     -moz-box-shadow: 0 0 12px rgba(144,96,144,0.6); }
    70%  {     -moz-box-shadow: 0 0 20px rgba(144,96,144,0.9); }
    100% {     -moz-box-shadow: 0 0 20px rgba(144,96,144,0.0); }
}

@-ms-keyframes halo-animation {
    0%   {     -ms-box-shadow: 0 0 12px rgba(0,96,144,0.0); }
    20%  {     -ms-box-shadow: 0 0 12px rgba(0,96,144,0.9); }
    40%  {     -ms-box-shadow: 0 0 12px rgba(144,96,144,0.6); }
    70%  {     -ms-box-shadow: 0 0 20px rgba(144,96,144,0.9); }
    100% {     -ms-box-shadow: 0 0 20px rgba(144,96,144,0.0); }
}


.halo {
    -webkit-animation: halo-animation 10s 2s infinite;
    -moz-animation: halo-animation 10s 2s infinite;
    -ms-animation: halo-animation 10s 2s infinite;
}

.wrapper {
    margin: 12px;
    width: 13px;
    height: 13px;
    display: inline-block;
}

input[type="checkbox"] {
    position: relative;
    top: -2px;
}

JavaScript

function viewModel() {
    this.showHalo = function() {
        var $wrapper = $('.wrapper');
        if ($wrapper.hasClass('halo'))
            $wrapper.removeClass('halo');
        else
            $wrapper.addClass('halo');
    };
}

ko.applyBindings(new viewModel());