@diagramers/admin/src/views/blocks/images/ImagesStacked.js

Diagramers Admin Template - React starter for admin dashboards.

import React from 'react';

const ImagesStacked = () => {
  return (
    <>
      <div>
        <div className="sw-6 mb-1 d-inline-block">
          <img src="/img/profile/profile-1.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-6 mb-1 d-inline-block ms-n4">
          <img src="/img/profile/profile-2.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-6 mb-1 d-inline-block ms-n4">
          <img src="/img/profile/profile-3.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-6 mb-1 d-inline-block ms-n4">
          <img src="/img/profile/profile-4.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-6 mb-1 d-inline-block ms-n4">
          <img src="/img/profile/profile-5.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-6 mb-1 d-inline-block ms-n4">
          <img src="/img/profile/profile-6.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-6 sh-6 d-inline-block mb-1 ms-n4">
          <div className="w-100 h-100 bg-separator-light d-inline-block rounded-xl border border-2 border-foreground align-middle d-inline-flex justify-content-center align-items-center">
            <div className="fw-bold text-primary">10+</div>
          </div>
        </div>
      </div>
      <div>
        <div className="sw-4 mb-1 d-inline-block">
          <img src="/img/profile/profile-1.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-4 mb-1 d-inline-block ms-n3">
          <img src="/img/profile/profile-2.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-4 mb-1 d-inline-block ms-n3">
          <img src="/img/profile/profile-3.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-4 mb-1 d-inline-block ms-n3">
          <img src="/img/profile/profile-4.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-4 mb-1 d-inline-block ms-n3">
          <img src="/img/profile/profile-5.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-4 mb-1 d-inline-block ms-n3">
          <img src="/img/profile/profile-6.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
        </div>
        <div className="sw-4 sh-4 d-inline-block mb-1 ms-n3">
          <div className="w-100 h-100 bg-separator-light d-inline-block rounded-xl border border-2 border-foreground align-middle d-inline-flex justify-content-center align-items-center">
            <div className="fw-bold text-primary">10+</div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ImagesStacked;