JSFiddle - React, Tailwind, and code Playground

by Guilherme de Jesus Santos

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
			<!--
			CSS
			============================================= -->
			<link rel="stylesheet" href="css/bootstrap.css">		
			<link rel="stylesheet" href="css/main.css">

			<style>
			.single-gallery img{
				height: 215px;
				width: 350px;
			}
			</style>
</head>
<body>


			<!-- Galeria-->
            <section class="gallery-area section-gap" id="gallery">
                <div class="container">
					<div class="row d-flex justify-content-center">
						<div class="menu-content pb-70 col-lg-8">
							<div class="title text-center">
								<h1 class="mb-10">Principais marcas que trabalhamos</h1>
							</div>
						</div>
					</div>	
                    
                      <ul class="filter-wrap filters col-lg-12 no-padding">	
			   			<li class="active" data-filter="*"></li>						  
                        <li  data-filter=".brahma">Brahma</li>					 
                        <li data-filter=".colorado">Colorado</li>
                        <li data-filter=".heineken">Heineken</li>
                        <li data-filter=".stella">Stella</li>
                        <li data-filter=".ecobier">Ecobier</li>
                        <li data-filter=".itaipava">Itaipava</li>
			   			<li data-filter=".lecker">Lecker</li>
                    </ul>
                    
                    
                    <div class="filters-content">
                        <div class="row grid">
                            <div class="col-lg-4 col-md-6 col-sm-6 all brahma">
                            	<div...

CSS

gallery-area{background:#f9f9ff}.gallery-area .primary-btn{color:#fff;background-color:#f42f2c;margin-left:auto;margin-right:auto}.filter-wrap{background:#fff;border-radius:10px;box-shadow:0px 10px 30px 0px rgba(153,153,153,0.2)}.gallery-area .filters{text-align:center}.gallery-area .filters{padding:0;overflow:hidden}.filter-wrap{display:table}.filter-wrap li{display:table-cell;border-right:1px solid #edf6ff}.filter-wrap li:last-child{border:none}.gallery-area .filters li{padding:40px 0px;max-width:184px;cursor:pointer;position:relative;color:#222;font-size:12px;font-weight:500}@media (max-width: 768px){.gallery-area .filters li{padding:20px 0px}}@media (max-width: 767px){.gallery-area .filters li{padding:12px 0px;font-size:10px}}.gallery-area .filters li:last-child{border-right:none}.gallery-area .filters li.active{color:#fff;background:#f42f2c}.gallery-area .filters-content{margin-top:50px}.gallery-area .filters-content .show{opacity:1;visibility:visible;transition:all 350ms}.gallery-area .filters-content .hide{opacity:0;visibility:hidden;transition:all 350ms}.gallery-area .filters-content .item{text-align:center;cursor:pointer;margin-bottom:30px}.gallery-area .filters-content .item img{border-radius:10px}.gallery-area .filters-content .p-inner{padding:20px 0px;text-align:center}.gallery-area .filters-content .item .p-inner .cat{font-size:13px}.gallery-area .filters-content .item img{width:100%}.gallery-area .filters-content{margin-top:50px}.gallery-area .filters-content .show{opacity:1;visibility:visible;transition:all 350ms}.gallery-area .filters-content .hide{opacity:0;visibility:hidden;transition:all 350ms}.gallery-area .filters-content .item{text-align:center;cursor:pointer;margin-bottom:30px}.gallery-area .filters-content .item img{border-radius:10px}.gallery-area .filters-content .p-inner{padding:20px 0px;text-align:center}.gallery-area .filters-content .item .p-inner .cat{font-size:13px}.gallery-area .filters-content .item...