JSFiddle - React, Tailwind, and code Playground

by Amarnath Shenoy

HTML

<div ng-app>
<div ng-init="Doctors = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'},
                         {name:'Juliette', phone:'555-5678'}];
                         Specialities = [{ID:'John', s:'555-1276'},
                         {ID:'John', s:'555-1276'},
                         {ID:'John', s:'555-1276'},
                        {ID:'Mike', s:'555-1276'},
                        {ID:'Mike', s:'555-1276'},
                        {ID:'Mike', s:'555-1276'},
                      {ID:'Mike', s:'555-1276'}]">
                             
                    <input type="text" ng-model="curPlace" class="inputText">    
                    <br>    

<div ng-repeat="friendObj in Doctors|filter:curPlace">

<div class="square">
    <div class="content" >
    <input type="text" ng-model="Name11" class="inputText" value={{friendObj.name}}>
     {{friendObj.name}}
     <div ng-repeat="Obj in Specialities|filter:Name11">
     <li>
        {{Obj.s}}
     </li>
    
     </div>
     
    </div>
</div>
</div>

      

       
       
</div>
</div>

CSS

.uploadinfo {
	width:100%;
	table-layout:fixed !important;
	border-collapse:collapse;
	border:1px solid #CCC;
	 }
	
.uploadinfo th {	
	border:1px solid #CCC !important;
	background:#efefef !important;
	color:#000;
	text-align:left;
	padding:5px !important;
	font-size:13px !important;
	}
	
.uploadinfo td {
	border:1px solid #CCC !important;
	font-size:12px !important;
	padding:5px !important;
	}
  
  .square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:#1E1E1E;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    background:#ECECEC;
}