JSFiddle - React, Tailwind, and code Playground

by amit kumar

HTML

<div class="container">
	<div class="headingSection">
      <p>Sync your social media</p>
	  <div class="iconContainer">
	    <span class="icon noMarginL"></span><span class="icon"></span><span class="icon"></span><span class="icon"></span>
		<ul class="listContainer">
		 <li class="list">
		   <div class="listImg"><img src="listImg1.jpg"></div>
		   <div class="listInfo">
		   <div class="listInfoDetails">
		    <h1 class="listName">Amit Kumar</h1>
		    <p class="listAddress">New delhi</p>
<div class="amit"><c:out{{}}></div>
		   </div>
		   <div class="listIcon"></div>
		   </div>
		    <div class="listHoverInfo">sdsdfdf</div>
		  
		   
		 </li>
		 <li class="list">one</li>
		 <li class="list">one</li>
		 <li class="list">one</li>
		 
		</ul>
	  </div>
	</div>
</div>

CSS

/*Optional css to remove default space start here*/
   body,ul,li,p,h1,h2{margin:0; padding:0;font-family:arial; font-size:12px;}
   img{border:none;margin:0; padding:0;}
/*Optional css to remove default space ends here*/
.container{width:252px; background-color:#f0f6f7; padding-top:25px; overflow:hidden;}
.headingSection{text-align:center;}
.iconContainer{text-align:center;}
.icon{display:inline-block;width:20px; height:20px; border-radius:20px; border:1px solid #ccc; margin:15px 0px 15px 12px;}
.noMarginL{margin-left:0;}
.listContainer{}
.list{display:block; list-style:none; background-color:#ffffff; border-top:1px solid #f8f8f8; overflow:hidden;}
.listImg{width:58px; float:left; background-color:#fff;padding:7px 0;}
.listInfo{width:194px; float:left; padding:7px 0;}
.listInfoDetails{width:170px; text-align:left; display:inline-block;}
.listIcon{background-color: rgba(0, 0, 0, 0);
    background-image: none !important;
    border: 2px solid #959595;
    border-radius: 100%;
    box-sizing: border-box;
    height: 20px;
    padding: 0;
    position: relative;
    width: 20px;
	float:right;
	top:7px;
	right:8px;
	}
	
	.listIcon:before{border: 1px solid #959595;
    content: " ";
    display: block;
    height: 0;
    left: 50%;
    margin-left: -6px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 10px;}
	.listIcon:after{border: 1px solid #959595;
    content: " ";
    display: block;
    height: 10px;
    left: 50%;
    margin-left: -1px;
    margin-top: -6px;
    position: absolute;
    top: 50%;
    width: 0;}
	.listName{color:#676b6e; font-size:13px;}
	.listAddress{color:#676b6e; font-size:11px;}
	.list:hover{background-color:#51c4d4}
	.list:hover > .listInfo{display:none;}
	.listHoverInfo{display:none;}
	.list:hover > .listHoverInfo{display:block !important;}