JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div class="home-body">

  <!-- HEADER -->
  <div class="home-header">
    <div class="buttons">
      <div class="button"></div>
      <div class="button"></div>
      <div class="button"></div>
    </div>

    <div class="title">EMKT-EXPORTER</div>
  </div>

  <div class="home-content">
    <div class="cell">
      <div class="cell-header">
        <div class="cell-format"><strong>PSD:</strong></div>
        <div class="cell-name"><strong>{{ cell.name }}</strong></div>
        <div class="cell-collapser"><strong>+</strong></div>
      </div>
      <div class="cell-content collapsed">
      
        <div class="cell-data-display">
          <div class="label"><strong>OUTPUT:</strong></div>
          <div class="content"><strong>{{ cell.OUTPUT_PATH }}</strong></div>
        </div>

        <div class="cell-data-display">
          <div class="label"><strong>FOLDER NAME:</strong></div>
          <div class="content"><strong>{{ cell.OUTPUT_FOLDER_NAME }}</strong></div>
        </div>

        <div class="cell-data-display non-editable">
          <div class="label"><strong>INPUT:</strong></div>
          <div class="content"><strong>{{ cell.INPUT_PATH }}</strong></div>
        </div>

        <div class="cell-data-display non-editable">
          <div class="label"><strong>ID:</strong></div>
          <div class="content"><strong>{{ cell.ID }}</strong></div>
        </div>
        
        <div class="button-compile">
            <div><strong>COMPILE</strong></div>
        </div>
        
      </div>
    </div>
    
    


  </div>

  <div class="home-footer">

  </div>

</div>

CSS

* {
  font-family: Arial;
  user-select: none;
  box-sizing: border-box;
  cursor: default;
}

.home-body {
  width: 320px;
  height: 537px;
  border-radius: 6px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* HEADER START */

.home-header {
  width: 100%;
  /* height: 70px; */
  background-color: #05abc7;
  padding: 6px;
  order: 1;
  box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.35);
}

.home-header > * {
  padding-bottom: 6px;
}

.home-header .buttons {
  width: 100%;
}

.button {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  background-color: #ffffff;
  border-radius: 100%;
  cursor: pointer;
}

.button:hover {
  background-color: #e5ebec;
}

.button:active {
  background-color: #edf3f4;
}

.title {
  color: #ffffff;
  text-align: center;
}


/* HEADER END */


/* CONTENT START */

.home-content {1  
  background-color: #ffffff;
  order: 2;
  flex-grow: 1;
}

.cell {
  position: relative;
  background-color: #eaf0f1;
  width: calc(100% - 2px);
  padding: 6px;
  margin: 1px;
  border-radius: 3px;
  color: #494c4c;
  font-size: 12px;
}

.cell-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding-left: 3px;
  padding-right: 3px;
}

.cell-header > * {
  padding-left: 3px;
  padding-right: 3px;
}

.cell-format {
  order: 1;
}

.cell-name {
  overflow: hidden;
  order: 2;
  flex-grow: 1;
}

.cell-collapser {
  order: 3;
  cursor: pointer;
}

.cell-collapser > * {
  cursor: pointer;
}

.cell-content {
  display: none;
  width: 100%;
  padding-top: 6px;
  overflow: hidden;
}

.cell-content > * {
  overflow: hidden;
}

.collapsed {
  display: block;
}

.non-editable {
  color: #929292 !important;
}

.cell-data-display {
  padding-top: 6px;
  width: 100%;
  overflow: hidden; 
  display: flex;
  flex-direction: row;  
}

.label { 
  padding-left: 12px;  
}

.content {  
  font-size:11px;
  padding-left: 3px; 
  overflow:hidden;
  flex-grow: 1;
}

.button-compile {
  width: calc(100% -...

JavaScript

function teste () {
		
}

console.log(this['teste'])