JSFiddle - React, Tailwind, and code Playground

by Ivo Tanev

HTML

<div _position="10002" id="fav_66" class="favorite favorite_color_yellow">
   <div class="favorite_default_state">
      <div class="favorite_options_button_holder">
         <div title="Options" class="favorite_options_button"></div>
      </div>
      <a data-title="Testing - Comment with too long text goes out from the window edge. Testing - Comment with too long text goes out from the window edge. Testing - Comment with too long text goes out from the window edge." data-html="true" href="http://commentNewLine.com" class="favorite_anchor"><span class="favorite_name">New fav</span></a>
   </div>
   <div class="favorite_options_state">
      <div class="favorite_default_button_holder">
         <div title="Hide options" class="favorite_default_button"></div>
      </div>
      <span class="favorite_rename_button">Rename</span><span class="favorite_delete_button">Delete</span><span class="favorite_color_change_button">Color</span>
      <ul class="favorite_color_list">
         <li class="favorite_color favorite_color_yellow"></li>
         <li class="favorite_color favorite_color_red"></li>
         <li class="favorite_color favorite_color_green"></li>
         <li class="favorite_color favorite_color_blue"></li>
         <li class="favorite_color favorite_color_black"></li>
      </ul>
   </div>
</div>

<div _position="10005" id="fav_69" class="favorite favorite_color_green">
   <div style="display: inline-block;" class="favorite_default_state">
      <div class="favorite_options_button_holder">
         <div title="Options" class="favorite_options_button"></div>
      </div>
      <a data-title="a" data-html="true" href="http://somesite.com" class="favorite_anchor"><span class="favorite_name">Short comment</span></a>
   </div>
   <div style="display: none;" class="favorite_options_state">
      <div class="favorite_default_button_holder">
         <div title="Hide options" class="favorite_default_button"></div>
      </div>
      <span...

CSS

a, a:hover {
    color: #000;
    text-decoration: none;
}
.favorite_anchor:after {
    display: block;
    content: attr(data-title);
    opacity: 0;
    position: absolute;
    left: -30px;
    height: auto;
    line-height: normal;
    border: 1px solid;
    font-size: 13px;
    font-style: normal;
    font-weight: bold;
    padding: 10px;
    white-space: nowrap;
}
.favorite_anchor:after {
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
.favorite_anchor:hover,
.favorite_anchor:focus {
    /* Transition fix for CSS generated content */
}
.favorite_anchor:hover:after {
    opacity: 1;
}
.favorite {
    display: inline-block;
    height: 60px;
    margin-right: 16px;
    margin-bottom: 16px;
}

.favorite_options_button_holder, .favorite_default_button_holder {
    display: inline-block;
    position: relative;
    width: 10px;
    height: 60px;
    margin: 0px 20px 0px 0px;
    float: left;
}

.favorite_options_button, .favorite_default_button {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1);
}

.favorite_options_button:hover, .favorite_default_button:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.favorite_options_state > span {
    display: inline-block;
    float: left;
    height: 60px;
    font-style: italic;
    color: #0a7eff;
    line-height: 60px;
    margin-right: 20px;
}

.favorite_rename_button:hover, .favorite_delete_button:hover,
.favorite_color_change_button:hover {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.4);
}

.favorite_color_list {
    display: none;
    float: left;
    background-color: #fff;
    height: 40px;
    padding: 10px 20px;
}

.favorite_color {
    display: inline-block;
    float: left;
    width: 40px;
    height: 40px;
    margin: 0px 6px;
    cursor: pointer; 
}


.favorite_options_state {
    display: inline-block;
    display: none;
}
.favorite_default_state {
   ...