JSFiddle - React, Tailwind, and code Playground

HTML

<body class="home">

<div id="page">
		<div id="text">
		
		<div id="text1">
		<h3>Welcome</H3>
		<hr>
		<p id="txt">DOLPH LUNDGREN DOLPH LUNDGREN DOLPH LUNDGREN DOLPH LUNDGREN DOLPH LUNDGREN DOLPH LUNDGREN .</br>
		DOLPH LUNDGREN DOLPH LUNDGREN DOLPH LUNDGREN DOLPH LUNDGREN .</br>
		DOLPH LUNDGREN ÄR COOL!
		.</p><hr>
		</div>
		
		<div id="text3">
		<h4>text3</H4>
		<hr>
		<p id="txt">blablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba blababalla blablablablablab lablabla balba blaba...

CSS

body, html {
font-family: Helvetica, Arial, sans-serif;
font-size:14px;
margin:auto 0px;
padding:auto 0px;
background-color: #efefef ;
height: 100%;
} 
#page {
width:630px;
min-height: 100%;
margin-left: auto ;
margin-right: auto ;
word-wrap: break-word;
border:1px solid black;
-webkit-box-flex:1;
-moz-box-flex:1;
    box-flex:1;
}
#text{
text-align:left;
max-height: 100%;
color:#fff;
transition: 1s;
clear: left;
word-wrap: break-word;
margin-top:60px;
}
#text1{
width:589px;
height:100%;
overflow:hidden;
transition:height 0.5s;
margin-bottom:0px;
padding:20px;
background-color:#fefefe;
margin-top:0px;
border:1px solid #bbb;

}
#text3{
height:75px;
width:589px;
overflow:hidden;
transition:height 0.5s;
margin-bottom:0px;
padding:20px;
background-color:#fefefe;
margin-top:10px;
border:1px solid #bbb;
border-bottom:0px;
}
#txt, h4, h3 {
color:#000;
padding-bottom:0px;
}
#text3:hover {
height:560px; 
margin-bottom:40px;
border:1px solid #bbb;
}
#text3:hover +#t3f{
display:none;
margin-bottom:50px;
}
#t3f:hover +#text3{
display:visible;
margin-bottom:50px;
}
#t3f{
width:630px;
color:#fff;
background-color: rgb(204, 24, 30);
margin:0px;
padding:0px;
text-align:center;
font-size:70%;
/* box-shadow:0 0px 5px #555; */
border:1px solid #bbb;
border-top:0px;
}
.pil1{
font-size:40%;
vertical-align:text-top;
}
.pil2{
font-size:60%;
padding-top:0px;
vertical-align:text-top;
}
hr{ 
/* border: 1px;
height: 1px;  */
background: #bbb; 
background-image: -webkit-linear-gradient(left, #bbb, #555, #bbb); 
background-image: -moz-linear-gradient(left, #bbb, #555, #bbb); 
background-image: -ms-linear-gradient(left, #bbb, #555, #bbb); 
background-image: -o-linear-gradient(left, #bbb, #555, #bbb); }