JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="col-md-4">
  <div class="blocos">
    <div class="h">
      <div class="bloco_1 bloco">
        <h2 class="titulo">Consumidor em 1º Lugar</h2>
        <div class="conteudo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique gravida erat, eu hendrerit purus vehicula quis. Suspendisse auctor in tellus a consequat. Morbi vitae arcu tempus, blandit erat eget, pellentesque lorem. </div>
      </div>
      <div class="h2 h">
        <div class="bloco bloco_2">
          <h2 class="titulo">Integridade</h2>
          <div class="conteudo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique gravida erat, eu hendrerit purus vehicula quis. Suspendisse auctor in tellus a consequat. Morbi vitae arcu tempus, blandit erat eget, pellentesque lorem. </div>
        </div>
        <div class="bloco_3 bloco">
          <h2 class="titulo">Meritocracia</h2>
          <div class="conteudo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique gravida erat, eu hendrerit purus vehicula quis. Suspendisse auctor in tellus a consequat. Morbi vitae arcu tempus, blandit erat eget, pellentesque lorem. </div>
        </div>
        <div class="bloco_4 bloco">
          <h2 class="titulo">Inovação</h2>
          <div class="conteudo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique gravida erat, eu hendrerit purus vehicula quis. Suspendisse auctor in tellus a consequat. Morbi vitae arcu tempus, blandit erat eget, pellentesque lorem. </div>
        </div>
      </div>
    </div>
    <div class="h">
      <div class="bloco_5 bloco">
        <h2 class="titulo">Visão de Dono</h2>
        <div class="conteudo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique gravida erat, eu hendrerit...

CSS

@import url('https://fonts.googleapis.com/css?family=Share:400i,700i');

.blocos{
  position: relative;
  transition: all .3s;
}

.blocos .h{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
  transition: all .3s;
}
.blocos .v{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
}

.blocos .bloco,
.blocos .big_bloco{
  cursor: pointer;
  color:white;
  background-color:rgba(0,0,0,.85);
  box-sizing: border-box;
  padding:10px;
  word-wrap: break-word;
  margin-bottom: 2.5%;
  transition: all .3s;
}

.blocos .bloco .conteudo,
.blocos .big_bloco .conteudo{
  opacity:0;
  max-height:0;
  font-size:14px;
  font-weight:normal;
  transition: all .3s;
  pointer-events:none;
}

.blocos .bloco .titulo,
.blocos .big_bloco .titulo{
  font-size: 30px;
  width: 100%;
  font-weight:normal;
  margin: 5px 0;
  font-family: 'Share', cursive;
  text-transform: uppercase;
}

.big_bloco{
  width: 100%;
  height: 100%;
  background-color:black;
  position:absolute;
  top:0;
  opacity: 0;
  transform: scale(0);
  pointer-events:none;
  transition: .5s all;
}
.blocos .big_bloco .conteudo{
  opacity: 1;
}
.big_bloco.mostrar{
  opacity:1;
  transform: scale(1);
  pointer-events:all;
}

/**Transição**/
.blocos .bloco:hover{
  transform: scale(1.1);
}

/**
BLOCOS INDIVIDUAIS
**/
.blocos .bloco_1{
  max-width: 32%;
  height: 250px;
  margin-bottom:0;
}

.blocos .h2{
  max-width: 66%;
  height: 250px;
  align-items: stretch;
}
.blocos .bloco_2{
  max-width: 100%;
  height: 30%;
}
.blocos .bloco_3{
  max-width: 65%;
  height: calc(70% - 2.5%);
  margin-bottom:0;
}

.blocos .bloco_4{
  max-width: 32%;
  height: calc(70% - 2.5%);
   margin-bottom:0;
}

.blocos .bloco_5{
  max-width: 50%;
  margin-bottom:0;
}
.blocos .bloco_6{
  max-width: 48%;
  margin-bottom:0;
}

JavaScript

$(".blocos .bloco").each(function(){
	$(this).click(function(){
  	var conteudo = $(this).html();
    $(".big_bloco").html(conteudo);
    $(".big_bloco").addClass("mostrar");
  });
});

$(".big_bloco").click(function(){
 	$(".big_bloco").removeClass("mostrar");
});