JSFiddle - React, Tailwind, and code Playground

HTML

<div class="discussion">
<div class="discussion-header">
    <a class="discussion-header-button">[+]</a>
    Diskussion: 3 Kommentar(e)
    <a class="discussion-post-comment">Post Comment</a>
</div>
<div class="discussion-body">
<div class="post">
    <div class="post-header">
        <span class="post-header-name">Eugen</span>
        <span class="post-header-date">2010-02-25 12:32:30</span>
        <a class="reply" href="#">Reply</a>
        <a class="edit" href="#">Edit</a>
        <a class="delete" href="#">Delete</a>
    </div>
    <div class="post-body">
        Ich denke das sollte anders sein!
    </div>
    <div class="post">
        <div class="post-header">
            <span class="post-header-name">Markus</span>
            <span class="post-header-date">2010-02-25 12:32:31</span>
            <a class="reply" href="#">Reply</a>
            <a class="edit" href="#">Edit</a>
            <a class="delete" href="#">Delete</a>
        </div>
        <div class="post-body">
            Ich denke nicht
        </div>
    </div>
</div>
<div class="post"> 
    <div class="post-header">
        <span class="post-header-name">Jan</span> 
        <span class="post-header-date">2010-03-25 12:32:30</span>
        <a class="reply" href="#">Reply</a>
        <a class="edit" href="#">Edit</a>
        <a class="delete" href="#">Delete</a>
    </div>
    <div class="post-body">
        Mal was ganz anderes: Denkt ihr das selbe was ich denke?
    </div>
</div>
</div>
</div>

<div class="discussion">
<div class="discussion-header">
    <a class="discussion-header-button">[+]</a>
    Diskussion: 3 Kommentar(e)
    <a class="discussion-post-comment">Post Comment</a>
</div>
<div class="discussion-body">
<div class="post">
    <div class="post-header">
        <span class="post-header-name">Eugen</span>
        <span class="post-header-date">2010-02-25 12:32:30</span>
        <a class="reply" href="#">Reply</a>
        <a class="edit" href="#">Edit</a>
        <a...

CSS

div.discussion {
    font-size: 0.8em;
    font-family: Arial;
}

div.discussion-header {
    margin-bottom: 0.5em;
    background-color: #a241fc;
    font-weight: bold;
    color: white;
    padding: 0.5em;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    text-shadow: black 1px 1px 2px;
}

a.discussion-header-button {
    font-family: monospace;
    text-decoration: none;
    cursor: pointer;
}

a.discussion-post-comment {
    float: right;
    cursor: pointer;
}

a.discussion-post-comment:hover,
a.discussion-header-button:hover {
    color: #fff538;
}

.discussion-body>div.post {
    margin-left: 0;
}

div.post {
    margin-left: 1.5em;
}

div.post-header {
    padding: 0.25em;
    padding-left: 0.75em;
    background-color: #fffba6;
    border: 2px solid lightgrey;
    border-bottom: none;
    border-left: none;
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

div.post-body {
    margin-bottom: 0.5em;
    padding: 0.5em;
    padding-left: 0.75em;
    background-color: #fffba6;
    border-right: 2px solid lightgrey;
}

span.post-header-name {
    font-weight: bold;
}

span.post-header-date {
    color: grey;
    text-align: right;
}

div.post-header a {
    font-size: 0.75em;
    text-decoration: none;
}

JavaScript

$(document).ready(function() {
    // Hide the discussion bodys per default
    $(".discussion").addClass("closed")
        .children(".discussion-body").hide();
    
    // Register two custom events for the individual discussion divs      
    // "open" & "close" in order to make the discussion bodys
    // collapsable and be able to toggle the events by clicking
    // the "discussion-header-button" anchor
    $(".discussion")
    .bind("open", function(e) {
       if(!$(this).hasClass("opened")) {
           $(this)
            .children(".discussion-body").slideDown()
            .find(".discussion-header-button").html("[-]")
            .addClass("opened")
            .removeClass("closed");
       }
    })
    .bind("close", function(e) {
       if(!$(this).hasClass("closed")) {
           $(this)
            .children(".discussion-body").slideUp()
            .find(".discussion-header-button").html("[+]")
            .addClass("closed")
            .removeClass("opened");
       }
    })
    .find(".discussion-header-button").click(function(){
        relatedDiscussion = $(this).parents(".discussion");
        if(relatedDiscussion.hasClass("closed")) {
            relatedDiscussion.trigger("open");
        }
        else if(relatedDiscussion.hasClass("opened")) {
            relatedDiscussion.trigger("close");
        }
    });

    // Register custom "showForm" & "destroyForm" events on posts       
    // in order to make the "Reply" button work
    // TODO: Maybe add "preview" & "submit"

    // create live actions for the form buttons
    $(".cancel").live("click", function(){
        $(this).closest(".post-comment-form").slideUp('',function(){ $(this).remove(); });
    });
    $(".preview").live("click", function(){
        // Hier muss mit Ajax und der Datenbank gespielt
        // werden um ein preview erstellen zu können
    });
    $(".submit").live("click", function(){
        // Hier muss mit Ajax und der Datenbank gespielt
        // werden um...