JSFiddle - React, Tailwind, and code Playground

by Tom

HTML

<header>
    <nav>
        <input type="checkbox" id="hide_passwords" checked />
    </nav>
    <aside class="search">
        <input type="search" name="pwm_s" placeholder="Search..." tabindex="0" autosave="pwm_search" results />
    </aside>
</header>
<main>
    <table>
        <thead>
            <tr>
                <td>Password</td>
                <td>Username</td>
                <td>URL</td>
                <td>Manage</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="password" value="test" /></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</main>

CSS

body {
    font-family: sans-serif;
    padding: 0;
}

header {
    
}

nav {
    background-color: #000;
    height: 3em;
    width: 100%;
}

aside.search {
    padding: 1em;
    text-align: center;
}

aside.search input {
    width: 40%;
}

main {
    margin: 0 auto;
    width: 90%;
}

main table {
    width: 100%;
}

main table thead {
    border-bottom: 1px solid #CCC;
}

main table thead td {
    font-weight: bold;
    padding: 0.3em;
}

main table thead td:hover {
    background-color: #EEE;
}

main table td:nth-child(1), main table td:nth-child(2) , main table td:nth-child(4) {
    width: 20%;
}

main table tbody tr:hover {
    background-color: #EEE;
}

JavaScript

window.hide_passwords = $('#hide_passwords').attr('checked');

if(hide_passwords) {
    $("main table tbody tr").on({
        mouseenter: function() {
            $(this).children('td:first-child').children('input').attr('type', 'text');
        },
        mouseleave: function() {
            $(this).children('td:first-child').children('input').attr('type', 'password');
        }
    });
} else {
    $('input[type="password"]').attr('type', 'text');
}

$('#hide_passwords').click(function() {
    if($(this).prop('checked')) {
        window.hide_passwords = false;
    } else {
        window.hide_passwords = true;
    }
});