JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="widget"> 
    <h4 class="title">Entity Applied
    <span class="glyphicon glyphicon-cog  pull-right" data-toggle="modal"
   data-target="#basicModal"></span>
    </h4>  
    <ul class="entityValues">
        <li>Option 1</li>
        <li>Option 1</li>
        <li>Option 1</li>
        <li class="selected">Option 1</li>
        <li>Option 1</li>
        <li>Option 1</li>
        <li>Option 1</li>
    </ul>
    
</div>


<!-- MODAL  -->

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel"><strong>Entity Selector</strong></h4>
            </div>
            <div class="modal-body">
                <h4>Select an Entity to apply to all the widget from this Dashboard</h4>
                <div class="top10"></div>
                <select class="form-control" id="entity">
                    <option value="1">Select Entity</option>
                    <option value="2">Account</option>
                </select>
                <div class="top10"></div>
                <select id="entVal" class="form-control hide"><option>Select Entity Value</option></select>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save selection</button>
        </div>
    </div>
  </div>
</div>

CSS

.widget {
    border: 1px solid #e5e8e9;
    padding:10px;
    margin:15px;
    max-width:450px;
    min-height:150px;
    text-align:center;
    color: #cec6c6;
}
.top10{
    height:10px;
    width:100%
}
.entityValues{
    list-style:none;
    padding:0;
    margin:0;
    text-align:left;
}
.entityValues li{
    line-height:35px;
    border-bottom:1px solid #e5e8e9;
    padding-left:20px;
    color:#2b2b2b;
}
.entityValues li:hover{
    background-color:#f2eded;
}
.title{
    font-weight:700;
    color:#333;
}
.title span{
    cursor:pointer;
    color:#999;
}
.title span:hover{
    cursor:pointer;
    color:#333;
}
.selected{
    background-color:#d9d8d8;
    font-weight:700;
}

JavaScript

$('#entity').change(function() {
    //alert($("#entity option:selected").text());
     

    $("#entVal").removeClass("hide")
  });