JSFiddle - React, Tailwind, and code Playground

by domwebdev

HTML

<div class="container">

	<div class="black">
    
    <div class="text">
    
    	Invert
    
    </div>
    
    </div>
    
    <div class="white">
    
    <div class="text">
    
    	Invert
    
    </div>
    
    </div>

</div>

CSS

.container{position:relative; width:200px; height:100px; display:block; margin:0px; padding:0px; }

    .black, .white{position:absolute; left:0px; background:#000; width:200px; height:50px; margin:0px; padding:0px; overflow:hidden; }

    .black{top:0px; }

    .white{bottom:0px; background:#fff; }

    .text{position:absolute; color:#fff; font-size:70px; padding:0px; }

    .black .text{bottom:-40px; }

    .white .text{top:-40px; color:#000; }