JSFiddle - React, Tailwind, and code Playground

by shanejones

HTML

<div class="body">
    
    <p>This below link can be anything.. an image, button, text link etc</p>    
    
    <p><a href="#" class="button">Choose person</a></p>
    
</div>

<div class="overlay">
    
    <div class="inner">
        <div class="item">Person 1</div>
        <div class="item">Person 2</div>
        <div class="item">Person 3</div>
        <div class="item">Person 4</div>
        <div class="clear"></div>
    </div>
    
</div>

CSS

body {
    background-color: #eeeeee;
}

.overlay {
    display: none;
}

.inner {
  width: 240px;
  background-color: rgba(0, 0, 255, 0.1);
    padding: 10px
}

.item {
  width: 100%;
  background-color: rgba(255, 0, 0, 0.5);
  margin: 10px 0; 
  cursor: pointer;
}

.clear {
    clear:both;
}

JavaScript

$('.button').click(function(){
    
    $('.overlay').fadeIn()

})