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

Diagramers Admin Template - React starter for admin dashboards.

import React from 'react';

const ImagesLetterThumbs = () => {
  return (
    <>
      <p>Size</p>
      <div className="mb-3">
        <div className="d-flex justify-content-start">
          <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-xl">
            <div className="fw-bold text-alternate">AA</div>
          </div>
          <div className="sw-5 sh-5 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-xl">
            <div className="fw-bold text-alternate">BB</div>
          </div>
          <div className="sw-6 sh-6 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-xl">
            <div className="fw-bold text-alternate">CC</div>
          </div>
          <div className="sw-7 sh-7 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-xl">
            <div className="fw-bold text-alternate">DD</div>
          </div>
          <div className="sw-8 sh-8 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-xl">
            <div className="fw-bold text-alternate">A</div>
          </div>
          <div className="sw-9 sh-9 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-xl">
            <div className="fw-bold text-alternate">B</div>
          </div>
        </div>
        <div className="d-flex justify-content-start">
          <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-md">
            <div className="fw-bold text-alternate">AA</div>
          </div>
          <div className="sw-5 sh-5 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-md">
            <div className="fw-bold text-alternate">BB</div>
          </div>
          <div className="sw-6 sh-6 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-md">
            <div className="fw-bold text-alternate">CC</div>
          </div>
          <div className="sw-7 sh-7 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-md">
            <div className="fw-bold text-alternate">DD</div>
          </div>
          <div className="sw-8 sh-8 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-md">
            <div className="fw-bold text-alternate">A</div>
          </div>
          <div className="sw-9 sh-9 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-md">
            <div className="fw-bold text-alternate">B</div>
          </div>
        </div>
      </div>
      <p>Colors</p>
      <div className="d-flex justify-content-start">
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-separator-light d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold">A</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-separator d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold">B</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-muted d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold">C</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-alternate d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold">D</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-body d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">E</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-primary d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">F</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-secondary d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">G</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-tertiary d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">H</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-quaternary d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">I</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-success d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">J</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-danger d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">K</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-warning d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">L</div>
        </div>
        <div className="sw-4 sh-4 me-1 mb-1 d-inline-block bg-info d-flex justify-content-center align-items-center rounded-xl">
          <div className="fw-bold text-white">M</div>
        </div>
      </div>
    </>
  );
};

export default ImagesLetterThumbs;