JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div>
<nav class="nav top-bar">
  <div class="fixed-top">
    <div class="top-header">
      <i class="fa fa-search"></i> Monticello
    </div>

    <div class="sec-nav">
      <div class="race-button btn btn-sm btn-callout rounded-right">Race 1 <i class="fas fa-ellipsis-v"></i></div>

      <nav class="nav subnav" id="navbar">
        <a class="nav-item nav-link" href="#detail-section">Details</a>
        <a class="nav-item nav-link" href="#video-section">Video</a>
        <a class="nav-item nav-link" href="#wager-section">Wager</a>
        <a class="nav-item nav-link" href="#runner-section">Runners</a>
        <a class="nav-item nav-link" href="#handi-section">Handicapping</a>
      </nav>

      <!--
<nav class="sub-nav race-nav">
<span class="nav-item" ng-class="{'inactive': i < ctrl.track.currentRace.number, 'active': i == ctrl.raceNum, 'current': i == ctrl.track.currentRace.number}"
ng-repeat="i in ctrl._.range(1, ctrl.track.raceCount + 1)"
ng-click="ctrl.changeRace(i)">{{i}}</span>
</nav>
-->
    </div>
  </div>
</nav>

    <section class="card stripes" id="detail-section">
        <div class="card-header">
            <div class="row">
                <div class="col">Race Details</div>
                <div class="col align-self-end text-right">
                    <a data-toggle="collapse" href="#details" aria-expanded="true" aria-controls="details"><i class="fas fa-angle-down"></i></a>
                </div>
            </div>
        </div>

        <div class="card-body collapse show" id="details">
            <div...

CSS

body {
  position: relative;
}


/* Top Nav Bar */

.top-bar {
    height: 85px;
}


.top-bar .fixed-top {
    background-color: #3274be;
    color: #fff;
    height: 80px;
}

.top-header {
    font-size: 1.625rem;
    text-align: center;
    font-weight: bold;
}

.top-header svg {
    font-size: 1rem;
    font-weight: normal;
    position: absolute;
    top: 10px;
    left: 10px;
}
        
.sec-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}


.race-button {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    flex: 0 0 100px;
}

.subnav {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    margin-left: 10px;
    font-size: 16px;
}

.nav-item,
.nav-item:hover {
    display: inline-block;
    padding: 0 10px;
    border-bottom: 2px solid #29609c; /* dark blue */
    color: #fff;

}

.nav-item.active {
    margin-bottom: 2px;
    border-bottom: 2px solid #86baec; /* light blue */
    color: #fff;
}


/* Footer */
.tab-bar {
    background-color: #3274be;
    color: #86baec;
    height: 75px;
    font-size: 16px;
}

.tab-bar a i {
    font-size: 20px;
}

.tab-bar a.active {
    color: #fff;
}

.tab-bar .col {
    text-align: center;
}




/* helper classes */

.btn-callout {
    background-color: #f0c700;
    border-color: #f0c700;
    color: #10488e;
}

.btn-light,
.btn-outline-light:hover {
    background-color: #86baec;
    border-color: #86baec;
    color: #fff;
}

.btn-outline-light {
    background-color: transparent;
    border: 2px solid #86baec;
}

.stripes::before{
    content: '';
    background-image: linear-gradient(135deg, #285e99 25%, #3274be 25%, #3274be 50%, #285e99 50%, #285e99 75%, #3274be 75%, #3274be 100%);
    background-size: 12.00px 12.00px;
    height: 5px;
    position: absolute;
    width: 100%;
    top: -5px;
    left: 0;
}

.title-case {
    text-transform: capitalize;
}


body {
  background: #428acd;
}

/* Fancy Select...

JavaScript

$('body').scrollspy({ target: '#navbar', offset: 90 })