@diagramers/admin/src/views/blocks/tabulardata/TabularDataTeams.js

Diagramers Admin Template - React starter for admin dashboards.

import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';

export const TabularDataTeams = () => {
  return (
    <Card>
      <Card.Body className="mb-n3">
        <Row className="g-0 align-items-start align-content-start align-content-md-center align-items-md-center sh-13 sh-md-5 mb-3">
          <Col xs="auto" className="d-flex align-items-center mb-md-0">
            <div className="sw-12">
              <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 sh-4 ms-n3 bg-separator-light d-inline-flex justify-content-center align-items-center rounded-xl">
                <div className="fw-bold text-small text-primary cursor-default">6+</div>
              </div>
            </div>
          </Col>
          <Col>
            <Row className="g-0 h-100 align-items-start align-content-start align-content-md-center align-items-md-center">
              <Col md="6" className="d-flex flex-column pe-2 mb-2 mb-md-0">
                <div>Developer Team</div>
                <div className="text-muted text-small">5 Members</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end pe-3">
                <div>4 Tasks</div>
                <div className="text-small text-muted">Active</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end">
                <div>2 Tasks</div>
                <div className="text-small text-muted">On Hold</div>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row className="g-0 align-items-start align-content-start align-content-md-center align-items-md-center sh-13 sh-md-5 mb-3">
          <Col xs="auto" className="d-flex align-items-center mb-md-0">
            <div className="sw-12">
              <div className="sw-4 mb-1 d-inline-block">
                <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 sh-4 ms-n3 bg-separator-light d-inline-flex justify-content-center align-items-center rounded-xl">
                <div className="fw-bold text-small text-primary cursor-default">2+</div>
              </div>
            </div>
          </Col>
          <Col>
            <Row className="g-0 h-100 align-items-start align-content-start align-content-md-center align-items-md-center">
              <Col md="6" className="d-flex flex-column pe-2 mb-2 mb-md-0">
                <div>Design Team</div>
                <div className="text-muted text-small">3 Members</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end pe-3">
                <div>7 Tasks</div>
                <div className="text-small text-muted">Active</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end">
                <div>4 Tasks</div>
                <div className="text-small text-muted">On Hold</div>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row className="g-0 align-items-start align-content-start align-content-md-center align-items-md-center sh-13 sh-md-5 mb-3">
          <Col xs="auto" className="d-flex align-items-center mb-md-0">
            <div className="sw-12">
              <div className="sw-4 mb-1 d-inline-block">
                <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 ms-n3 bg-separator-light d-inline-flex justify-content-center align-items-center rounded-xl">
                <div className="fw-bold text-small text-primary cursor-default">3+</div>
              </div>
            </div>
          </Col>
          <Col>
            <Row className="g-0 h-100 align-items-start align-content-start align-content-md-center align-items-md-center">
              <Col md="6" className="d-flex flex-column pe-2 mb-2 mb-md-0">
                <div>Management</div>
                <div className="text-muted text-small">1 Member</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end pe-3">
                <div>2 Tasks</div>
                <div className="text-small text-muted">Active</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end">
                <div>6 Tasks</div>
                <div className="text-small text-muted">On Hold</div>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row className="g-0 align-items-start align-content-start align-content-md-center align-items-md-center sh-13 sh-md-5 mb-3">
          <Col xs="auto" className="d-flex align-items-center mb-md-0">
            <div className="sw-12">
              <div className="sw-4 mb-1 d-inline-block">
                <img src="/img/profile/profile-7.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-8.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
              </div>
              <div className="sw-4 sh-4 ms-n3 bg-separator-light d-inline-flex justify-content-center align-items-center rounded-xl">
                <div className="fw-bold text-small text-primary cursor-default">1+</div>
              </div>
            </div>
          </Col>
          <Col>
            <Row className="g-0 h-100 align-items-start align-content-start align-content-md-center align-items-md-center">
              <Col md="6" className="d-flex flex-column pe-2 mb-2 mb-md-0">
                <div>Copywriters</div>
                <div className="text-muted text-small">3 Member</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end pe-3">
                <div>3 Tasks</div>
                <div className="text-small text-muted">Active</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end">
                <div>2 Tasks</div>
                <div className="text-small text-muted">On Hold</div>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row className="g-0 align-items-start align-content-start align-content-md-center align-items-md-center sh-13 sh-md-5 mb-3">
          <Col xs="auto" className="d-flex align-items-center mb-md-0">
            <div className="sw-12">
              <div className="sw-4 mb-1 d-inline-block">
                <img src="/img/profile/profile-9.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-10.webp" className="img-fluid rounded-xl border border-2 border-foreground" alt="thumb" />
              </div>
              <div className="sw-4 sh-4 ms-n3 bg-separator-light d-inline-flex justify-content-center align-items-center rounded-xl">
                <div className="fw-bold text-small text-primary cursor-default">1+</div>
              </div>
            </div>
          </Col>
          <Col>
            <Row className="g-0 h-100 align-items-start align-content-start align-content-md-center align-items-md-center">
              <Col md="6" className="d-flex flex-column pe-2 mb-2 mb-md-0">
                <div>UX Team</div>
                <div className="text-muted text-small">4 Member</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end pe-3">
                <div>1 Tasks</div>
                <div className="text-small text-muted">Active</div>
              </Col>
              <Col xs="auto" md="3" className="d-flex flex-column align-items-start align-items-md-end">
                <div>8 Tasks</div>
                <div className="text-small text-muted">On Hold</div>
              </Col>
            </Row>
          </Col>
        </Row>
      </Card.Body>
    </Card>
  );
};