<section>
Pull the tab down.
<div class="tab">
<div class="tab-content">
Surprise!
</div>
<textarea></textarea>
</div>
</section>
@import "compass/css3";
body {
background: cornflowerblue;
}
section {
width: 60%;
margin: 20px auto;
min-height: 80px;
background: white;
position: relative;
text-align: center;
padding-top: 120px;
overflow: hidden;
box-shadow: 0 1px 4px black;
}
.tab {
width: 100%;
max-height: 100px;
position: absolute;
bottom: 0;
textarea {
border: 0;
width: 12px;
height: 14px;
resize: vertical;
max-height: 100px;
background: none;
&::-webkit-resizer {
background: red;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
}
}
.tab-content {
position: absolute;
top: 20px;
left: 0;
width: 100%;
background: white;
font-size: 50px;
}
View Compiled
/*
No JavaScript!
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.