JSFiddle - React, Tailwind, and code Playground

by Caitlin Allie

HTML

<div class="account entity-record-tab">
    <div class="entity-record-tab-section">
        <div class="user-info-header">
            <div>
                <h4>Account Information</h4>
            </div>
        </div>

        <div class="grid-container">
            <div class="grid-item">
                <div class="field-label">Name</div>
                <div class="field-value">Caitlin Allie</div>
            </div>

            <div class="grid-item">
                <div class="field-label">CRD</div>
                <div class="field-value">123</div>
            </div>

            <div class="grid-item">
                <div class="field-label">Registered Firms</div>
                <div class="field-value">Registered firms go here</div>
            </div>

            <div class="grid-item first-row-item">
                <div class="field-label">Primary Email</div>
                <div class="field-value">primaryemail.com</div>
            </div>

            <div class="grid-item">
                <div class="field-label">Contact Email</div>
                <div class="field-value">[email protected]</div>
            </div>

            <div class="grid-item first-row-item">
                <div class="field-label">Password</div>
                <div class="field-value">change it</div>
            </div>
        </div>

    </div>
</div>

CSS

.field-label {
        text-transform: uppercase;
        color: black;
        font-size: 1.3rem;
    }

    .field-value {
        font-size: 1.5rem;
    }

    .section-header {
        font-weight: 600;
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .entity-record-tab-section {
        background-color: grey;
        padding: 20px;

        h4 {
            margin: 0 0 15px 0;
            font-size: 2rem;
            font-weight: 600;
        }

        .username {
            font-size: 1.3rem;
        }
    }
    
    .grid-item {
      background-color: green;
    }


    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
        grid-gap: 15px;
    }

    .field-value {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .first-row-item {
        grid-column-start: 1;
    }

   .field-label {
        text-transform: uppercase;
        color: black;
        font-size: 1.3rem;
    }


.entity-record {
display: flex;
flex-direction: column;
flex: 1 1 0px;
    overflow-y: hidden;

    .entity {
    display: flex;
    flex-direction: column;
    flex: 1 1 0px;

        .entity-content {
                flex: 1 1 0px;
        }
    }
}