JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<div class="horizontal div1">
    <div class="vertical">
        <img src="https://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=200&r=pg&d=mm"/>
    </div>
</div>
<div class="horizontal div2">
    <div class="vertical">
        <img src="https://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=200&r=pg&d=mm"/>
    </div>
</div>
<div class="horizontal div3">
    <div class="vertical">
        <img src="https://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=200&r=pg&d=mm"/>
    </div>
</div>

CSS

div.horizontal {
    display: flex;
    justify-content: center;
}

div.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.div1 {
    background-color: #cff;
    width: 350px;
    height: 150px;
}

div.div2 {
    background-color: #fcf;
    width: 600px;
    height: 400px;
}

div.div3 {
    background-color: #ffc;
    width: 300px;
    height: 500px;
}

img { width: 100px; height: 100px; }