JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<div class="pane"> 
    <h3>Nick says:</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p> 
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-unapprove">Unapprove</a><a href="#" class="btn-approve hide">Approve</a> | <a href="#" class="btn-spam">Spam</a></p> 
</div> 
<div class="pane spam"> 
    <h3>John says:</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p> 
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-unapprove hide">Unapprove</a><a href="#" class="btn-approve">Approve</a> | <a href="#" class="btn-spam">Spam</a></p> 
</div> 
<div class="pane"> 
    <h3>Smith says:</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p> 
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-unapprove">Unapprove</a><a href="#" class="btn-approve hide">Approve</a> | <a href="#" class="btn-spam">Spam</a></p> 
</div> 
<div class="pane"> 
    <h3>Jen says:</h3> 
    <p>Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p> 
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-unapprove">Unapprove</a><a href="#" class="btn-approve hide">Approve</a> | <a href="#" class="btn-spam">Spam</a></p> 
</div> 
<div class="pane"> 
    <h3>Jen says:</h3> 
    <p>Morbi malesuada, ante...

CSS

a, a:visited {
    color: #000099;
}
a:hover {
    text-decoration: none;
}
h3 {
    margin: 0;
    padding: 0 0 .3em;
}
p {
    margin: 0;
    padding: 0 0 1em;
}
.pane {
    background: #ffffff;
    padding: 10px 20px 10px;
    position: relative;
    border-top: solid 1px #ccc;
}
.alt {
    background: #f5f4f4;
}
.spam {
    color: #999999;
}
.hide {
    display:none;
}

JavaScript

$(document).ready(function(){
 
    $(".pane:even").addClass("alt");
 
    $(".pane .btn-delete").click(function(){        
        $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow")
        return false;
    });
 
    $(".pane .btn-unapprove").click(function(){
        $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
        .animate({ backgroundColor: "#ffffff" }, "slow")
        .addClass("spam");
        //.addClass("hide");
        $(this).siblings("a").removeClass("hide");
        $(this).addClass("hide");
        return false;
    });
 
    $(".pane .btn-approve").click(function(){
        $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
        .animate({ backgroundColor: "#ffffff" }, "slow")
        .removeClass("spam")
        $(this).siblings("a").removeClass("hide");
        $(this).addClass("hide");
        return false;
    });
 
    $(".pane .btn-spam").click(function(){        
        $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow")
        return false;
    });
 
});