JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="widget"> <span class="glyphicon glyphicon-list-alt"></span>

    <div class="def-cont">
        <div class="definition" data-toggle="modal"
   data-target="#basicModal">Select and Entity</div>
        <div class="definition" data-toggle="modal"
   data-target="#basicModal">Apply a Filter</div>
    </div>
</div>
<div class="widget2">
    <div class="col-md-12">
        <div class="col-md-4"> <span class="glyphicon glyphicon-list-alt"></span>

        </div>
        <div class="col-md-8">
            <div class="def-cont">
                <div class="definition" data-toggle="modal"
   data-target="#basicModal">Select and Entity</div>
                <div class="definition" data-toggle="modal"
   data-target="#basicModal">Apply a Filter</div>
            </div>
        </div>
    </div>
</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">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Entity Selector</h4>
            </div>
            <div class="modal-body">
                <h3>Select an Entity to apply to all the widget from this Dashboard ()</h3>
                <div class="selector-grid">
                    <div class="grid-row">
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                    </div>
                    <div class="grid-row">
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                        <div class="box"></div>
                    </div>
                    <div...

CSS

.widget, .widget2 {
    border: 5px dashed #aaa4a4;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding:10px;
    margin:15px;
    max-width:450px;
    min-height:150px;
    text-align:center;
    color: #cec6c6;
}
.widget span {
    font-size:75px;
    padding:30px;
}
.widget2 span {
    font-size:75px;
    padding:20px;
}
.definition {
    border: 1px dashed #aaa4a4;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding:10px;
    margin:5px;
    font-weight:700;
    color: #a09797;
    cursor:pointer;
    width:200px;
}
.def-cont {
    width:200px;
    margin:15px auto;
}
.selector-grid{
    display:block;
    width:70px;
}
.grid-row{
    display:inline-block;
    line-height:10px;
}
.box{
    background-color: #cec6c6;
    height:10px;
    width:10px;
    float:left;
    margin:3px;
}