JSFiddle - React, Tailwind, and code Playground

by Jonathan McGlone

HTML

<div class="footer">
    
    <div class="col ump"> 
        <a href="http://press.umich.edu" title="University of Michigan Press"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/ump-footer.png" alt="University of Michigan Press"/></a>
    </div>
    
    <div class="col text">
    <p>Product of <a href="http://www.publishing.umich.edu">Michigan Publishing</a>, <a href="http://www.lib.umich.edu/">University of Michigan Library</a>  <span class="bull">&#8226;</span>  <a href="mailto:[email protected]">[email protected]</a>  <span class="bull">&#8226;</span> ISBN 978-0-472-XXXXX-X</p>
    </div>
        
    <div class="col mpub"> 
        <a href="http://www.publishing.umich.edu" title="Michigan Publishing"><img src="http://www.publishing.umich.edu/wp-content/themes/mpub-bootstrap/library/img/mpub-footer.png" alt="Michigan Publishing"/></a>
    </div>
    
</div>

CSS

.footer {
    height: 75px;
    text-align: center;
    padding: 15px;
    line-height: 1.5em;
    width: auto;
    z-index: 1;
    font-size: 13px;
}

.footer .col {
    position: relative;
    float: left;
}

.footer .ump {
    width: 26px;
}

.footer .mpub {
    width: 64px;
    position: absolute;
    right: 10px;
}

.footer .text {
    width: 90%;
}

.footer p {
    padding-top: 7px;
    margin-bottom: 10px;
}
.footer .bull {
    margin: 0 1em;
    color: #BBB;
}
.footer .ump-logo {
    float: left;
}
.footer .mpub-logo {
    float: right;
}
}