JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div id="Container">
    <div id="Copyright">
        Copyright Foo web designs
    </div>
    <div id="Stretch">
      <!-- Other elements here -->
        <div>Element 1</div>
        <div>Element 2</div>
        <div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div><div>Element 1</div>
        <div>Element 2</div>
    </div>
</div>

CSS

*
{
    margin: 0;
    padding: 0;
}
html, body, #Container
{
    height: 100%;
    color: white;
}

#Container:before
{
    content: '';
    height: 100%;
    float: left;
}
#Copyright
{
    background-color: green;
}

#Stretch
{
    background-color: blue;
}
#Stretch:after
{
    content: '';
    display: block;
    clear: both;    
}

#Container, #Container > div
{
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}