JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<table class="profsinbaza">
	<tbody>
		<tr>
			<td colspan="4"><div class="profsinbaza01">{USERNAME}
           
        </div></td>
		</tr>
		<tr>
			<td colspan="3"><div class="profsinbaza01"><!-- BEGIN switch_show_status --> {USER_ONLINE}
      <!-- END switch_show_status --> — ostatnio: {LAST_VISIT_TIME}</div></td>
		</tr>
		<tr>
			<td><div id="profsinav">
      <div class="profsinav">{AVATAR_IMG}</div></div></td>
			<td class="profsinbaza06kon"> <!-- BEGIN contact_field -->
      <div id="field_id{contact_field.ID}">
        <div class="profsinbaza06akon">{contact_field.CONTENT}</div>
      </div><!-- END contact_field --></td>
			<td><div class="profsinbaza07box"><!-- BEGIN profile_field --><div id="field_id{profile_field.ID}"><div class="profsinbaza07box1"><span>{profile_field.LABEL}</span> {profile_field.CONTENT}</div></div><!-- END profile_field --> </div></td>
		</tr>
		<tr>
			<td colspan="3"><div class="profsinbaza04"><!-- BEGIN switch_auth_user -->
      {ADMINISTRATE_USER}{BAN_USER}<!-- END switch_auth_user --> </div></td>
		</tr>
	</tbody>
</table>

CSS

.profsinbaza {
  padding: 10px;
  font-size: 10px;
  text-align: justify;
  width: 810px;
  height: 380px;
  color: white;
  background-color: #141529;
}

#profsinav {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  padding: 6px;
}

.profsitop {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 73px;
  height: 21px;
  padding: 7px 10px 0;
  border: 1px solid;
  text-transform: uppercase;
  text-align: center;
  font-size: 10px;
  line-height: 15px;
  border-color: grey;
  background: rgba(255, 255, 255, 0.4);
  color: black !important;
}

.profsimsg {
  display: inline-block;
  vertical-align: middle;
  width: 73px;
  height: 21px;
  padding: 7px 10px 0;
  border: 1px solid;
  text-transform: uppercase;
  text-align: center;
  font-size: 10px;
  line-height: 15px;
  border-color: grey;
  background: rgba(255, 255, 255, 0.4);
  color: black !important;
}

.profsibaza {
  display: inline-block;
  vertical-align: top;
}

.profsiinfo {
  margin-top: 15px;
  width: 541px;
  height: 275px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid;
  font-size: 11px;
  border-color: grey;
  background: #FEFEFE;
  color: black;

}


.profsiinfo div span {
  font-weight: bold;
  text-transform: uppercase;
  color: black;

}


.profsiinfo div {
  padding: 2px 0;
}

.profsiinfo .field_uneditable {
  display: inline-block;
}



.profsinav {
  width: 200px;
  height: 320px;
  overflow: hidden;
}

.profsinbaza01 {
  text-align: center;
  font-size: 16pt;
  padding: 2px;
  background-color: #232853;
}

.profsinbaza02 {
  padding: 2px;
}

.profsinbaza03 {
  height: 320px;
  padding: 2px;
  background-color: steelblue;
  width: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.profsinbaza04 {
  text-align: center;
  font-size: 12pt;
  padding: 2px;
  background-color: #232853;
}


.profsinbaza07box {
  width: 500px;
  height: 200px;
  overflow-y: auto;
  text-align: justify;
  padding: 4px;
  font-size: 11px;
 ...