JSFiddle - React, Tailwind, and code Playground

by Neeraj Sonar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/vadimsva/popModal/gh-pages/popModal.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="team-container">
                        <div class="panel panel-default"> 
                            <div class="panel-heading"> 
 
                            </div> 
                            <div class="panel-body">
                                <div class="col-md-12" style="">
                                    <div class="row team-img" id="list">
                                        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                                            <img src="images/aquaman.PNG" class="img-responsive img-thumbnail" />
                                            <a id="Arthur" class="dialogModal_ex1" data-dialogmodal-bind=".dialog_content" data-topoffset="0" data-top="10%" data-type="modal">
                                                <span class="text-center">Arthur Curry</span> 
                                            </a>
                                        </div>
                                        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                                            <img src="images/arrow.PNG" class="img-responsive img-thumbnail" />
                                            <a id="Oliver" class="dialogModal_ex1" data-dialogmodal-bind=".dialog_content" data-topoffset="0" data-top="10%" data-type="modal"> 
                                                <span class="text-center">Oliver Queen</span>
                                            </a>
                                        </div>
                                        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                                            <img src="images/batman.PNG" class="img-responsive img-thumbnail" />
   ...

CSS

.team-container .panel-heading{
             
            border: 1px solid #B4C8D2; 
            background: #a3cee9;
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
            background: -moz-linear-gradient(left, #a3cee9 0%, #ffffff 24%, #f4f9fd 59%, #cbe5f4 79%, #a3cfea 100%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a3cee9), color-stop(24%,#ffffff), color-stop(59%,#f4f9fd), color-stop(79%,#cbe5f4), color-stop(100%,#a3cfea));
            background: -webkit-linear-gradient(left, #a3cee9 0%,#ffffff 24%,#f4f9fd 59%,#cbe5f4 79%,#a3cfea 100%);
            background: -o-linear-gradient(left, #a3cee9 0%,#ffffff 24%,#f4f9fd 59%,#cbe5f4 79%,#a3cfea 100%);
            background: -ms-linear-gradient(left, #a3cee9 0%,#ffffff 24%,#f4f9fd 59%,#cbe5f4 79%,#a3cfea 100%);
            background: linear-gradient(to right, #a3cee9 0%,#ffffff 24%,#f4f9fd 59%,#cbe5f4 79%,#a3cfea 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3cee9', endColorstr='#a3cfea',GradientType=1 );
        }
        
        .team-container .form-control{
            height: 25px;
            padding: 2px 6px;

        }    
        
        .team-container .panel-body{
            border: 1px solid #B4C8D2;
            
        }
        
        .team-container small{
            color: #0f8cdb;
        }
        
        .team-img .img-thumbnail {
            height: 110px;
            width: 125px;
        }
        
        .team-img div{
            padding: 4px;
        }

        .team-img img{
            display: block;
            margin: 0 auto;
        }
        
         .team-img img:hover{
             cursor: pointer;
           -webkit-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.75);
            box-shadow:...

JavaScript

$(function(){
    $('.dialogModal_ex1').click(function(){
        var varThis = $(this).attr('id');
        var contentClass = "#"+varThis;
        console.log (contentClass);
        
		$('.dialog_content').dialogModal({
            placement : 'center',
			topOffset: 0,
			top: '10%',
			type: '',
			onOkBut: function() {},
			onCancelBut: function() {},
			onLoad: function(el, current) {
                alert(contentClass);
                $(contentClass).dialogModal( current );
            },
			onClose: function() {},
			onChange: function(el, current) {
				if(current == 3){
					/*el.find('.dialogModal_header span').text('Page 3');
					$.ajax({url:'ajax.html'}).done(function(content){
						el.find('.dialogModal_content').html(content);
					});*/
				}
			}
		});
	});
});