JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div id="wrapper_slider">
    <div class="outer">
        <div class="ontop">
            
             <h1>hey buddy</h1>
            <div id="bar">
                zzz
             </div>

        </div>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
                <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                <li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item">
                    <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"...

CSS

.outer {
    position: relative;
}
.ontop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    z-index: 99999;
    pointer-events:none;
}

#wrapper_slider{
    height: 360px;
    background-color: red;
    border: solid red 10px;
}


#bar{
    height: 40px;
    background-color: green;
    
}