JSFiddle - React, Tailwind, and code Playground

by kpowz

HTML

<footer>
    <div>
    Sitemap
    <ul role="navigation sitemap">
    <li href="downloads">About</li>
    <li href="docs">Jobs</li>
    <li href="news">Help</li></ul>
    </div>
    
    <div>
    Partners
    <ul >
    <li href="downloads">BOA</li>
    <li href="docs">SEC</li>
    <li href="news">PPC</li></ul>  
    </div>
    
    <div>
    Powered by
    <ul >
    <li href="downloads">AWS</li>
    <li href="docs">Docker</li>
    <li href="news">Kafka</li></ul> 
    </div>
    
    <div class='flex-col'>
        <details>
            <summary>Glossary</summary>
            <dl>
                <dt>1</dt> <dd>one</dd>
                <dt>2</dt> <dd>two</dd>
                <dt>2</dt> <dd>three</dd>
            </dl>
        </details>
        <small class='omega'>&copy; 2015</small>
    </div>
</footer>

CSS

footer{
    display: flex;
        justify-content: space-around;

}

footer .flex-col{
    display: flex;
    flex: 1;
    flex-direction: column;
}

.omega {
  display: flex;
  flex: 1;
  align-items: flex-end;
}