JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-drawer/1.0.6/css/bootstrap-drawer.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div id="drawer" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold open">

  <div class="drawer-contents">
    <button data-toggle="drawer" aria-controls="drawer" data-target="#drawer" class="btn btn-primary btn-sm close-btn" name="close-menu"><i class="fa fa-times"></i></button>

    <div class="drawer-heading">
      <img src="https://hrn-prod-web-mobile.azurewebsites.net/img/[email protected]" alt="">

      <div>
        <button class="btn btn-success ng-binding">$1,186.90</button>
      </div>
    </div>

    <ul class="drawer-nav logged-in">
    
      <li><a href="">🏇 Tracks</a></li>
      
      <li><a href=""><i class="fa fa-list-alt"></i> Transactions
						<span class="pull-right pill bg-info">8</span>
					</a>

        <ul class="bets">
        
          <li><a href="" class="bg-info"><i class="fa fa-clock-o"></i>Remington Park #9 : $2.00 WIN 3</a></li>

          <li><a href="" class="bg-info"><i class="fa fa-clock-o"></i>Remington Park #9 : $2.00 WIN 2</a></li>
          
          <li><a href="" class="bg-info"><i class="fa fa-clock-o"></i>Remington Park #9 : $2.00 WIN 1</a></li>
          
          <li><a href="" class="bg-info"><i class="fa fa-clock-o"></i>Remington Park #1 : $2.00 WIN 5</a></li>
          
          <li><a href="" class="bg-info"><i class="fa fa-clock-o"></i>Remington Park #1 : $2.00 WIN 4</a></li>
          
          <li><a href="" class="bg-info"><i class="fa fa-clock-o"></i>Remington Park #1 : $2.00 WIN 3</a></li>
          
          <li><a href="" class="bg-info"><i class="fa fa-clock-o"></i>Remington Park #1 : $2.00 WIN 2</a></li>
          
          <li><a href="" class="bg-info"><i...

CSS

.drawer-contents .close-btn {
  position: absolute;
  right: 0;
  z-index: 10;
}

.drawer-contents,
.drawer-controls .btn-primary:hover {
  background-color: #0033a0;
}

.drawer-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.pill {
  border-radius: 10px;
  color: #000;
  padding: 0 6px;
  margin: 0 2px;
  height: 20px;
  font-size: 13px;
  box-sizing: border-box;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
}

.drawer-nav li a {
  border: 1px solid #ccc;
  border-radius: 5px;
}

.drawer-nav li a,
.drawer-fullnav li a {
  color: #fff;
}

.drawer-nav .bets {
  font-size: 1.1rem;
  padding-left: 10px;
  margin-top: 5px;
  overflow-y: auto;
  max-height: 30vh;
}

.bets li a {
  color: #515151;
  padding: 5px 2px;
}

.bets li a.bg-danger {
  background-color: #f2dede;
}

.bets li a.bg-info {
  background-color: #d9edf7;
}

.bets li a.bg-success {
  background-color: #dff0d8;
}

.bets .payout {
  font-weight: bold;
}

.drawer-footer {
  position: absolute;
  bottom: 10px;
  color: #fff;
}