JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<div class = "wrappert">
    <div class = "wrapper">
        <div class="container-fluid">
            <div class="item" style="bottom: 100px"></div>
            <div class="item" style="bottom: 0px"></div>
            <div class="item" style="bottom: -100px"></div>
        </div>
    </div>
</div>

CSS

body, html {
 height: 100%;   
}

.container-fluid {
    position: relative;
    float: right;
    right: 45px;
}

.item {
    position: absolute;
    width: 45px;
    height: 45px;
    background-color: blue;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
}

.wrappert {
 height: 100%; 
 width: 100%;
display: table;    
}

.wrapper {
    vertical-align: middle;
    display: table-cell;
}

JavaScript

//alinhar verticalmente x elementos à direita do ecrã