JSFiddle - React, Tailwind, and code Playground

by Millio

HTML

<div class="shape">
        <div class="wrapper__shape">
            <img class="shape__photo" src="images/Combined-Shape1.png" alt="">
            <div class="shape__text" >1"</div>
            <img class="shape__photo" src="images/Combined-Shape2.png" alt="">
            <div class="shape__text" >f/16</div>
            <img class="shape__photo" src="images/Combined-Shape3.png" alt="">
            <div class="shape__text" >400</div>
            <img class="shape__photo" src="images/Combined-Shape4.png" alt="">
            <div class="shape__text" >Japan</div>
        </div>
    </div>

CSS

.wrapper__shape {
    position: absolute;
    right: 40px;
    display: flex;
    color: @white;
    max-height: 16px;
}
.shape__text {
    margin-left: 6px;
    margin-right: 16px;
}
.shape__photo {
    max-width: 32px;
    position: relative;
    bottom: -5px;
}
.shape {
    background-image: url(../../images/fon.png);
}