JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<!-- view-controller -->
<div class="view-controller bottom">
    
    <!-- view-controller view -->
    <div class="view-controller-view">
        <a href="#">Toggle</a>
    </div>
    
    <!-- nested view -->
    <div class="fonts">
        
    </div>
</div>

CSS

body {
    font-family: sans-serif;   
	font-size: 12px;
}

.view-controller {
    position: absolute;
    width: 100%;
}

.view-controller.top {
	top: 0;   
}

.view-controller.bottom {
	bottom: 0;   
}

.view-controller-view {
    padding: 20px;
    background: blue;
}

.view-controller-view a {
 	color: #fff; 
    font-weight: bold;
    text-decoration: none;
}

.fonts {
    width: 100%;
    height: 100px;
    background: red;
	position: absolute;
    z-index: -1;
    -webkit-transition: all 0.5s;
}

.top .fonts { top: -100%; }
.top.showFonts .fonts { top: 100%; }
.bottom .fonts { bottom: -100%; }
.bottom.showFonts .fonts { bottom: 100%; }

JavaScript

// Simple toggle of state
$('a').on('click', function(e){
   e.preventDefault();
   $('.view-controller').toggleClass('showFonts');
});