JSFiddle - React, Tailwind, and code Playground

g> </a>

by lavezzi

HTML

<template>
<article class="comment">

    <div class="comment__figure">
        <a href="/#!/community/profile" class="comment__figure-link" :title="name">
            <avatar :avatar-src="avatar" :avatar-alt="name" v-if="avatar"></avatar>
        </a>
        <div class="comment__rating" v-if="!inner">
            <comment-rating :rating="rating"></comment-rating>
        </div>
    </div>

    <div class="comment__content">

        <header class="comment__header">
            <div class="comment__side">
                <a href="/#!/community/profile" class="comment__name" v-text="name"></a>
                <span class="comment__nickname" v-text="nickName"></span>
                <p class="comment__description" v-text="description"></p>
            </div>
            <div class="comment__side">
                <span class="comment__date" v-text="date"></span>
            </div>
        </header>

        <p class="comment__text" v-text="text"></p>

        <footer class="comment__actions">
            <div class="comment__side">
                <span class="comment__action">
                    <button @click.prevent="toggle" class="comment__count" v-if="hasComments">3 comments</button>
                    <button @click.prevent="toggle" class="comment__reply" v-else>reply</button>
                </span>
            </div>
            <div class="comment__side">
                <span class="comment__action">
                    <button class="comment__more"></button>
                </span>
            </div>
        </footer>

        <div class="comment__replies" v-show="isOpen">
            <comment v-for="comment in comments" :avatar="o.avatar" :name="o.name" :nick-name="o.nickName" :date="o.date" :description="o.description" :text="o.text" :rating="o.rating"></comment>
            <textbox label="Write your comment" name="comment" :multi-line="true" placeholder="Write your comment"></textbox>
        </div>
   ...