JSFiddle - React, Tailwind, and code Playground

by exlondoner

HTML

<div class="overlaymedia">
    <div class='media-filter'>
        <div class="media-nav" role='contentinfo'>
            <div class="media-nav media-menu-container">

                <h5 class="media-menu-heading close-overlay-btn">Media Type</h5>
                <!-- Media Type: All/Photos/Videos -->
                <div class="media-select-option media-all" data-href="">All</div>
                <div class="media-select-option media-photos" data-href="">Photos</div>
                <div class="media-select-option media-videos" data-href="">Videos</div>

                <h5 class="media-menu-heading close-overlay-btn">Sort By</h5>
                <!-- Sort By: Latest/Popular -->
                <div class="media-select-option media-latest" data-href="">Latest</div>
                <div class="media-select-option media-popular" data-href="">Popular</div>
                <div class="media-menu-bottom close-overlay-btn">
                    <div class="overlay-close-btn bottom">Close</div>
                </div>

            </div>
        </div>
    </div>
</div>

CSS

.overlay-close-btn:before { content: '×'; }

.overlay-close-btn.checked:before {
    content: '✔';
}


.media-select-option {
   border: solid 1px #0f0;  
}
.selected {
    border: solid 1px #f00;
}

JavaScript

$('.media-select-option').on('click', function() {
     $('.media-select-option').removeClass('selected');
     $(this).addClass('selected');
     
     $('.m-overlay-close-btn').addClass('checked');  
     
});