JSFiddle - React, Tailwind, and code Playground

by tomarriola

HTML

<main>
    <nav>
        <ul class="suspect-tabs">
            <li><button class="suspect-tab-button active" data-suspect="brinkman">Brinkman, Dudley</button></li>
            <li><button class="suspect-tab-button" data-suspect="dooley">Dooley, Eddie</button></li>
            <li><button class="suspect-tab-button" data-suspect="dykman-bill">Dykman, Bill</button></li>
            <li><button class="suspect-tab-button" data-suspect="dykman-robin">Dykman, Robin</button></li>
            <li><button class="suspect-tab-button" data-suspect="fine-andy">Fine, Andy</button></li>
            <li><button class="suspect-tab-button" data-suspect="fine-carl">Fine, Carl</button></li>
            <li><button class="suspect-tab-button" data-suspect="fine-cindy">Fine, Cindy</button></li>
            <li><button class="suspect-tab-button" data-suspect="laughlin">Laughlin, Chas</button></li>
            <li><button class="suspect-tab-button" data-suspect="reagle">Reagle, John</button></li>
        </ul>
    </nav>
    <div class="content-area">
        <nav class="dna-tabs">
            <h4 style="margin-top: 0;">DNA Evidence</h4>
            <ul class="dna-list">
                <li><button class="dna-tab-button active" data-dna-target="profile">Profile</button></li>
                <li><button class="dna-tab-button" data-dna-target="seat-cushion">seat cushion</button></li>
                <li><button class="dna-tab-button" data-dna-target="back-cushion">back cushion</button></li>
                <li><button class="dna-tab-button" data-dna-target="white-t-shirt">white t-shirt</button></li>
                <li><button class="dna-tab-button" data-dna-target="black-panties">black panties</button></li>
                <li><button class="dna-tab-button" data-dna-target="blue-button">blue button</button></li>
                <li><button class="dna-tab-button" data-dna-target="shovel">shovel</button></li>
                <li><button class="dna-tab-button"...

CSS

body {
    font-family: sans-serif;
    margin: 0;
    line-height: 1.6;
    background-color: #f4f4f4;
}

main {
    max-width: 1200px;
    margin: 2rem auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.suspect-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #337ab7;
}

.suspect-tabs li {
    flex-grow: 1;
}

.suspect-tab-button {
    width: 100%;
    text-align: center;
    padding: 1rem;
    border: none;
    background-color: #eee;
    color: #333;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 2px solid transparent;
}

.suspect-tab-button:hover {
    background-color: #e0e0e0;
}

.suspect-tab-button.active {
    background-color: #337ab7;
    color: white;
    border-bottom: 2px solid #337ab7;
}

.content-area {
    display: flex;
    min-height: 500px;
    border-top: none;
}

.dna-tabs {
    list-style: none;
    padding: 1rem;
    margin: 0;
    background-color: #f9f9f9;
    width: 250px;
    flex-shrink: 0;
    border-right: 1px solid #ddd;
}

.dna-tabs li {
    margin-bottom: 0.5rem;
}

.dna-tab-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border: none;
    background-color: transparent;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.dna-tab-button:hover {
    background-color: #e9e9e9;
}

.dna-tab-button.active {
    background-color: #d1d6de;
    font-weight: bold;
}

.details-pane {
    flex-grow: 1;
    padding: 2rem;
    display: none;
}

.details-pane.active {
    display: block;
}

.dna-content {
    display: none;
}

.dna-content.active {
    display: block;
}

.person-info {
    width:...

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const suspectTabs = document.querySelectorAll('.suspect-tab-button');
    const dnaTabs = document.querySelectorAll('.dna-tab-button');
    const detailsPanes = document.querySelectorAll('.details-pane');
    
    function showSuspectDetails(suspectName) {
        suspectTabs.forEach(tab => tab.classList.remove('active'));
        detailsPanes.forEach(pane => pane.classList.remove('active'));
        
        const selectedSuspectTab = document.querySelector(`.suspect-tab-button[data-suspect="${suspectName}"]`);
        const selectedDetailsPane = document.getElementById(suspectName);
        if (selectedSuspectTab) selectedSuspectTab.classList.add('active');
        if (selectedDetailsPane) selectedDetailsPane.classList.add('active');
        
        dnaTabs.forEach(tab => tab.classList.remove('active'));
        const defaultDnaTab = document.querySelector('.dna-tabs .dna-tab-button[data-dna-target="profile"]');
        if (defaultDnaTab) defaultDnaTab.classList.add('active');

        const dnaContents = selectedDetailsPane.querySelectorAll('.dna-content');
        dnaContents.forEach(content => content.style.display = 'none');
        const defaultDnaContent = selectedDetailsPane.querySelector('.dna-content[data-dna="profile"]');
        if (defaultDnaContent) defaultDnaContent.style.display = 'block';
    }

    function showDnaComparison(dnaTarget) {
        dnaTabs.forEach(tab => tab.classList.remove('active'));
        
        const selectedDnaTab = document.querySelector(`.dna-tab-button[data-dna-target="${dnaTarget}"]`);
        if (selectedDnaTab) selectedDnaTab.classList.add('active');

        const activeSuspectPane = document.querySelector('.details-pane.active');
        if (activeSuspectPane) {
            const dnaContents = activeSuspectPane.querySelectorAll('.dna-content');
            dnaContents.forEach(content => content.style.display = 'none');
  ...