JSFiddle - React, Tailwind, and code Playground

by maddoggmedia

HTML

<link rel="stylesheet" href="http://grabbers.maddoggmedia.com/style.css">
<body>

<div id="main" role="main">

      <ul id="tiles">
        <!-- These are our grid blocks -->
        
        <li>
        
            <div class="chat-box-top">
            
                <a href="#"><img src="img/chat-box-sample-1.png" alt="chat-box-sample-1" width="234" height="152" /></a>
                
                <p><img src="img/status-green.png" alt="status-green" width="9" height="9" /><span>Dulce Moran</span> is 1.5 miles away</p>
            
            </div>
            
            
            <div class="chat-box-tools">

                    <span class="bookmark"><a href="#"><img src="img/chat-box-bookmark.png" alt="chat-box-bookmark" width="20" height="18" /></a></span>
                    
                    <span><a href="#"><img src="img/chat-box-fullscreen.png" alt="chat-box-fullscreen" width="20" height="18" /></a></span>
                    
                    
                    <span class="block"><a href="#"><img src="img/chat-box-block.png" alt="chat-box-block" width="20" height="18" /></a></span>
                
            </div>
            
            
            
            <div id="chat-box-chats">
            
            
                <div class="chat-box-message">
            
                    <p class="chat-box-message-left">Adrian</p>
                    
                    <p class="chat-box-message-right">Hey there!</p>
            
                </div>
            
            
                <div class="chat-box-message">
            
                    <p class="chat-box-message-left">Dulce</p>
                
                    <p class="chat-box-message-right">How is it going?</p>
            
                </div>
            
            
                <div class="chat-box-message">
            
                    <p class="chat-box-message-left">Adrian</p>
                    
                <p...

CSS

/**
 * Grid container
 */
#tiles {
list-style-type: none;
position: relative; /** Needed to ensure items are laid out relative to this container **/
margin: 0;
display:block;
}

/**
 * Grid items
 */
#tiles li {
width: 264px;
background: #f2f0f0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
display:block;
position:relative;
 /** Hide items initially to avoid a flicker effect **/

border: 1px solid #dedede;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);

}

#tiles li div.chat-box-top{
    padding: 15px 15px 12px;
    background: #fff;
    overflow: hidden;
}

#tiles li div.chat-box-top p img{
    float: left;
    padding-top: 3px;
    padding-right: 3px;
}

#tiles li div.chat-box-top p{
    float: left;
    font-size: 13px;
    color: #515151;
    font-weight: 400;
    margin-top: 10px;
}

#tiles li div.chat-box-top p span{
    font-weight: 700;
}


#tiles li div.chat-box-tools{
    background: url(../img/chat-box-tools-bg.png) repeat-x center top;
    overflow: hidden;
    padding: 0 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
} 

#tiles li div.chat-box-tools span{
    float: left;
    background: ;
    padding: 10px 6px;
    -webkit-transition:all ease 0.3s;
    -o-transition:all ease 0.3s;
    -moz-transition:all ease 0.3s;
    transition:all ease 0.3s;
}

#tiles li div.chat-box-tools span:hover{
    float: left;
    background: rgba(0, 0, 0, 0.03);
    padding: 10px 6px;
}

#tiles li div.chat-box-tools span.block{
    float: right;

}

#tiles li div.chat-box-tools span.pushed{
background: url(../img/chat-box-bookmark-hover.png) no-repeat center center rgba(0, 0, 0, 0.03);
-webkit-transition:none;
-o-transition:none;
-moz-transition:none;
transition:none;
}


#tiles li div.chat-box-message{
    background: url(../img/chat-box-message.png) repeat-x center top;
    overflow: hidden;
    padding: 12px 15px;
} 

.noopacity{
    opacity: 0;
}

#chat-box-chats{
    display:block;
    overflow:auto;
    height: 300px;
   ...

JavaScript

// bookmark stars
 $(document).ready(function() {
 
 $('#chat-box-chats').hide();
 
 $('#nav-status-offline').hide();
 
 $('.chat-box-banner').hide();
 
     // hides the slickbox as soon as the DOM is ready
     
 $(".chat-box-textinput").click(function(){
  $("#chat-box-chats").show();
});
 
 $("#nav-status").click(function(){
  $("#nav-status-offline").show();
});

 $("#nav-status").click(function(){
  $("#nav-status").hide();
});

 $("#nav-status-offline").click(function(){
  $("#nav-status-offline").hide();
});

 $("#nav-status-offline").click(function(){
  $("#nav-status").show();
});

 $(".chat-box-textinput").click(function(){
  $(".chat-box-banner").show();
});

 
       $('span.bookmark').click( function() {
    
        $('span.bookmark').toggleClass("pushed");
    
    $('span.bookmark img').toggleClass("noopacity");

 });
 
 
 
 $('textarea').each(function() {
    // Stores the default value for each textarea within each textarea
    $.data(this, 'default', this.value);
}).focus(function() {
    // If the user has NOT edited the text clear it when they gain focus
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    // Fires on blur if the content has been changed by the user
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    // Put the default text back in the textarea if its not been edited
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});






$('textarea').click( function() {
    
        $('textarea').toggleClass("big-textarea");
        
        $('.chat-box-banner').toggle();
        
 })
 
 


 



   
   });