JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="container">
    <div id="categories">
    	<a href="#" title="Capacetes e peças de reposição">
            <div class="helmets">
                <div class="caption">
                    Capacetes e peças de reposição
                </div>
            </div>
        </a>
        
        <a href="#" title="Jaquetas para pilotagem">
            <div class="jackets">
                <div class="caption">
                    Jaquetas
                </div>
            </div>
        </a>
                
        <div class="smallBoxes">
        	<a href="#" title="Luvas">
                <div class="glove">
                    <div class="caption">
                        Luvas
                    </div>
                </div>
            </a>
            
            <a href="#" title="Botas e tênis para pilotagem">
                <div class="boot">
                    <div class="caption">
                        Botas
                    </div>
                </div>
            </a>
        </div>       
        
        <a href="#" title="Linha casual camisetas, bermudas, tênis e acessórios">         
            <div class="casual">
                <div class="caption">
                        Linha Casual
                </div>
            </div>
        </a>
        
        <a href="#" title="Produtos Off-Road capacetes, camisetas, calças, botas.">
            <div class="off-road">
                <div class="caption">
                        Produtos Off-Road
                </div>
            </div>
        </a>
        
        <a href="#" title="Produtos oficiais dos pilotos da MotoGP">
            <div class="motogp">
                <div class="caption">
                        Produtos oficiais dos pilotos da MotoGP
                </div>
            </div>
        </a>   
    </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

*{
	margin:0px auto;
	padding:0px;
    font-family:Arial, sans-serif;
}

#categories{
	height:532px;
	width:990px;
	margin:50px auto;
	overflow:hidden;
	box-sizing: padding-box;
}

#categories .helmets:hover .caption,
#categories .jackets:hover .caption,
#categories .glove:hover .caption,
#categories .boot:hover .caption,
#categories .casual:hover .caption,
#categories .off-road:hover .caption,
#categories .motogp:hover .caption{
    bottom:0px;
}

#categories .caption{
    padding:10px 5px;
    box-sizing: padding-box;
    height:auto;
    width:100%;
    float:left;
    font-size:16px;
    text-align:center;
    color:#FFF;
    position:absolute;
    bottom:-40px;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

#categories .helmets{
	border:1px solid lightgray;
	box-sizing:border-box;
	height:372px;
	width:365px;
	float:left;
	background:url(http://www.rs1.com.br/arquivos/category-helmets.jpg) no-repeat;
    position:relative;
    cursor:pointer;
	overflow:hidden;
}

#categories .jackets{
	border:1px solid lightgray;
	box-sizing:border-box;
	margin:0 7px;
	height:372px;
	width:160px;
	float:left;
	background:url(http://www.rs1.com.br/arquivos/category-jacket.jpg) no-repeat;
    position:relative;
	cursor:pointer;
	overflow:hidden;
}

#categories .smallBoxes{
	height:372px;
	width:262px;
	float:left;
    overflow:hidden;
    background-color:#FFF;
}

#categories .glove{
	height:182px;
	width:262px;
	float:left;
	border:1px solid lightgray;
	box-sizing:border-box;
	background:url(http://www.rs1.com.br/arquivos/category-glove.jpg);
    position:relative;
	overflow:hidden;
	cursor:pointer;
}

#categories .boot{
	margin-top:8px;
	height:182px;
	width:262px;
	float:left;
	border:1px solid...