JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<link rel="stylesheet" href="https://www.lokumatolyesi.com.tr/catalog/view/javascript/bootstrap/css/bootstrap.min.css">
<script src="https://www.lokumatolyesi.com.tr/catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.lokumatolyesi.com.tr/catalog/view/theme/lokumatolyesi/stylesheet/stylesheet.css?v=1.12">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/FontAwesome.otf"></script>
<script src="https://www.lokumatolyesi.com.tr/catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
<div class="mobile-bottom">
    <ul>
    	<li>
    		<a href="#">
    			<i class="fa fa-desktop"></i> <span>Ana Sayfa</span>
    		</a>
    	</li>
		<li>
    		<a href="#">
    			<i class="fa fa-diamond"></i> <span>Ürünler</span>
    		</a>
    	</li>
		<li>
    		<a href="#">
    			<i class="fa fa-shopping-basket"></i> <span>Sepetim</span>
    		</a>
    	</li>
		<li>
    		<a href="#">
    			<i class="fa fa-user-circle-o"></i> <span>Hesabım</span>
    		</a>
    	</li>
    </ul>
</div>

CSS

@media screen and (max-width:767px) {
	.mobile-bottom {
		float: left;
		width: 100%;
		position:fixed;
		bottom: 0;
		left: 0;
		z-index: 1002;
		background: #fff;
		padding: 10px 0 5px 0;
		border-top: 1px solid #cecece;
	}
	.mobile-bottom ul li{
		float: left;
		width: 25%;
	}
	.mobile-bottom ul li a{
		float: left;
		width: 100%;
		text-align:center;
		font-size: 12px;
		color: #000;
		position: relative;
	}
	.mobile-bottom ul li a i{
		display: block;
		margin: 0 auto 3px;
		font-size: 18px;
	}
}

JavaScript

$(window).resize(function() {
	if ($(window).width() < 560) {
		console.log('test');
	}
});