JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<style>
* {margin: 0; padding: 0;}
 
html, body {height: 100%;}
 
#Wrap1 {
    min-height: 100%;
    height:1px;
    background-color: orange;}
 
#Wrap2 {
    height: 90%;
    background-color: red;}
</style>
</head>
 
<body>
<div id="Wrap1">
<div id="Wrap2">
 
<h1>Esta es la columna principal</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Curabitur suscipit sodales elit, ac blandit elit malesuada iaculis. Donec tristique, turpis eget mattis accumsan, mi neque aliquet dolor, sit amet pulvinar erat turpis eget magna. Nunc a lorem id ante mollis tincidunt. Proin ut ipsum lectus. Integer posuere arcu ut orci tincidunt condimentum. Ut nisi felis, gravida ac viverra eget, porttitor ac arcu.</p>
 
</div><!-- Fin #Warp2 -->
</div><!-- Fin #Wrap1 -->
</body>
</html>