JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<div class="note">
        <div class="note-preview">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ipsam eius obcaecati consequuntur rerum impedit vel.
        </div>
        <div class="note-participants">
            <div class="note-participant">
                <img src="http://lorempixel.com/30/30/" alt="" />
                <div class="note-participant-info">
                    Some name here
                </div>
            </div>
            <div class="note-participant">
                <img src="http://lorempixel.com/30/30/" alt="" />
                <div class="note-participant-info">
                    Some name here
                </div>
            </div>
            <div class="note-participant">
                <img src="http://lorempixel.com/30/30/" alt="" />
                <div class="note-participant-info">
                    Some name here
                </div>
            </div>
            <div class="note-participant">
                <img src="http://lorempixel.com/30/30/" alt="" />
                <div class="note-participant-info">
                    Some name here
                </div>
            </div>
            <div class="note-participant">
                <img src="http://lorempixel.com/30/30/" alt="" />
                <div class="note-participant-info">
                    Some name here
                </div>
            </div>
            <div class="note-participant">
                <img src="http://lorempixel.com/30/30/" alt="" />
                <div class="note-participant-info">
                    Some name here
                </div>
            </div>
        </div>
        <div class="note-discussions">
            <div class="note-comment">
                <div class="note-comment-author-avatar">
                    <img src="http://lorempixel.com/32/32/" alt="" />
                </div>
                <div class="note-comment-content">
                    <h4><a...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
body{
    font-family: 'Open Sans', sans-serif;
}
.note{
    width:350px;
    margin:0 auto;
    background-color:#FFF;
    padding:10px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
.note-preview{
    padding:10px;
    font-size:18px;
    color:#111;
    font-weight:300;
}
.note-participants{
   border-top:1px solid #DDDDDD;
   border-bottom:1px solid #DDDDDD;
   padding:10px 0;
   margin:10px 0;
   display:inline-block;
   width:100%;
}
.note-participant{
    width:30px;
    height:30px;
    border:3px solid #DDDDDD;
    float:left;
    margin:5px;
}
.note-participant-info{
    display:none;
}
.note-participant.note-author{
    
}
.note-discussions{
    display:inline-block;
}
.note-comment{
    background-color:rgba(255,255,255,0.5);
    padding:5px;
    display:inline-block;
    border-bottom:1px solid #DDDDDD;
}
.note-comment-author-avatar{
   float:left;
   width:50px;
}
.note-comment-author-avatar img{
   border:3px solid #DDDDDD;
}
.note-comment-content{
   float:left;
   width:280px;
}
.note-comment-content h4{
    margin:0;
    font-size:16px;
    font-weight:500;
}

.note-comment-content h4 a{
    text-decoration:none;
    color:#0074D9;
}

.note-comment-content p{
    font-size:16px;
    margin:5px 0;
}

.note-comment-content-timestamp{
    font-size:14px;
    color:#AAAAAA;
}

.note-navbar{
    
}