JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<header class="container">
    <section class="col-xs-12 clearfix">
        <button id="backEvents" class="btn btn-default btn-block hide">&lt; back to events</button>
        <button id="backCurators" class="btn btn-default btn-block hide">&lt; back to curators</button>
    </section>
</header>
<div class="container">
    <div class="form-horizontal">
        <section class="row event-group text-center">
             <h1>EVENTS</h1>

            <div class="col-xs-6">
                <label class="checkbox" for="eventcheckboxes-0">
                    <input type="checkbox" name="eventcheckboxes" id="eventcheckboxes-0" value="event 1" />
                    <img src="http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg" width="100%" />
                </label>
            </div>
            <div class="col-xs-6">
                <label class="checkbox" for="eventcheckboxes-1">
                    <input type="checkbox" name="eventcheckboxes" id="eventcheckboxes-1" value="event 2" />
                    <img src="http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg" width="100%" />
                </label>
            </div>
            <div class="col-xs-6">
                <label class="checkbox" for="eventcheckboxes-2">
                    <input type="checkbox" name="eventcheckboxes" id="eventcheckboxes-2" value="event 3" />
                    <img src="http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg" width="100%" />
                </label>
            </div>
            <div class="col-xs-6">
                <label class="checkbox disabled" for="eventcheckboxes-3">
                    <input type="checkbox" name="eventcheckboxes" id="eventcheckboxes-3" value="event 4" disabled />
                    <img src="http://placehold.it/350x350?text=coming...

CSS

* {
    transition:all 0.3s ease;
}
h1 {
    text-align:center;
}
input[type="checkbox"] {
    display: none;
}
.container {
    width:640px;
    background: #333;
    padding: 15px;
    color:#fff;
    margin:5px auto;
}
header {
    background:#666
}
footer {
    background:#666
}
.col-xs-6, .col-xs-4 {
    margin-bottom: 15px;
}
.event-group, .current-group, .finish-group {
    min-height:500px;
}
.event-group label, .curator-group label {
    display: block;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 100%;
    font-size:30px;
    padding-top: 0px!important;
}
.event-group label {
    width: 290px;
    height: 290px;
    line-height: 285px;
    /*-15px => half fontsize ! */
}
.curator-group label {
    width: 183px;
    height: 183px;
    line-height: 168px;
    /*-15px => half fontsize ! */
}
label.checked {
    background: rgba(255, 255, 255, 1);
    color:#333
}
label img {
    opacity:.5;
    border-radius: 100%;
    border:4px solid #fff;
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(#greyscale);
  filter: gray;
}
label img.disabled {
    opacity:.2;
    border:4px solid #666;
}
label.checked img {
  opacity:1;
  -webkit-filter: none;
  filter: none;
}
.message {
    font-size:100px;
    text-align:center;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}
@-webkit-keyframes blinker {
    0% {
        opacity: 1.0;
...

JavaScript

$(function () {
    var step1checkboxes = $("input[name='eventcheckboxes']"),
        step2checkboxes = $("input[name='curatorcheckboxes']")

        step1checkboxes.click(function () {
            $(this).parent().toggleClass("checked");
            $("#next1").attr("disabled", !step1checkboxes.is(":checked"));
        });
    step2checkboxes.click(function () {
        $(this).parent().toggleClass("checked");
        $("#next2").attr("disabled", !step2checkboxes.is(":checked"));
    });

    $("#next1").click(function () {
        //curator screen
        $("#backEvents").removeClass("hide");
        $("#backCurators").addClass("hide");
        $(this).addClass("hide");
        $("#next2").removeClass("hide");
        $("#finish").addClass("hide");
        $(".event-group").addClass("hide");
        $(".curator-group").removeClass("hide");
        $(".finish-group").addClass("hide");
    });

    $("#next2").click(function () {
        //finish screen
        $("#backEvents").removeClass("hide");
        $("#backCurators").removeClass("hide");
        $("#next1").addClass("hide");
        $(this).addClass("hide");
        $("#finish").removeClass("hide");
        $(".event-group").addClass("hide");
        $(".curator-group").addClass("hide");
        $(".finish-group").removeClass("hide");

    });

    $("#backEvents").click(function () {
        //event screen
        $(this).addClass("hide");
        $("#backCurators").addClass("hide");
        $("#next1").removeClass("hide");
        $("#next2").addClass("hide");
        $("#finish").addClass("hide");
        $(".event-group").removeClass("hide");
        $(".curator-group").addClass("hide");
        $(".finish-group").addClass("hide");
    });
    $("#backCurators").click(function () {
        //curator screen
        $("#backEvents").removeClass("hide");
        $(this).addClass("hide");
        $("#next1").addClass("hide");
        $("#next2").removeClass("hide");
        $("#finish").addClass("hide");
...