JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<div data-sp-feature-tag="FacesAndPlacesArchiveWebPart web part (Faces and Places Archive)" data-sp-feature-instance-id="2f48a9b9-90c8-4c9a-8bc2-8dada0dea402" class="ms-SPLegacyFabricBlock"><div class="facesAndPlacesArchive_732b713f"><div class="fpWrapper_732b713f"><div class="fpItem_732b713f"><div class="fpItemContent_732b713f"><div class="focal_732b713f" style="background-image: url(&quot;https://prologisit.sharepoint.com/_api/v2.0/sharePoint:/sites/TheHub/FacesAndPlacesArchive/Teams.jpg:/driveItem/thumbnails/0/c900x400/content&quot;); background-position: center top;"> </div><div class="card-body cardBbody_732b713f"><div class="FPAtitleDesc_732b713f">The new interface provides a simplified and streamlined user experience. It also includes a couple</div><div class="FPAdetails_732b713f"><b class="authorDesc_732b713f">Shankar Narayan</b><span class="timeDesc_732b713f">  20 days ago</span><span class="likebtm_732b713f"><i data-icon-name="Like" role="presentation" aria-hidden="true" class="ms-Icon root-186 css-104 likeIcon_732b713f"></i></span><div class="ms-TooltipHost root-254"><button class="tooltip_732b713f" aria-describedby="tooltip0"> 1</button></div><span class="commentSpan_732b713f"><i data-icon-name="Comment" role="presentation" aria-hidden="true" class="ms-Icon root-186 css-104 commentIcon_732b713f"></i></span><span class="commentCount_732b713f">0</span></div></div></div></div><div class="fpItem_732b713f"><div class="fpItemContent_732b713f"><div class="focal_732b713f" style="background-image: url(&quot;https://prologisit.sharepoint.com/_api/v2.0/sharePoint:/sites/TheHub/FacesAndPlacesArchive/mobile.jpg:/driveItem/thumbnails/0/c900x400/content&quot;); background-position: center top;"> </div><div class="card-body cardBbody_732b713f"><div class="FPAtitleDesc_732b713f">Mobile</div><div class="FPAdetails_732b713f"><b class="authorDesc_732b713f">Shankar Narayan</b><span class="timeDesc_732b713f">  a month ago</span><span class="likebtm_732b713f"><i...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap);

.dialogModal_732b713f {
  width: auto !important;
  max-width: 900px !important;
  max-height: 500px !important
}

.commentImage_732b713f {
  background-size: cover;
  background-repeat: no-repeat;
  height: 14pc;
  width: 100%;
  margin-bottom: 42px;
  background-position: 50%
}

.imageName_732b713f {
  color: #008e5b
}

@media (min-width:375px) and (max-width:767px) {
  .commentContainer_732b713f {
    width: 89% !important;
    margin-left: 6%
  }

  .commentImageContainer_732b713f {
    width: 100% !important
  }

  .imageName_732b713f {
    margin-left: 6%;
    margin-top: 6% !important
  }
}

.facesAndPlacesArchive_732b713f .fpWrapper_732b713f {
  -ms-flex-line-pack: justify;
  align-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%
}

.facesAndPlacesArchive_732b713f .fpItem_732b713f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  width: 32%;
  min-width: 140px
}

.facesAndPlacesArchive_732b713f .fpItemContent_732b713f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height:100%;
}

.facesAndPlacesArchive_732b713f .FPAdetails_732b713f {
  display: inline
}

.facesAndPlacesArchive_732b713f .likesFPA_732b713f {
  float: right
}

.facesAndPlacesArchive_732b713f .tooltip_732b713f {
  border: 0;
  background-color: transparent;
  font-size: 12px;
  padding: 1px 0 !important
}

.facesAndPlacesArchive_732b713f .tooltip_732b713f :hover {
  color: #008e5b
}

.facesAndPlacesArchive_732b713f .tooltip_732b713f :active {
 ...