JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
    <div class="row">
        <div class="col-md-12 header">
            <h1>MyTUT+</h1>
        </div>
        <div class="container">
            <br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br>
                        <br><br><br><br><br><br>
                            <br><br><br><br><br>
        <div id="sliding-foot" class="col-md-12 footer">
            <a data-toggle="collapse" data-parent="#sliding-foot" href="#collapseOne"> <h3> click me </h3></a>
        </div>
         <div id="collapseOne" class="panel-collapse collapse">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, adipisci, quibusdam, minima ratione voluptas quidem porro sint nobis odio cupiditate alias nisi. Magnam et fugiat labore eum at adipisci ex.</p>
        </div>
    </div>
</body>

CSS

.header {
    color:#FFF;
    background:#00b4ff;
    font-weight:700;
    padding:10px;
    text-align:center;
}

.footer {
    background:#00b4ff;
    font-weight:700;
    padding:10px;
    text-align:center;
}

.footer > a {
    color:#FFF;
}

p {
    padding:20px;
}