JSFiddle - React, Tailwind, and code Playground

New App Banner

by chrischilcoat

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<h4><i class="ybx-widget-open fa fa-chevron-down" data-atf-element="atf-toggle-itinerary"></i><!-- react-text: 16 --> Tasks<!-- /react-text --><span class="pull-right"><!-- react-text: 20 -->  <!-- /react-text --><div class="badge badge-warning">3</div></span></h4>


<div class="panel panel-default ui-yakabox-taskspanel">
  <div class="card text-center">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">To Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">From Me</a>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <ul class="list-group">
        <a class="list-group-item" href="#">
          <span class="media"> 
            <span class="media-left"> 
              <span class="fa fa-circle"></span> 
            </span> 
            <span class="media-left"> 
              <img src="https://www.nodegraph.se/wp-content/uploads/2019/04/Ellen-L%C3%B6fqvist-NodeGraph-400x400.png" style="width:30px"/>
            </span>    
            <span class="media-body">
            Upload Documents
            </span>
            <span class="media-right">
              <span class="label label-danger">Due Now</span>
            </span>
          </span>
        </a>
        <a class="list-group-item" href="#">
          <span class="media"> 
            <span class="media-left"> 
              <span class="fa fa-circle"></span> 
            </span> 
            <span class="media-left"> 
              <img...

SCSS

body {
  padding:15px;
}
.ui-yakabox-taskspanel {
  .list-group {
    margin:0;
  }
  .list-group-item {
    border-radius:0 !important;
    border-left:none;
    border-right:none;
    text-align:left;
  }
  .nav {
    margin-left:10px;
  }
  .nav-tabs>li>a {
    border-radius:0;
  }
  .nav-link.active {
    font-weight:bold;
  }
  .nav-link.active, .nav>li>a:focus, .nav>li>a:hover {
    border-bottom:2px solid #337ab7;
  }
  .fa-circle {
    color:#337ab7;
  }
  .progress {
    height: 15px;
    margin-top: 5px;
    border-radius: 3px;
    background: black; 
    width: 80px;
    margin-bottom: 0;
  }
  .progress .progress-bar {
    border-right: 0px solid #fff;
  }
  .nav-tabs {
    border-bottom: 0px solid #ddd;
  }
  .label {
    width: 80px;
    display: inline-block;
  }
  .media-left, .media-body, .media-right {
    vertical-align:middle;
    min-height:30px;
  }
  a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover,
  .nav>li>a:focus, .nav>li>a:hover{
    background-color:aliceblue;
  }
}

JavaScript

$('.progress').tooltip();