JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<section id="section-3">
    <div class="container" id="btn1">
      <div class="info-slide">
        <h1>BUTTON 1</h1>
        <p>Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...</p>
      </div>
    </div>
    
    <div class="container" id="btn2">
      <div class="info-slide">
        <h1>BUTTON 2</h1>
        <p>Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...</p>
      </div>
    </div>
    
    <div class="container" id="btn3">
      <div class="info-slide">
        <h1>BUTTON 3</h1>
        <p>Thanks for your help...Thanks for your help...Thanks for your help...Thanks for your help...</p>
      </div>
    </div>
  </section>

CSS

#section-3 {
	position:relative;
	float:left;
	width:100%;
	height:300px;
	background:#202020;
	border-bottom:solid 1px #000;
}

#section-3 .container {
	position:relative;
	float:left;
	height:100%;
}

.info-slide {
	position:absolute;
	bottom:0;
	float:left;
	width:100%;
	height:60px;
	cursor:pointer;
	overflow:hidden;
	text-align:center;
	
	transition: height .4s ease-in-out;
    -webkit-transition: height .4s ease-in-out;
    -moz-transition: height .4s ease-in-out;

}

.info-slide:hover, .info-slide:active{
	height:300px;
}

#section-3 .container h1 {
	float:left;
	padding:20px 0;
	font-size:20px;
	width:100%;
	color:#12647f;
	background:#000;
    height:50px;
}

#section-3 .container p {
	float:left;
	padding:5% 10%;
	font-size:16px;
	bottom:0;
	width:80%;
	color:#fff;
}

#section-3 #btn1 {
	width:33%;
}

#section-3 #btn2 {
	width:34%;
	border-left:solid 1px #000;
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#section-3 #btn3 {
	width:33%;
	border-left:solid 1px #000;
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}