JSFiddle - React, Tailwind, and code Playground

by keisersuze

HTML

<h1>Flipbook Testing</h1>
<hr />
<h2>Get a Job!</h2>
<div id="p1" class="block green p1 s7 s10 c3 c5 c6 c10 c11">Butcher</div>
<div id="p2" class="block blue p2 s2 s3 s7 s9 s10 c4 c5 c8 c10 c11">Roofer</div>
<div id="p3" class="block violet p3 s1 s4 s5 s8 s11 s12 c1 c6 c7 c8 c9 c12">Lawyer</div>
<hr style="clear:left" />
<h2>Got Skillz?</h2>
<div class="associationBlock1">
    <div id="s1" class="square grey p3 c8 c9">Liar</div>
    <div id="s2" class="square grey p2 c1">Dextrious</div>
    <div id="s3" class="square grey p2 c4 c10">Likes Heat</div>
    <div id="s4" class="square grey p3 c2 c3 c6 c9">Morally Ambiguois</div>
</div>
<div class="associationBlock2">
    <div id="s5" class="square grey p3 c1 c11">Snarky</div>
    <div id="s6" class="square grey p1 p2 p3 c2 c3 c6">Murderer</div>
    <div id="s7" class="square grey p1 p2 c2 c4 c5">Strong</div>
    <div id="s8" class="square grey p3 c11 c12">Likes Reading</div>
</div>
<div class="associationBlock3">
    <div id="s9" class="square grey p2 c1 c5 c8">Good Balance</div>
    <div id="s10" class="square grey p1 p2 c1 c2 c5">Coordination</div>
    <div id="s11" class="square grey p3 c9 c11">Eloquent</div>
    <div id="s12" class="square grey p3 c7">Douchy</div>
</div>
<hr style="clear:both;" />
<h2>Get some class!</h2>
<div class="classBlock1">
    <div id="c1" class="roundedSquare red p3 s1 s2 s5 s9 s10">Swimming with Sharks</div>
    <div id="c2" class="roundedSquare red p1 s2 s4 s6">Blades vs. Blunts</div>
    <div id="c3" class="roundedSquare red p1 s4 s6">The Carcass &amp; You</div>
    <div id="c4" class="roundedSquare red p2 s2 s3">Ah Carimba! ("It's hot as balls!")</div>
</div>
<div class="classBlock2">
    <div id="c5" class="roundedSquare red p1 p2 s2 s6 s7">Lift With Your Feet</div>
    <div id="c6" class="roundedSquare red p1 p2 p3 s4 s6">How to get blood out of Clothing</div>
    <div id="c7" class="roundedSquare red p3 s5 s8 s12">The History of Brooks Brothers</div>
    <div id="c8"...

CSS

.block {
    width:100px;
    height:20px;
    border-radius:10px;
    margin:10px;
    padding:8px 0 0;
    text-transform:uppercase;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#fff;
    text-align:center;
    cursor:pointer;
    float:left;
}

.associationBlock1, .associationBlock2, .associationBlock3, .classBlock1, .classBlock2, .classBlock3 {
    width:125px;
    float:left;
}

.square {
    width:50px;
    height:17px;
    margin:10px;
    padding:10px 5px;
    text-transform:uppercase;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#fff;
    text-align:center;
    cursor:pointer;
    word-wrap:break-word;
}

.roundedSquare {
    width: 100px;
    height: 30px;
    margin:10px;
    padding:5px 5px 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#fff;
    text-align:center;
    cursor:pointer;
    word-wrap:break-word;
}

.green {
    background:#3C6;
}

.blue {
    background:#0099CC;
}

.violet {
    background:#49288F;
}

.grey {
    background:#AAA;
}

.red {
    background:#fc2e5a;
}

JavaScript

$('.square').each(function() {
    var str = $(this).attr('class').split(' ');
});

$('.block').hover(
    function() {
        var hovId = $(this).attr('id');
        $('.square').not('.' + hovId).fadeTo(75, 0.25)
        $('.roundedSquare').not('.' + hovId).fadeTo(75, 0.25)
        },
    function() {
        $('.square').fadeTo(75, 1);
        $('.roundedSquare').fadeTo(75, 1)
});

$('.square').hover(
    function() {
        var hovId = $(this).attr('id');
        $('.block').not('.' + hovId).fadeTo(75, 0.25)
        $('.roundedSquare').not('.' + hovId).fadeTo(75, 0.25)
        },
    function() {
        $('.block').fadeTo(75, 1);
        $('.roundedSquare').fadeTo(75, 1)
});

$('.roundedSquare').hover(
    function() {
        var hovId = $(this).attr('id');
        $('.square').not('.' + hovId).fadeTo(75, 0.25)
        $('.block').not('.' + hovId).fadeTo(75, 0.25)
        },
    function() {
        $('.square').fadeTo(75, 1);
        $('.block').fadeTo(75, 1)
});