JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="outer">
    <div class="inner">
        A<br/>B<br/>C
    </div>
</div>

<br/><br/>

<div class="outer cropped">
    <div class="inner">
        A<br/>B<br/>C
    </div>
</div>

CSS

div {
    text-align: center;
    color: white;
}

.outer {
    background: grey;
    padding: 20px;
}

.inner {
    background: blue;
}

.outer.cropped {
    overflow: hidden;
    height: 40px;
}

.outer.cropped .inner {
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    transform: translateY(-40px);
}