#hoverfollowcursor

<style>
div.container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th {
    text-align: left;
    font-weight: normal;
    color: #999;
    padding: 0 0 40px 0;
    font-size: 15px;
}

td {
    padding: 40px 0;
    border-top: 1px solid #eee;
    vertical-align: top;
}

.company-col {
    width: 25%;
    padding-right: 40px;
}

.details-col {
    width: 65%;
    padding-right: 40px;
}

.arrow-col {
    width: 10%;
}

.company {
    font-size: 22px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
}

.details {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    cursor: pointer;
}

.arrow {
    width: 12px;
    height: 12px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    transform: rotate(45deg);
    display: inline-block;
    margin-top: 8px;
}

.floating-logo {
    position: fixed;
    width: 240px;
    height: 240px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
}

.company:hover ~ .floating-logo,
.details:hover ~ .floating-logo {
    opacity: 1;
}

@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    th {
        display: none;
    }
    
    td {
        padding: 20px 0;
    }
    
    .company-col, .details-col {
        width: 100%;
        padding-right: 0;
    }
    
    .arrow-col {
        text-align: right;
        width: 100%;
    }
}
</style>
<script defer>
    window.addEventListener('load', function() {
        const floatingLogo = document.querySelector('.floating-logo');
        const hoverElements = document.querySelectorAll('.company, .details');

        document.addEventListener('mousemove', function(e) {
            if (floatingLogo.style.opacity !== '0') {
                const x = Math.min(window.innerWidth - 260, e.clientX - 190);
                const y = Math.min(window.innerHeight - 260, e.clientY - 190);
                floatingLogo.style.transform = `translate(${x}px, ${y}px)`;
            }
        });

        hoverElements.forEach(element => {
            element.addEventListener('mouseenter', function(e) {
                const logoUrl = this.getAttribute('data-logo');
                if (logoUrl) {
                    floatingLogo.style.backgroundImage = `url(${logoUrl})`;
                    floatingLogo.style.opacity = '1';
                    const x = Math.min(window.innerWidth - 260, e.clientX - 190);
                    const y = Math.min(window.innerHeight - 260, e.clientY - 190);
                    floatingLogo.style.transform = `translate(${x}px, ${y}px)`;
                }
            });

            element.addEventListener('mouseleave', function() {
                floatingLogo.style.opacity = '0';
            });
        });
    });
</script>
    <div class="container">
        <div class="floating-logo"></div>
        <table>
            <thead>
                <tr>
                    <th>Company</th>
                    <th>Details</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="company-col">
                        <div class="company" data-logo="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/73.0.0/chrome/chrome_256x256.png">Dropbox</div>
                    </td>
                    <td class="details-col">
                        <div class="details" data-logo="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/73.0.0/chrome/chrome_256x256.png">A curation of product, interactive and visual design work across consumer-facing web.</div>
                    </td>
                    <td class="arrow-col">
                        <div class="arrow"></div>
                    </td>
                </tr>
                
                <tr>
                    <td class="company-col">
                        <div class="company" data-logo="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/73.0.0/firefox/firefox_256x256.png">Carvana</div>
                    </td>
                    <td class="details-col">
                        <div class="details" data-logo="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/73.0.0/firefox/firefox_256x256.png">Drove the design of a web app for 250 employees to track 1M documents annually. It is projected to save the business ~$4.5M.</div>
                    </td>
                    <td class="arrow-col">
                        <div class="arrow"></div>
                    </td>
                </tr>
                
                <tr>
                    <td class="company-col">
                        <div class="company" data-logo="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/73.0.0/edge/edge_256x256.png">Carvana</div>
                    </td>
                    <td class="details-col">
                        <div class="details" data-logo="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/73.0.0/edge/edge_256x256.png">A curation of product design work across a consumer-facing native iOS application.</div>
                    </td>
                    <td class="arrow-col">
                        <div class="arrow"></div>
                    </td>
                </tr>
                
                <tr>
                    <td class="company-col">
                        <div class="company" data-logo="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/73.0.0/safari/safari_256x256.png">Emile</div>
                    </td>
                    <td class="details-col">
                        <div class="details" data-logo="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/73.0.0/safari/safari_256x256.png">Launched MVP to market with an EdTech startup within 50 days and acquired 1000+ new members.</div>
                    </td>
                    <td class="arrow-col">
                        <div class="arrow"></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>