JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<div class="navbar">
    <div class="navbar-left">
        <button class="btn btn-green"><i class="fa fa-pencil-square-o"></i></button>
        <input class="note-search" type="search" placeholder="Search note" />
    </div>
    <div class="navbar-right">
        <button class="btn btn-teal"><i class="fa fa-globe"></i> <span>12</span> </button>
        <button class="btn btn-orange"><i class="fa fa-users"></i></button>
        <button class="btn btn-blue"><i class="fa fa-user"></i></button>
        <button class="btn btn-red"><i class="fa fa-power-off"></i></button>
    </div>
</div>
    <ul class="filter-bar">
        <li><a href="">My notes</a></li>
        <li><a href="">Shared with me</a></li>
        <!-- Today, tomorrow, this week,next week, 
        no date, custom, mark complete, clear flag
        outlook style-->
        <li><a href="">flaged</a></li>
        <li><a href="">Recent</a></li>
        <li><a href="">Trashed</a></li>
    </ul>

<div class="note-grid">
    
    <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...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);

body{
    background-color:#F0F0F0;
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
}
.navbar{
    height:50px;
    background-color:#FFF;
    display:block;
    margin-bottom:20px;
}
.navbar input.note-search{
    padding:5px 10px;
    margin:10.5px 10px;
}
.navbar span{
  -o-animation-duration: 3s;
  -moz-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
}
.navbar-left{
    float:left;
}
.navbar-right{
    float:right;
}
.navbar .btn{
    font-size:21px;
    border:none;
    color:#FFF;
    padding:13px 20px;
    margin:0;
    float:left;
    cursor:pointer;
}
.btn-red{
    background-color:#FF4136;   
}
.btn-green{
    background-color:#3D9970;   
}
.btn-blue{
    background-color:#0074D9;   
}
.btn-orange{
    background-color:#FF851B;
}
.btn-teal{
    background-color:#39CCCC;
}
/*filter navbar*/
ul.filter-bar{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    margin-bottom:20px;
}
ul.filter-bar li{
    display:inline-block;
    border-right: 1px solid #111;
}
ul.filter-bar li:last-child {
    border-right:none;
}
ul.filter-bar li a{
    padding: 10px 15px;
    text-decoration:none;
    color:#0074D9;
}

/*Note*/
.note-grid{
    margin:20px;
    text-align:center;
}
.note{
    width:350px;
    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);
    display:inline-block;
    margin:10px;
    text-align:left;
}
.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{
   ...

JavaScript

$('.navbar span').addClass('animated pulse');

// note sharing system, bitbucket(share), keep(UI), outlook(Flag)

/*
- users can create and share there notes,todos
- notes can be transformed into todos keep style
- users can share notes bitbucket style
- users can flag noten outlook style
- only the author of the note and the users the authore shared note with can comment on notes facebook style
- notifications for new note shred with you, reminders for flaged notes, new comment.
- if note is shared user will get a notification that a note was shared with him and must click on "OK" for the share to fanalize, this is done so sender can rest ashured that the user he shared the note with has noticed the new note.

*/