JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<ul>
<li data-username="sip:[email protected]" class="contact-item">        
        <img class="avatar" src="" />
        
        <p class="name">Ana Costa</p>

        <div class="presence-info">
                <p class="presence-status presence-offline">Offline</p>
                <p class="presence-message"></p>
        </div>
        
        <ul class="actions">
                <li>
                        <button role="new-call" class="call-action">Call</button>
                </li>
                <li class="act-options-other">
                        <ul>
                                <li>
                                        <button role="new-message" class="sms-action">SMS</button>
                                </li>
                                <li> 
                                        <button role="new-chat" class="chat-action">Chat</button> 
                                </li>
                        </ul>
                </li>
                <li> 
                        <button class="show-act-options">ν</button>
                </li>
        </ul>  

       <button role="toggle" class="toggle">Toggle</button>
</li>
  
<li data-username="sip:[email protected]" class="contact-item active">        
        <img class="avatar" src="" />
        
        <p class="name">ab</p>

        <div class="presence-info">
                <p class="presence-status presence-offline">Offline</p>
                <p class="presence-message"></p>
        </div>
        
        <ul class="actions">
                <li>
                        <button role="new-call" class="call-action">Call</button>
                </li>
                <li class="act-options-other">
                        <ul>
                                <li>
                                        <button role="new-message" class="sms-action">SMS</button>
                                </li>
                                <li> 
                                       ...

CSS

/*el_map*/

.el-map{
  margin-top: 260px;
  white-space: pre;
  font: 15px helveticaneue-light, arial;
}



/*resets*/

body, html, ul, ol,p, h1, h2, button{
  padding: 0; margin: 0;
}

ul, ol{
  list-style-type: none;
}

/* buttons */

button::-moz-focus-inner {
    padding: 0;
    border: 0;
    outline: none;
}


/*.cotact-item*/

/*vars*/
/*for both*/
$contact-item_padding-left: 150px; /*remove on implementation + every other use of it*/

/*for closed*/
$contact-item_padding-vertical: 7px;
$avatar_dimensions: 26px;
$name_left: $contact-item_padding-left + $avatar_dimensions;
$name_width: 160px;
$info_left: $name_left + $name_width;
$actions_max-width: 240px;


/*for active state */
$a_contact-item_padding-vertical: 20px;
$a_avatar_dimensions: 102px;
$a_name-and-info_left: $a_avatar_dimensions + $contact-item_padding-left;
$a_name-and-info_width: 150px;
$a_actions-li_margin-right: 10px;
$toggle_right: 185px;
$toggle_dimensions: 24px;



/*common*/

.contact-item {
  position: relative;
  font-family:"HelveticaNeue", helvetica, arial, sans-serif;
  box-sizing: border-box; /* dev purposes*/
  width: 960px;/* dev purposes*/
  border-top:2px solid #e6e6e6;
  background-color: transparent;
  padding: $contact-item_padding-vertical 0 $contact-item_padding-vertical $contact-item_padding-left; /*padding left must be removed when implemented */
  box-shadow: none;
  font-size: 14px;
}

.contact-item button{
  cursor: pointer;
  margin: 0;
  border: none;
  box-shadow: inset 0 1px 3px #333;
}

.contact-item .avatar {
  display: inline-block;
  box-sizing: border-box;
  width: $avatar_dimensions;
  height: $avatar_dimensions;
  border: 1px solid #d0d0d0; 
  border-radius: 2px;
  background: url("/images/whisper/smallProfileImg.png") no-repeat;
  background-size: cover;
  background-position: center;
  vertical-align: bottom;
}

.contact-item .name{
  position: absolute;
  top: $contact-item_padding-vertical;
  left: $name_left;
  margin: 4px 0 0 10px;
  color: #222;
 ...

JavaScript

/*whisper .contact-item bars
doesnt' look good? css is actually .scss
*/