Tabbed card layout in Html/CSS

css file

.card.tabbed {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin: 20px;
}

.card-image {
    width: 30%;
    flex-shrink: 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-content {
    width: 70%;
    padding: 20px;
    box-sizing: border-box;
}

.card-content h3 {
    margin-top: 0;
    font-size: 20px;
    color: #333;
}

.tabs {
    border-top: 2px solid #ccc;
}

.tab {
    margin-top: 10px;
}

.tab input[type="radio"] {
    display: none;
}

.tab label {
    display: block;
    padding: 10px;
    background: #f9f9f9;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 5px;
    font-weight: bold;
}

.tab-content {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.tab input[type="radio"]:checked + label + .tab-content {
    display: block;
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between fields */
}

.field {
    width: calc(33.333% - 20px); /* 3 fields in a row with space between */
    margin-bottom: 20px; /* Space between rows */
}

.buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.buttons button {
    border: none;
    padding: 10px 20px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.buttons .edit {
    background-color: #007bff;
}

.buttons .delete {
    background-color: #dc3545;
}

.buttons .publish {
    background-color: #28a745;
}

@media (max-width: 768px) {
    .card.tabbed {
        flex-direction: column;
    }

    .card-image {
        width: 100%;
        height: auto;
    }

    .card-content {
        width: 100%;
    }

    .field-row {
        flex-direction: column;
    }

    .field {
        width: 100%;
    }

    .buttons {
        flex-direction: column;
        gap: 5px;
    }
}

html file

<div class="card tabbed">
    <div class="card-image">
        <img src="https://vipprops.ae/wp-content/uploads/jet-form-builder/2172fde49301047270b2897085e4319d/2024/09/Ocean-terrace.jpg" alt="Ocean Terrace">
    </div>
    <div class="card-content">
        <h3>hazrat Bilal Timber/Twing Card Layout 02</h3>
        <div class="tabs">
            <div class="tab">
                <input type="radio" id="tab1" name="tab-group" checked>
                <label for="tab1">Tab 1</label>
                <div class="tab-content">
                    <div class="field-row">
                        <div class="field">Field 1: Value</div>
                        <div class="field">Field 2: Value</div>
                        <div class="field">Field 3: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 4: Value</div>
                        <div class="field">Field 5: Value</div>
                        <div class="field">Field 6: Value</div>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input type="radio" id="tab2" name="tab-group">
                <label for="tab2">Tab 2</label>
                <div class="tab-content">
                    <div class="field-row">
                        <div class="field">Field 10: Value</div>
                        <div class="field">Field 11: Value</div>
                        <div class="field">Field 12: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 13: Value</div>
                        <div class="field">Field 14: Value</div>
                        <div class="field">Field 15: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 16: Value</div>
                        <div class="field">Field 17: Value</div>
                        <div class="field">Field 18: Value</div>
                    </div>
                </div>
            </div>
            <div class="tab">
                <input type="radio" id="tab3" name="tab-group">
                <label for="tab3">Tab 3</label>
                <div class="tab-content">
                    <div class="field-row">
                        <div class="field">Field 19: Value</div>
                        <div class="field">Field 20: Value</div>
                        <div class="field">Field 21: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 22: Value</div>
                        <div class="field">Field 23: Value</div>
                        <div class="field">Field 24: Value</div>
                    </div>
                    <div class="field-row">
                        <div class="field">Field 25: Value</div>
                        <div class="field">Field 26: Value</div>
                        <div class="field">Field 27: Value</div>
                    </div>
                </div>
            </div>
            <!-- Add more tabs as needed -->
        </div>
        <div class="buttons">
			<button class="publish">View Details</button>
            <button class="edit">Edit</button>
            <button class="delete">Delete</button>
        </div>
    </div>
</div>