JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="container-fluid ui-pages-list">
  <div class="row">
    <br/>
    <div class="col-sm-12">
      <ul class="media-list">
        <li class="media">
          <div class="media-left" >
            <a class="btn btn-sm btn-link ybx-toggle" ><i class="fa fa-chevron-down"></i></a>
          </div>
          <div class="media-body">
            <button class="btn btn-sm btn-default pull-right">
              <i class="fa fa-plus"></i>
              <span class="hidden-xs">New Page</span>
            </button>
            <h4 class="media-heading clearfix ui-page-name"><a href="#">A Very Very Long Very Very Long Team Name</a></h4>
            <div class="show-hide">
            
            <div class="media">
              <div class="media-body">
                <a class="ui-page-name-icon">
        A Rather Long Page Name  A Rather Long Page Name
         A Rather Long Page Name
        A Rather Long Page Name
        A Rather Long Page Name
        A Rather Long Page Name
        </a>
              </div>
              <div class="media-right">
              <div class="btn-toolbar">
                <div class="btn-group btn-group-xs">
                <button class="btn btn-default"  data-toggle="tooltip" data-placement="top" title="Set As Default Team Page">
                <i class="fa fa-square-o fa-fw"></i> <span class="hidden-xs">Default </span>
                </button>
                     <button class="btn btn-default">
                  <i class="fa fa-pencil fa-fw"></i><span class="hidden-xs"> Edit
               </span> </button>
                <button class="btn btn-default">
   ...

SCSS

.ui-pages-list {
  .btn {
    margin-top:9px
  }
  li > div > h4:hover, .btn-link:hover {
    background-color: aliceblue;
  }
  .media .media {
    margin-top: 0;
    &:hover {
      background-color: aliceblue;
      cursor: pointer;
    }
    a {
      text-decoration: none;
    }
  }
  .ui-page-name-icon {
    background-image: url(https://www.gc.cuny.edu/shared/images/shared/Instagram_Icon_25px_25px.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-position: 6px 12px;
    background-size: 20px 20px;
    padding: 10px 15px 10px 35px;
  }
  .ui-page-name {
    padding: 10px 15px;
  }
}
.btn-toolbar {
  width:115px
}
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .btn-toolbar {
    width:245px
  }
 }

JavaScript

$('[data-toggle="tooltip"]').tooltip()