JSFiddle - React, Tailwind, and code Playground

by pmn4

HTML

<div class="checkout-items item-count-1">
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/07/BM134.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/1c/BM127.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/8c/BM212.jpg" /></div>
</div>

<div class="checkout-items item-count-2">
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/07/BM134.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/1c/BM127.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/8c/BM212.jpg" /></div>
</div>

<div class="checkout-items item-count-3">
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/07/BM134.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/1c/BM127.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/8c/BM212.jpg" /></div>
</div>

<div class="checkout-items item-count-4">
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/07/BM134.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/1c/BM127.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/8c/BM212.jpg" /></div>
</div>

<div class="checkout-items item-count-5">
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/07/BM134.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/1c/BM127.jpg" /></div>
    <div class="image-wrapper"><img src="https://cdn.rtrcdn.com/productimages/front/270x/8c/BM212.jpg" /></div>
</div>

SCSS

.checkout-items {
    // add a clearfix
    float: left;
    clear: both;
    
    @for $i from 1 through 9 {
        &.item-count-#{$i} {
            $overlap: 10px * $i;
            padding-left: $overlap;
            .image-wrapper {
                margin-left: -$overlap;
            }
        }
    }

    .image-wrapper {
        position: relative;
        height: 100px;
        width: 100px;
        overflow: hidden;
        float: right;
        border-radius: 100%;
        border: 1px solid white;
        box-shadow: 2px 2px 5px #888888;
        
        img {
            position: absolute;
            top: 50%;
            margin-top: -75px;
            height: 150px;
            width: auto;
        }
    }
}

JavaScript

// no javascript