JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div class="links">
	<div class="links-header">
  -- header here-- 
	</div>
	<div class="links-slider">
	    <div class="left">&lt;</div>
	    <div class="photo">1</div>
	    <div class="photo">2</div>
	    <div class="photo">3</div>
	    <div class="right">&gt;</div>
	</div>
	<div class="links-footer">
  --footer here--
	</div>
</div>

</body>

SCSS

html, body 
{
    margin:0;
    height:100%;
    min-height:100%;
}

body 
{
    display: flex;
    flex-direction: column;
}

.links
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    .links-header
    {
        flex: 1 0 0;
    }
    .links-slider, .links-footer
    {
        flex: 2 0 0;
    }
    
}

.links-slider
{
    flex-direction: row;
    display: flex;
    align-items: stretch;
    
    .photo, .left, .right
    {
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .left, .right
    {
        flex-grow: 1;
    }
    .photo
    {
        flex: 0 0 30%;
    }
}