JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<ul class="servico cor4">
				<li class="servico-item-off">
					<div class="servico-button">
						<span class="servico-icone"></span>
						<p class="servico-title">Comercial</p>
					</div>
					<div class="servico-conteudo">
						<h1>Comercial</h1>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam gravida commodo suscipit. Nullam fringilla sodales odio, tristique convallis ante lacinia vitae. Fusce ipsum ipsum, rutrum quis turpis eget, tempus mattis ante. Fusce leo velit, commodo quis sem ut, eleifend commodo nibh. Nam eleifend odio eget purus vestibulum euismod. Fusce ut orci non urna accumsan accumsan non at libero.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et arcu sem.
						</p>
					</div>
				</li>
				<li class="servico-item-off">
					<div class="servico-button">
						<span class="servico-icone"></span>
						<p class="servico-title">Home Theater</p>
					</div>
					<div class="servico-conteudo">
						<h1>Home Theater</h1>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam gravida commodo suscipit. Nullam fringilla sodales odio, tristique convallis ante lacinia vitae. Fusce ipsum ipsum, rutrum quis turpis eget, tempus mattis ante. Fusce leo velit, commodo quis sem ut, eleifend commodo nibh. Nam eleifend odio eget purus vestibulum euismod. Fusce ut orci non urna accumsan accumsan non at libero.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et arcu sem.
						</p>
					</div>
				</li>
				<li class="servico-item-off">
					<div class="servico-button">
						<span class="servico-icone"></span>
						<p class="servico-title">Sala</p>
					</div>
					<div class="servico-conteudo">
						<h1>Sala</h1>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam gravida commodo suscipit. Nullam fringilla sodales odio, tristique convallis ante lacinia vitae. Fusce ipsum...

CSS

li{list-style-type:none;}
.servico {
  overflow: hidden;
  position: relative;
    width:960px;
}
.servico-item-on, .servico-item-off{
  float: left;
  margin-right: 2px;
  cursor: pointer;
}
.servico-item-on{
  position: absolute;
  z-index: 9;
}
.servico-item-off{
  position: relative;
  z-index: 2;
}

.servico-item-off:last-child {
  margin-right: -6px!important;
}

.servico-conteudo{
  width: 822px;
  height: 386px;
  background: #663300;
  display: block;
  overflow: hidden;
  color: #fff;
  cursor: default;
  margin-left: 2px;
  position: absolute;
  z-index: 9;
  left: 136px;
  top: 0px;
  display: none;
}

.servico-conteudo h1{
  z-index: 5;
  color: #fff;
  display: block;
  margin: 78px 0px 0px 112px;
}
.servico-conteudo p{
  z-index: 5;
  color: #fff;
  display: block;
  margin-left: 112px;
  padding-right: 76px;
  text-align: justify;
}
.servico-item div {
    float: left;
}
.servico-button {
    width: 136px;  height: 386px;  text-align: center;  background-color: #d4ba88;
    /* margin-right: 2px; */
    box-sizing: border-box;
    padding: 155px 0px;
}

.servico-icone {
  background: url(../img/sprites.png) no-repeat 12px -96px;
  display: block;
  width: 100%;
  height: 45px;
  display: none;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.servico-button:hover .servico-icone, .servico-item-on .servico-icone {
  display: block;
  opacity: 1;
}

JavaScript

$('.servico li').click(function(){
    //alert('ok');
    if($(this).prop('class') == 'servico-item-off'){
        $(this).removeClass('servico-item-off').addClass('servico-item-on');
        $(this).find('.servico-conteudo').fadeIn('500');
    } else {
        $(this).find('.servico-conteudo').fadeOut('500');
        $(this).removeClass('servico-item-on').addClass('servico-item-off');
    }
});