Paper with 2 columns

<div class="t1 flex flex-col justify-content-between w-full bg-c-gray-250 min-h-100vh"> <div class="t1 flex flex-col w-full"> <div class="t1 flex flex flex-col w10:flex-row w-full w6:max-w-640 w10:max-w-960 mx-auto w6:my-32 bg-c-white w6:shadow-8"> <div class="t1 flex flex-col w-full w10:w-280 bg-c-gray-50"> <div class="t1 w10:mt-32"> <div class="t1 flex flex-start-center h-64 w10:h-auto px-16 py-2 color-text hover:underline">Home</div> <div class="t1 hidden w10:block color-text px-16 py-2 hover:underline">Other page 2</div> <div class="t1 hidden w10:block color-text px-16 py-2 hover:underline">Other page 3</div> </div> </div> <div class="t1 flex flex-col w-full w10:w-680 py-32 w10:py-48 px-16 w10:px-48 min-h-512"> <span class="t1 font-32 w6:font-40 color-text">Content goes here</span> <span class="t1 color-text mt-16 w6:mt-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </span> </div> </div> </div> </div>

<div class="t1 flex flex-col justify-content-between w-full bg-c-red min-h-100vh"> <div class="t1 flex flex-col w-full"> <div class="t1 flex flex flex-col w10:flex-row w-full w6:max-w-640 w10:max-w-960 mx-auto w6:my-32 bg-c-white w6:shadow-8"> <div class="t1 flex flex-col w-full w10:w-280 bg-c-red-100"> <div class="t1 w10:mt-32"> <div class="t1 flex flex-start-center h-64 w10:h-auto px-16 py-2 color-red hover:underline">Home</div> <div class="t1 hidden w10:block color-red px-16 py-2 hover:underline">Other page 2</div> <div class="t1 hidden w10:block color-red px-16 py-2 hover:underline">Other page 3</div> </div> </div> <div class="t1 flex flex-col w-full w10:w-680 py-32 w10:py-48 px-16 w10:px-48 min-h-512"> <span class="t1 font-32 w6:font-40 color-red">Content goes here</span> <span class="t1 color-text mt-16 w6:mt-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </span> </div> </div> </div> </div>

<div class="t1 flex flex-col justify-content-between w-full bg-c-gray-900 min-h-100vh"> <div class="t1 flex flex-col w-full"> <div class="t1 flex flex flex-col w10:flex-row w-full w6:max-w-640 w10:max-w-960 mx-auto w6:my-32 bg-c-gray-800 w6:shadow-8"> <div class="t1 flex flex-col w-full w10:w-280 bg-c-gray-850"> <div class="t1 w10:mt-32"> <div class="t1 flex flex-start-center h-64 w10:h-auto px-16 py-2 color-gray-300 hover:underline">Home</div> <div class="t1 hidden w10:block color-gray-300 px-16 py-2 hover:underline">Other page 2</div> <div class="t1 hidden w10:block color-gray-300 px-16 py-2 hover:underline">Other page 3</div> </div> </div> <div class="t1 flex flex-col w-full w10:w-680 py-32 w10:py-48 px-16 w10:px-48 min-h-512"> <span class="t1 font-32 w6:font-40 color-gray-100">Content goes here</span> <span class="t1 color-gray-200 mt-16 w6:mt-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </span> </div> </div> </div> </div>

<div class="t1 flex flex-col justify-content-between w-full bg-c-gray-250 min-h-100vh"> <div class="t1 flex flex-col w-full"> <div class="t1 flex flex flex-col w10:flex-row-reverse w-full w6:max-w-640 w10:max-w-960 mx-auto w6:my-32 bg-c-white w6:shadow-8"> <div class="t1 flex flex-col w-full w10:w-280 bg-c-gray-50"> <div class="t1 w10:mt-32"> <div class="t1 flex flex-start-center h-64 w10:h-auto px-16 py-2 color-text hover:underline">Home</div> <div class="t1 hidden w10:block color-text px-16 py-2 hover:underline">Other page 2</div> <div class="t1 hidden w10:block color-text px-16 py-2 hover:underline">Other page 3</div> </div> </div> <div class="t1 flex flex-col w-full w10:w-680 py-32 w10:py-48 px-16 w10:px-48 min-h-512"> <span class="t1 font-32 w6:font-40 color-text">Content goes here</span> <span class="t1 color-text mt-16 w6:mt-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </span> </div> </div> </div> </div>

<div class="t1 flex flex-col justify-content-between w-full bg-c-red min-h-100vh"> <div class="t1 flex flex-col w-full"> <div class="t1 flex flex flex-col w10:flex-row-reverse w-full w6:max-w-640 w10:max-w-960 mx-auto w6:my-32 bg-c-white w6:shadow-8"> <div class="t1 flex flex-col w-full w10:w-280 bg-c-red-100"> <div class="t1 w10:mt-32"> <div class="t1 flex flex-start-center h-64 w10:h-auto px-16 py-2 color-red hover:underline">Home</div> <div class="t1 hidden w10:block color-red px-16 py-2 hover:underline">Other page 2</div> <div class="t1 hidden w10:block color-red px-16 py-2 hover:underline">Other page 3</div> </div> </div> <div class="t1 flex flex-col w-full w10:w-680 py-32 w10:py-48 px-16 w10:px-48 min-h-512"> <span class="t1 font-32 w6:font-40 color-red">Content goes here</span> <span class="t1 color-text mt-16 w6:mt-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </span> </div> </div> </div> </div>

<div class="t1 flex flex-col justify-content-between w-full bg-c-gray-900 min-h-100vh"> <div class="t1 flex flex-col w-full"> <div class="t1 flex flex flex-col w10:flex-row-reverse w-full w6:max-w-640 w10:max-w-960 mx-auto w6:my-32 bg-c-gray-800 w6:shadow-8"> <div class="t1 flex flex-col w-full w10:w-280 bg-c-gray-850"> <div class="t1 w10:mt-32"> <div class="t1 flex flex-start-center h-64 w10:h-auto px-16 py-2 color-gray-300 hover:underline">Home</div> <div class="t1 hidden w10:block color-gray-300 px-16 py-2 hover:underline">Other page 2</div> <div class="t1 hidden w10:block color-gray-300 px-16 py-2 hover:underline">Other page 3</div> </div> </div> <div class="t1 flex flex-col w-full w10:w-680 py-32 w10:py-48 px-16 w10:px-48 min-h-512"> <span class="t1 font-32 w6:font-40 color-gray-100">Content goes here</span> <span class="t1 color-gray-200 mt-16 w6:mt-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </span> </div> </div> </div> </div>