CSS Flip Card (Back and Front) Example with Code

<div class="card" onclick="this.classList.toggle('flipped');">
    <div class="card-inner">
        <div class="card-front">
            Front
        </div>
        <div class="card-back">
            Back
        </div>
    </div>
</div>
    

.card {
    width: 220px;
    height: 320px;
    perspective: 1500px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    overflow: hidden; 
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.card-front {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.card-back {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transform: rotateY(180deg);
}

.card.flipped .card-front {
    visibility: hidden; 
}
    

function showTab(tabId) {
    var tabs = document.querySelectorAll('.tab');
    var contents = document.querySelectorAll('.tab-content');
    
    tabs.forEach(function(tab) {
        tab.classList.remove('active');
    });
    
    contents.forEach(function(content) {
        content.classList.remove('active');
    });
    
    document.querySelector('.tab[onclick="showTab(\'' + tabId + '\')"]').classList.add('active');
    document.getElementById(tabId).classList.add('active');
}